Flutter点击底部导航栏项后如何在主屏幕添加替换自定义Widget

• 第一步：先定义你需要的自定义Widget，比如对应底部导航的ComboBox展示页，可以参考如下代码编写：

// 自定义ComboBox演示页Widget
class ComboBoxShowcase extends StatelessWidget {
  const ComboBoxShowcase({super.key});

  @override
  Widget build(BuildContext context) {
    // 此处可自由编写你需要的页面布局逻辑
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text(
            "ComboBox 功能演示",
            style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 20),
          DropdownButton<String>(
            hint: const Text("请选择选项"),
            items: const [
              DropdownMenuItem(value: "option1", child: Text("选项1")),
              DropdownMenuItem(value: "option2", child: Text("选项2")),
              DropdownMenuItem(value: "option3", child: Text("选项3")),
            ],
            onChanged: (val) {
              // 此处编写下拉框选中后的逻辑
            },
          )
        ],
      ),
    );
  }
}

• 第二步：找到_widgetOptions列表，将对应索引位置的Text组件替换为你刚定义的自定义Widget即可：

static const List<Widget> _widgetOptions = <Widget>[
  Text(
    'Index 0: Home',
    style: optionStyle,
  ),
  Text(
    'Index 1: Business',
    style: optionStyle,
  ),
  // 替换原有的Text组件为自定义Widget
  ComboBoxShowcase(),
];

• 其余两个导航项对应的Text组件也可以用相同的逻辑替换为你自定义的按钮演示页、输入框演示页Widget，只要是继承自Widget的类都可以直接放到列表中
• 原代码中BottomNavigationBarItem的icon属性设为了null，建议替换为对应功能的Icon组件（比如Icon(Icons.list)），避免导航栏出现空白区域

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