Flutter中bottom sheet内Dropdown无法修改选中值问题求助

showCupertinoModalBottomSheet弹出的底部弹窗属于独立路由栈下的独立widget树，你代码里调用的外层_AddPostState的setState只会刷新主页面组件，不会触发弹窗内部组件重绘。虽然selectedValue变量值已经修改，但Dropdown没有拿到新值触发重建，所以表现为选中值无法更新。这也是为什么相同代码放在普通页面可以正常运行——普通页面里的Dropdown属于当前State管理的widget树，setState可以直接触发刷新。

你可以任选以下一种方案修复：

• 方案1：将弹窗内容抽离为独立的StatefulWidget，把选中状态、下拉选项逻辑都放到这个独立组件内部管理，组件内的setState会直接刷新弹窗内的widget树，选中值即可正常更新。如果需要把选中结果传回主页面，在选中后调用Navigator.pop(context, 选中值)即可在主页面的弹窗打开方法处接收返回值。
  核心实现代码：

  // 抽离弹窗独立组件
  class PostPermissionSheet extends StatefulWidget {
    const PostPermissionSheet({super.key});
  
    @override
    State<PostPermissionSheet> createState() => _PostPermissionSheetState();
  }
  
  class _PostPermissionSheetState extends State<PostPermissionSheet> {
    String? selectedValue = '1';
  
    List<DropdownMenuItem<String>> get itemse => [
      DropdownMenuItem(
        value: '1',
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: const [
            SizedBox(width: 15,),
            Icon(Icons.lock_outline,size: 19,),
            SizedBox(width: 10,),
            Text('Only me'),
          ],
        ),
      ),
      DropdownMenuItem(
        value: '2',
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: const [
            SizedBox(width: 15,),
            Icon(Icons.group_rounded,size: 19,),
            SizedBox(width: 10,),
            Text('Friends'),
          ],
        ),
      ),
      DropdownMenuItem(
        value: '3',
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: const [
            SizedBox(width: 15,),
            Icon(Icons.public,size: 19,),
            SizedBox(width: 10,),
            Text('Public'),
          ],
        ),
      ),
    ];
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(backgroundColor: Colors.white,foregroundColor: Colors.black,),
        body: Column(
          children: [
            DropdownButton(
              value: selectedValue,
              items: itemse,
              onChanged: (y) {
                setState(() {
                  selectedValue = y as String;
                });
                // 传值回主页面可以打开下面这行
                // Navigator.pop(context, selectedValue);
              },
            )
          ],
        ),
      );
    }
  }
  
  // 原bottomSheet方法修改为
  void bottomSheet(){
    showCupertinoModalBottomSheet(
      expand: true,
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) => const PostPermissionSheet(),
    );
  }
  

• 方案2：不想抽离新组件的话，在弹窗builder中用StatefulBuilder包裹内容，拿到弹窗作用域内的StateSetter，选中值变化时调用这个内部的StateSetter触发弹窗内部刷新即可。
  核心实现代码：

  void bottomSheet(){
    showCupertinoModalBottomSheet(
      expand: true,
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) => StatefulBuilder(
        builder: (context, setSheetState) {
          return Scaffold(
            appBar: AppBar(backgroundColor: Colors.white,foregroundColor: Colors.black,),
            body: Column(
              children: [
                DropdownButton(
                  value: selectedValue,
                  items: itemse,
                  onChanged: (y) {
                    // 调用弹窗内部的刷新方法，不要用外层的setState
                    setSheetState(() {
                      selectedValue = y! as String;
                    });
                  },
                )
              ],
            ),
          );
        }
      ),
    );
  }
  

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