Flutter StatefulWidget setState位置疑问：下拉选后按钮不显示

你的问题核心是没有将SegmentedButton纳入Widget树的渲染逻辑，并且setState没有关联实际的状态变更。你现在只是在onSelected回调里创建了按钮对象，但没有把它放到界面的组件列表中，空的setState也无法触发界面重建来显示新组件。

解决步骤 #

1. 在_Page2State中添加状态变量，控制SegmentedButton的显示状态和选中值
2. 在下拉菜单的onSelected回调中，更新状态变量并通过setState触发界面重建
3. 在Column的子组件列表中，根据状态变量条件渲染SegmentedButton

修改后的完整代码 #

class Page2 extends StatefulWidget {
  const Page2({super.key});

  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  // 控制SegmentedButton是否显示的状态变量
  bool _showSegmentedButton = false;
  // SegmentedButton的选中值状态
  Set<String> _selectedSearchType = {'Interior'};

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          displayLarge: const TextStyle(fontSize: 84, fontWeight: FontWeight.bold),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            children: <Widget>[
              const SizedBox(height: 50),
              DropdownMenu(
                width: 200,
                textStyle: const TextStyle(fontSize: 14),
                label: const Text('Session Options'),
                inputDecorationTheme: InputDecorationTheme(
                  isDense: true,
                  contentPadding: const EdgeInsets.symmetric(horizontal: 5),
                  constraints: const BoxConstraints.tight(Size.fromHeight(40)),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                onSelected: (value) {
                  debugPrint(value);
                  // 将状态更新逻辑包裹在setState内，触发界面重建
                  setState(() {
                    if (value == 'Create Session') {
                      _showSegmentedButton = true;
                    } else {
                      // 选择其他选项时隐藏按钮
                      _showSegmentedButton = false;
                    }
                  });
                },
                dropdownMenuEntries: const <DropdownMenuEntry<String>>[
                  DropdownMenuEntry(value: 'Create Session', label: 'Create Session'),
                  DropdownMenuEntry(value: 'Edit Session', label: 'Edit Session'),
                  DropdownMenuEntry(value: 'Delete Session', label: 'Delete Session'),
                ],
              ),
              // 根据状态变量条件渲染SegmentedButton
              if (_showSegmentedButton)
                Padding(
                  padding: const EdgeInsets.only(top: 20),
                  child: SegmentedButton<String>(
                    segments: const <ButtonSegment<String>>[
                      ButtonSegment<String>(value: 'Interior', label: Text('Interior')),
                      ButtonSegment<String>(value: 'Exterior', label: Text('Exterior')),
                    ],
                    selected: _selectedSearchType,
                    onSelectionChanged: (newSelection) {
                      // 处理SegmentedButton的选中状态变更
                      setState(() {
                        _selectedSearchType = newSelection;
                      });
                    },
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

关键改动说明 #

• 新增_showSegmentedButton布尔变量，作为控制按钮显示/隐藏的开关
• 将状态更新逻辑放入setState回调中，确保Flutter感知到状态变化并重建Widget树
• 在Column的子组件列表中使用条件渲染，只有当_showSegmentedButton为true时，才将SegmentedButton加入Widget树
• 补充了SegmentedButton的onSelectionChanged回调，处理选中状态的更新（可根据需求调整）

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