Flutter不切换页面时DraggableScrollableSheet如何更新背景页状态

你遇到的状态不同步核心是状态作用域隔离：

• 如果你是用showModalBottomSheet弹出的DraggableScrollableSheet，这个弹窗属于独立路由，内部调用setState默认只会刷新弹窗自身的组件树，不会触发背景页displayData的重建
• 最常见的低级错误是弹窗内和父页面定义了同名的布尔变量，本质是两个完全独立的变量，修改其中一个不会影响另一个，自然会出现弹窗里值为true、父页面始终为false的现象
• 部分写法给DraggableScrollableSheet传了独立的StatefulWidget，没有和父页面做状态同步，也会导致更新不生效

根据你的业务场景选对应方案即可：

方案1：弹窗关闭时回传值（最简单，无额外依赖） #

适合点击「完成」按钮才需要更新父页面状态的场景，通过路由返回值把弹窗内的选中结果传回父页面，父页面拿到值后再刷新自身。

// 以下代码写在DisplayData页面对应的State类中
// 控制图标变化的变量必须定义在父页面作用域
bool _iconSelected = false;

void _showSelectSheet() async {
  // 等待弹窗关闭，接收弹窗返回的状态值
  final bool? updateResult = await showModalBottomSheet<bool>(
    context: context,
    isScrollControlled: true, // 必须开启，否则DraggableScrollableSheet高度显示异常
    builder: (context) {
      return DraggableScrollableSheet(
        initialChildSize: 0.6,
        minChildSize: 0.3,
        maxChildSize: 0.9,
        expand: false,
        builder: (context, scrollController) {
          // 弹窗内部临时状态，仅用于控制弹窗内的交互
          bool tempSelectStatus = false;
          // 用StatefulBuilder给弹窗提供局部刷新能力，不影响父页面
          return StatefulBuilder(
            builder: (context, setSheetState) {
              return Column(
                children: [
                  // 这里放你弹窗的原有内容，比如列表、选择项
                  const Expanded(child: Center(child: Text("弹窗内容区域"))),
                  // 完成按钮
                  ElevatedButton(
                    onPressed: () {
                      // 关闭弹窗时把最新状态作为返回值传给父页面
                      Navigator.pop(context, tempSelectStatus);
                    },
                    child: const Text("完成"),
                  )
                ],
              );
            },
          );
        },
      );
    },
  );

  // 拿到弹窗返回值后，刷新父页面状态
  if (updateResult != null) {
    setState(() {
      _iconSelected = updateResult;
    });
  }
}

// 页面上的图标直接绑定父页面的变量即可
Icon(
  _iconSelected ? Icons.check_circle : Icons.radio_button_unchecked,
  color: _iconSelected ? Colors.green : Colors.grey,
)

注意：弹窗内部如果需要交互刷新自身内容（比如点击选项打勾），要用StatefulBuilder提供的setSheetState方法刷新，不要混用父页面的setState。

方案2：父页面传更新回调（适合弹窗打开过程中实时同步状态） #

如果需要弹窗操作过程中就实时更新父页面的图标，不需要等点完成，可以把父页面的状态更新方法直接传给弹窗，弹窗内触发操作时直接调用回调即可。

// 父页面State类内的变量和更新方法
bool _iconSelected = false;
void _changeIconStatus(bool newStatus) {
  setState(() {
    _iconSelected = newStatus;
  });
}

void _showSelectSheet() {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) {
      return DraggableScrollableSheet(
        initialChildSize: 0.6,
        expand: false,
        builder: (context, scrollController) {
          return Column(
            children: [
              const Expanded(child: Center(child: Text("弹窗内容区域"))),
              ElevatedButton(
                onPressed: () {
                  // 直接调用父页面传过来的更新方法，实时同步状态
                  _changeIconStatus(true);
                  // 不需要同步更新可以直接关弹窗
                  Navigator.pop(context);
                },
                child: const Text("完成"),
              )
            ],
          );
        },
      );
    },
  );
}

• 不要把控制父页面图标状态的变量定义在弹窗组件内部，父页面无法访问弹窗作用域的变量
• 如果项目中已经接入了Provider、Bloc、Riverpod等全局状态管理方案，直接把图标状态存在全局状态容器中，父页面和弹窗读取同一个状态即可，不需要手动传参/传回调

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