如何在 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 模板上集成底部导航栏?的主要内容,如果未能解决你的问题,请参考以下文章