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

Posted

技术标签:

【中文标题】如何在 2.5 版本的新 Flutter 模板上集成底部导航栏?【英文标题】:How to integrate a bottom navigation bar on the new flutter template of version 2.5? 【发布时间】:2021-11-17 08:58:12 【问题描述】:

2.5版本新的flutter模板如何集成底部导航栏?

原理明白了但是不能在模板的Body中插入这行:child: _widgetOptions.elementAt (_selectedIndex),(这行代码来自flutter doc),因为Body返回的是ListTitle

感谢您的帮助!

` 小部件构建(BuildContext 上下文) 返回脚手架( 应用栏:应用栏( 标题:常量文本('示例项目'), 行动:[ 图标按钮( 图标:常量图标(图标。设置), 按下:() Navigator.restorablePushNamed(context, SettingsView.routeName); , ), ], ), 正文:ListView.builder( restoreId: 'sampleItemListView', itemCount: items.length,

    itemBuilder: (BuildContext context, int index) 
      final item = items[index];

      return ListTile(
        title: Text('SampleItem $item.id'),
        leading: const CircleAvatar(
          // Display the Flutter Logo image asset.
          foregroundImage: AssetImage('assets/images/flutter_logo.png'),
        ),
        onTap: () 
          Navigator.restorablePushNamed(
            context,
            SampleItemDetailsView.routeName,
          );
        
      );
    ,
  ), 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,
  ),
);

`

【问题讨论】:

【参考方案1】:
Widget build(BuildContext context) 
return Scaffold(
  appBar: AppBar(
    title: const Text('Sample Items'),
    actions: [
      IconButton(
        icon: const Icon(Icons.settings),
        onPressed: () 
          // Navigate to the settings page. If the user leaves and returns
          // to the app after it has been killed while running in the
          // background, the navigation stack is restored.
          Navigator.restorablePushNamed(context, SettingsView.routeName);
        ,
      ),
    ],
  ),

  // To work with lists that may contain a large number of items, it’s best
  // to use the ListView.builder constructor.
  //
  // In contrast to the default ListView constructor, which requires
  // building all Widgets up front, the ListView.builder constructor lazily
  // builds Widgets as they’re scrolled into view.
  body: ListView.builder(
    // Providing a restorationId allows the ListView to restore the
    // scroll position when a user leaves and returns to the app after it
    // has been killed while running in the background.
    restorationId: 'sampleItemListView',
    itemCount: items.length,

    itemBuilder: (BuildContext context, int index) 
      final item = items[index];

      return ListTile(
        title: Text('SampleItem $item.id'),
        leading: const CircleAvatar(
          // Display the Flutter Logo image asset.
          foregroundImage: AssetImage('assets/images/flutter_logo.png'),
        ),
        onTap: () 
          // Navigate to the details page. If the user leaves and returns to
          // the app after it has been killed while running in the
          // background, the navigation stack is restored.
          Navigator.restorablePushNamed(
            context,
            SampleItemDetailsView.routeName,
          );
        
      );
    ,
  ),
  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,
  ),
);

【讨论】:

正如目前所写,您的答案尚不清楚。请edit 添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

以上是关于如何在 2.5 版本的新 Flutter 模板上集成底部导航栏?的主要内容,如果未能解决你的问题,请参考以下文章

译Flutter 2.5 发布,大版本更新,众多性能提升和优化

Flutter 2.5 | 一文解读重点更新

Flutter 2.5正式版发布,带来重大更新

Flutter 2.5 更新详解

挑重点,Flutter 2.5 来了

Flutter 2.5 发布啦,快来看看新特性