如何在Flutter 2.5版本新模板中集成底部导航栏

解决方法 #

1. 先在当前页面的State类中定义所需变量和切换方法

你需要先补充底部导航必备的状态变量和点击回调逻辑，原来的ListView.builder逻辑直接作为首页（Home选项）的页面组件放入_widgetOptions列表中：

class _YourPageState extends State<YourPage> {
  // 记录当前选中的底部导航索引，默认选中第一个Home页
  int _selectedIndex = 0;
  // 三个底部导航项对应的页面组件列表
  late List<Widget> _widgetOptions;
  // 你的原有items列表，此处保留你的原有逻辑
  final List<SampleItem> items = [...];

  @override
  void initState() {
    super.initState();
    _widgetOptions = <Widget>[
      // 第一个元素对应Home页，就是你原来写的ListView.builder逻辑
      ListView.builder(
        restorationId: 'sampleItemListView',
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          final item = items[index];
          return ListTile(
            title: Text('SampleItem ${item.id}'),
            leading: const CircleAvatar(
              foregroundImage: AssetImage('assets/images/flutter_logo.png'),
            ),
            onTap: () {
              Navigator.restorablePushNamed(
                context,
                SampleItemDetailsView.routeName,
              );
            }
          );
        },
      ),
      // 第二个元素对应Business页，可替换为你自己的业务组件
      const Center(child: Text('Business页面')),
      // 第三个元素对应School页，可替换为你自己的业务组件
      const Center(child: Text('School页面')),
    ];
  }

  // 底部导航点击切换逻辑
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  // 下面是修改后的build方法
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Items'),
        actions: [
          IconButton(
            icon: const Icon(Icons.settings),
            onPressed: () {
              Navigator.restorablePushNamed(context, SettingsView.routeName);
            },
          ),
        ],
      ),
      // 直接替换body为官方文档给出的调用方式即可
      body: _widgetOptions.elementAt(_selectedIndex),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

可选优化

如果不同页面需要显示不同的AppBar标题/操作按钮，可以把AppBar也整合到_widgetOptions的每个页面对象中，或者根据_selectedIndex动态修改AppBar的配置即可。

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