Flutter中如何在modalBottomSheet显示后修改isDismissible布尔值

问题根源 #

1. showModalBottomSheet的isDismissible是初始化参数，BottomSheet创建后，该参数不会自动响应外部变量变化——因为路由配置在初始化时已固定。
2. 直接修改widget.dismissible违反Flutter Widget不可变的设计规范，无法触发UI更新，还会导致状态混乱。

方案一：直接修改ModalRoute的barrierDismissible属性 #

这是最直接的方法，通过获取当前BottomSheet对应的ModalRoute，动态修改其barrierDismissible属性，从而控制是否可点击遮罩关闭。

在子Widget的状态更新代码中修改：

setState(() {
  // 获取当前BottomSheet的路由并修改可关闭属性
  ModalRoute.of(context)?.barrierDismissible = false; // 根据业务条件设为true/false
  countdownTimer.cancel();
  sliderState = SlideState.loading;
});

方案二：用StatefulBuilder封装BottomSheet，通过回调更新状态 #

如果需要在BottomSheet内部统一管理状态，可以用StatefulBuilder包裹内容，将状态更新回调传递给子Widget。

修改openBottomDialog的builder部分：

builder: (model) {
  return StatefulBuilder(
    builder: (context, setState) {
      final modalRoute = ModalRoute.of(model);
      return BlocProvider.value(
        value: BlocProvider.of<T>(context),
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
          child: Wrap(
            children: [
              Container(
                decoration: BoxDecoration(
                    color: AppColors.of(context).d15151AwF5F5F5,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(24.r),
                        topRight: Radius.circular(24.r))),
                child: Container(
                    margin: const EdgeInsets.all(8),
                    child: Column(
                      children: [
                        AppAsset(
                          key: const Key('close_bottom_sheet'),
                          onTap: () {
                            Navigator.pop(context);
                            onClose!();
                          },
                          asset: AppImages.line,
                          tintColor:
                              AppColors.of(context).bottomSheetHandleColor,
                        ),
                        // 将状态更新回调传给子Widget
                        Container(child: child.copyWith(
                          onUpdateDismissible: (bool value) {
                            setState(() {
                              modalRoute?.barrierDismissible = value;
                            });
                          }
                        ))
                      ],
                    )),
              )
            ],
          ),
        ),
      );
    },
  );
}

子Widget中调用回调更新状态：

// 调用回调修改可关闭属性
widget.onUpdateDismissible(false);
setState(() {
  countdownTimer.cancel();
  sliderState = SlideState.loading;
});

注：需要提前给子Widget添加onUpdateDismissible回调参数。

方案三：结合Bloc状态管理（适配你的现有架构） #

如果你已经在用Bloc做状态管理，可以将可关闭状态存入Bloc的状态中，通过监听状态变化自动更新BottomSheet的可关闭属性。

1. 在Bloc的状态类中添加isDismissible字段：

class YourState extends Equatable {
  final bool isDismissible;
  // 其他状态字段...

  const YourState({required this.isDismissible, /* 其他参数 */});

  @override
  List<Object> get props => [isDismissible, /* 其他字段 */];
}

2. 添加事件用于更新可关闭状态：

class UpdateDismissibleEvent extends Equatable {
  final bool isDismissible;

  const UpdateDismissibleEvent(this.isDismissible);

  @override
  List<Object> get props => [isDismissible];
}

3. 在Bloc中处理事件：

class YourBloc extends Bloc<YourEvent, YourState> {
  YourBloc() : super(const YourState(isDismissible: false)) {
    on<UpdateDismissibleEvent>((event, emit) {
      emit(state.copyWith(isDismissible: event.isDismissible));
    });
  }
}

4. 修改openBottomDialog的builder，用BlocBuilder监听状态变化：

builder: (model) {
  return BlocProvider.value(
    value: BlocProvider.of<T>(context),
    child: BlocBuilder<T, YourState>(
      builder: (context, state) {
        // 监听Bloc状态，更新路由的可关闭属性
        ModalRoute.of(model)?.barrierDismissible = state.isDismissible;
        return BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
          child: Wrap(
            children: [
              // 原有布局代码...
              Container(child: child)
            ],
          ),
        );
      },
    ),
  );
}

5. 子Widget中通过Bloc事件更新状态：

context.read<T>().add(const UpdateDismissibleEvent(false));
setState(() {
  countdownTimer.cancel();
  sliderState = SlideState.loading;
});

内容的提问来源于stack exchange，提问作者Android