Flutter实现复选框控制全屏模式的开启与关闭

要实现复选框控制全屏开关，确实需要通过if-else判断复选框的选中状态，分别调用对应的系统UI模式设置。你当前的代码只处理了显示底部导航栏的情况，下面是完善后的实现：

onChanged: (val) {
  setState(() {
    thu = val!;
    if (val) {
      // 选中复选框时进入全屏，隐藏所有系统UI
      SystemChrome.setEnabledSystemUIMode(
        SystemUiMode.immersive,
      );
      // 或者用manual模式隐藏所有overlays：
      // SystemChrome.setEnabledSystemUIMode(
      //   SystemUiMode.manual,
      //   overlays: [],
      // );
    } else {
      // 取消选中时恢复正常显示，展示所有系统UI
      SystemChrome.setEnabledSystemUIMode(
        SystemUiMode.edgeToEdge,
      );
      // 或者用manual模式恢复默认：
      // SystemChrome.setEnabledSystemUIMode(
      //   SystemUiMode.manual,
      //   overlays: SystemUiOverlay.values,
      // );
    }
  });
},

关键说明： #

• immersive模式会完全隐藏状态栏和导航栏，用户点击屏幕时会临时显示，适合纯全屏场景
• edgeToEdge模式会让内容延伸到系统UI下方，同时保持UI可见，是更常用的非全屏状态
• 如果需要更精细控制，可以用manual模式搭配overlays参数，指定要显示的系统UI组件

内容的提问来源于stack exchange，提问作者Dilawar Ali Khan