flutter - Flutter 中的抽屉到底部导航栏
问题描述
我最初有一个汉堡栏,它打开了一个抽屉以在页面之间导航,我想将其更改为底部导航栏,但我有点挣扎。这是底部导航栏的代码:
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,
),
);
}
}
我在这样的类中有我的主页的所有代码:
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) {
而且我不明白如何将其放入该部分所在的底部导航栏中的小部件部分Text()
。我是使用 Flutter 的新手,因此我们将不胜感激。
解决方案
您在这里要做的就是用您的小部件/屏幕替换文本小部件
例子
static List<Widget> _widgetOptions = <Widget>[
FirstRoute(),
SecondRoute(),
ThirdRoute(),
];
推荐阅读
- c# - 有没有办法只在 Visual Basic Express 2010 上的日历/日期时间选择器上显示/选择某些日期
- python - 为什么我不能从 python 的类中调用我的方法?
- python-3.x - 如何根据data.frame中的两列将data.frame转换为矩阵
- spring-boot - 在 Spring Boot 应用程序中使用 ssl 证书
- sql - 存储过程中的表参数可以为空吗?如何测试是否包含项目
- vba - 如何循环现有的宏?
- javascript - 如何防止可观察到的发射值被变异
- ruby-on-rails - Rails 4 中的多对多高级搜索
- javascript - 使用 javascript 查找域名可用性
- swift - UICollectionView 中的节标题,仅出现第一个