[英]Drawer to bottom nav bar in Flutter
I originally had a hamburger bar that opened a drawer to navigate between pages and I am wanting to change this to a bottom nav bar but I am struggling a bit.我最初有一个汉堡栏,它打开了一个抽屉以在页面之间导航,我想将其更改为底部导航栏,但我有点挣扎。 This is the code for the bottom nav bar:这是底部导航栏的代码:
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _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,
),
);
}
}
I have all the code for my main page in a class like this:我在 class 中有我主页的所有代码,如下所示:
class FirstRoute extends StatefulWidget {
FirstRoute({Key key, this.title}) : super(key: key);
final String title;
@override
_FirstRoute createState() => _FirstRoute();
}
class _FirstRoute extends State<FirstRoute> {
@override
Widget build(BuildContext context) {
And I don't understand how to put this into the Widget section in the bottom nav bar where the Text()
section is.而且我不明白如何将其放入Text()
部分所在的底部导航栏中的 Widget 部分。 I am new to using Flutter so any help would be appreciated.我是使用 Flutter 的新手,因此将不胜感激。
all you have todo here is to replace the text widgets with your widgets/screens您在这里要做的就是用您的小部件/屏幕替换文本小部件
example例子
static List<Widget> _widgetOptions = <Widget>[
FirstRoute(),
SecondRoute(),
ThirdRoute(),
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.