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),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            );
          },
        );
      },
    );