在移动开发中,下拉弹框是一种很常见的选择交互方式,效果如下图所示。
对于这种弹框,我们可以使用Dialog来实现,下面是自定义弹框的主要代码。
Color _bgColor = Colors.white;
double cellHeight = 34;
double cellWidth=120;
typedef ClickCallBack = void Function(int selectIndex, String selectText);
class PopMenus {
static void showPop(
{@required BuildContext context,
@required List<String> listData,
@required String selText,
ClickCallBack clickCallback}) {
Widget _buildMenuLineCell(dataArr) {
return ListView.separated(
itemCount: dataArr.length,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
Navigator.pop(context);
if (clickCallback != null) {
clickCallback(index, listData[index]);
}
},
child: Container(
height: cellHeight,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
selText==dataArr[index]?
Text(dataArr[index], style: TextStyle(fontSize: 16,color:
Colors.blue)):Text(dataArr[index], style: TextStyle(fontSize: 16))
],
),
));
},
separatorBuilder: (context, index) {
return Divider(
height: 0.1,
color: Color(0xFFE6E6E6),
);
},
);
}
_buildMenusView(dataArr) {
var cellH = dataArr.length * cellHeight;
var navH = ScreenUtils.navigationBarHeight;
navH = navH - ScreenUtils.topSafeHeight;
var leftP=(ScreenUtils.screenWidth-cellWidth)/2;
return Positioned(
left: leftP,
top: navH-10,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
padding: EdgeInsets.only(right: 10),
child: TriangleUpWidget(height: 10,width: 14),
),
ClipRRect(
borderRadius: BorderRadius.circular(2),
child: Container(
color: _bgColor,
width: cellWidth,
height: cellH,
child: _buildMenuLineCell(dataArr)))
],
),
);
}
showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return BasePopMenus(child: _buildMenusView(listData));
});
}
}
class BasePopMenus extends Dialog {
BasePopMenus({
Key key,
this.child,
}) : super(key: key);
final Widget child;
@override
Widget build(BuildContext context) {
return Material(
type: MaterialType.transparency,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
GestureDetector(onTap: () => Navigator.pop(context)),
child
],
),
);
}
}
如果需要改变弹框的位置,可以修改_buildMenusView()方法中的Positioned组件的边距代码。上面的代码中用到了一个自定义三角形,代码如下。
class TriangleUpPainter extends CustomPainter {
Color color; //填充颜色
Paint _paint; //画笔
Path _path; //绘制路径
double angle; //角度
TriangleUpPainter() {
_paint = Paint()
..strokeWidth = 1.0 //线宽
..color = Colors.white
..isAntiAlias = true;
_path = Path();
}
@override
void paint(Canvas canvas, Size size) {
final baseX = size.width;
final baseY = size.height;
//起点
_path.moveTo(baseX*0.5, 0);
_path.lineTo(baseX, baseY);
_path.lineTo(0, baseY);
canvas.drawPath(_path, _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
class TriangleUpWidget extends StatefulWidget {
double height;
double width;
TriangleUpWidget({Key key, this.height = 14, this.width = 16}) : super(key:
key);
@override
CoreTriangleState createState() => CoreTriangleState();
}
class CoreTriangleState extends State<TriangleUpWidget> {
@override
Widget build(BuildContext context) {
return Container(
height: widget.height,
width: widget.width,
child: CustomPaint(
painter: TriangleUpPainter(),
));
}
}
最后,在需要弹框的地方,调用我们自定义的弹框组件即可,如下所示。
PopMenus.showPop(context: context, listData: segmentLists,
selText: selectedTab, clickCallback: (int index, String value){
});
idea官方推送了2020.2.4版本的更新,那么大家最关心的问题来了,之前激活idea202...
前言 项目开发中不管是前台还是后台都会遇到烦人的null,数据库表中字段允许空值...
本文实例讲述了AJAX+Servlet实现的数据处理显示功能。分享给大家供大家参考,具...
大家好,我是狂聊君。 今天来聊一聊 Mysql 缓存池原理。 提纲附上,话不多说,直...
CKeditor,以前叫FCKeditor,已经使用过好多年了,功能自然没的说。最近升级到3....
在Flash Player 10.1及以上版本中,adobe新增了全局错误处理程序UncaughtErrorEv...
本文转载自微信公众号「SH的全栈笔记」,作者SH。转载本文请联系SH的全栈笔记公...
问题:我们在做flex的开发中,如果用到别人搭建好的框架,而别人的server名称往...
来源:DeepenStudy 漏洞文件:js.asp % Dimoblog setoblog=newclass_sys oblog.a...
本文转载自微信公众号「SQL数据库」,作者丶平凡世界 。转载本文请联系开发公众...