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

Question

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

我理解了这个原理，但我不能在模板的正文中插入这一行：child：_widgetOptions.elementAt（_selectedIndex），（这行代码来自flutter doc），因为正文返回一个ListTitle

谢谢你的帮助！

'小部件构建（BuildContext上下文）{返回脚手架（appBar： AppBar（title： const Text（'Sample Items'）），操作：[IconButton（icon： const Icon（Icons.settings），onPress: () { Navigator.restorablePushNated（上下文，SettinsView.route名称); }, ), ], ), body： ListView.builder（恢复Id：'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,
  ),
);

}}'

Answer 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,
  ),
);

} }