Flutter-底部选择弹窗(showModalBottomSheet)

前言

现在有个需求，需要用底部弹窗来添加定时的重复。在这里使用原生的showModalBottomSheet来实现

showModalBottomSheet的Props

名称	描述
isScrollControlled	全屏还是半屏
isDismissible	外部是否可以点击，false不可以点击，true可以点击，点击后消失
backgroundColor	背景色，通常可以设置白色和透明
barrierColor	设置遮挡底部的半透明颜色,默认是black54,可以设置成透明的; 置外部区域的颜色
enableDrag	是否可以向下拖动关闭,默认是true打开的;
shape	model边框样式
builder	构造内容

关闭弹窗

Navigator.pop(context);

完整代码

showModalBottomSheet(context: context,backgroundColor: Colors.transparent,builder: (context) {return Container(height: 600.h,padding: EdgeInsets.symmetric(horizontal: 30.w),decoration: BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(30.w),topRight: Radius.circular(30.w),),color: Colors.white,),child: Column(children: [Container(height: 110.h,child: Center(child: Text("重复".tr,style: TextStyle(fontSize: 30.sp,fontWeight: FontWeight.bold,),),),),RepeatModelItem(title: "启动一次".tr,isSelect: repeatDate.isEmpty,onPressed: () {Navigator.pop(context);},),RepeatModelItem(title: "每天".tr,isSelect: repeatDate.length == 7,onPressed: () {Navigator.pop(context);},),RepeatModelItem(title: "自定义".tr,isSelect: repeatDate.isNotEmpty && repeatDate.length < 7,onPressed: () {Navigator.pop(context);},),Container(margin: EdgeInsets.only(top: 20.h),child: TextButton(onPressed: () {Navigator.pop(context);},child: Text("取消".tr),),)],),);},);

 但是此时遇到了一个问题，在底部选择中使用多选框的是否不能选中

解决办法

使用StatefulBuilder实现局部刷新

showModalBottomSheet(isScrollControlled: true,context: context,backgroundColor: Colors.transparent,builder: (context) {//因为组件中用了多选框，要使多选框点击生效，所以这里使用了StatefulBuilder，实现局部刷新return StatefulBuilder(//弹窗内容builder: (context, setState) {return Container(height: 1050.h,padding: EdgeInsets.symmetric(horizontal: 30.w),decoration: BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(30.w),topRight: Radius.circular(30.w),),color: Colors.white,),child: Column(children: [// 标题SizedBox(height: 110.h,child: Center(child: Text("自定义".tr,style: TextStyle(fontSize: 30.sp,fontWeight: FontWeight.bold,),),),),RepeatModelItem(title: "周一".tr,isSelect: customrepeatDate[0] == 1,onPressed: () {setState(() {customrepeatDate[0] = customrepeatDate[0] == 1 ? 0 : 1;});},),RepeatModelItem(title: "周二".tr,isSelect: customrepeatDate[1] == 1,onPressed: () {setState(() {customrepeatDate[1] = customrepeatDate[1] == 1 ? 0 : 1;});},),RepeatModelItem(title: "周三".tr,isSelect: customrepeatDate[2] == 1,onPressed: () {setState(() {customrepeatDate[2] = customrepeatDate[2] == 1 ? 0 : 1;});},),RepeatModelItem(title: "周四".tr,isSelect: customrepeatDate[3] == 1,onPressed: () {setState(() {customrepeatDate[3] = customrepeatDate[3] == 1 ? 0 : 1;});},),RepeatModelItem(title: "周五".tr,isSelect: customrepeatDate[4] == 1,onPressed: () {setState(() {customrepeatDate[4] = customrepeatDate[4] == 1 ? 0 : 1;});},),RepeatModelItem(title: "周六".tr,isSelect: customrepeatDate[5] == 1,onPressed: () {setState(() {customrepeatDate[5] = customrepeatDate[5] == 1 ? 0 : 1;});},),RepeatModelItem(title: "周日".tr,isSelect: customrepeatDate[6] == 1,onPressed: () {setState(() {customrepeatDate[6] = customrepeatDate[6] == 1 ? 0 : 1;});},),// 取消、确定按钮Container(margin: EdgeInsets.only(top: 20.h),child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [// 取消按钮TextButton(style: TextButton.styleFrom(minimumSize: Size(300.w, 80.h),),onPressed: () {setState(() {customrepeatDate =setcustomrepeatDate(repeatDate);});Navigator.pop(context);},child: Text("取消".tr),),// 确定按钮TextButton(style: TextButton.styleFrom(minimumSize: Size(300.w, 80.h),),onPressed: () {var repeatDate1 = [];for (var i = 0; i < 7; i++) {if (customrepeatDate[i] == 1) {repeatDate1.add(i + 1);}}// setState(() {//   repeatDate = repeatDate1;// });//用上面的方法我更新不了repeatDate数据，于是我将更新放在外面了，可能是setState是StatefulBuilder的setRepeatDate(repeatDate1);Navigator.pop(context);},child: Text("确定".tr),),],),)],),);},);},);