BottomNavigationBar是底部的导航栏,一般应用在多个视图进行选择。类比于Android的底部导航栏,由Text文本和Icon图标组成。
static const List<Widget> _widget=<Widget>[
Text('Index 0:首页'),Text("Index 1:通讯录"),Text("Index 2:我的")];
底部导航栏的组成部分:
bottomNavigationBar: BottomNavigationBar(items: const<BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
BottomNavigationBarItem(icon: Icon(Icons.contacts),title: Text('通讯录')),
BottomNavigationBarItem(icon: Icon(Icons.build),title: Text('我的'))
]
规定底部导航栏选项卡被选中时的颜色变化:
selectedItemColor: Colors.Amber
当某个选项卡被选中时调用:
onTap: _onItemTapped
通过在_onItemTapped方法中将当前选中的选项卡的下标index赋值给_selectedindex,达到切换选项卡的效果:
void _onItemTapped(int index){
setState(() {
_selectedindex=index;
});
}
完整代码如下:
class MyStatefulWidget extends StatefulWidget{
MyStatefulWidget({Key key}) : super(key: key);
//为widget创建可变状态
_MyStatefulWidgetState createState()=>_MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget>{
int _selectedindex=0;//默认加载0号位
//显示内容
static const List<Widget> _widget=<Widget>[
Text('Index 0:首页'),Text("Index 1:通讯录"),Text("Index 2:我的")];
@override
Widget build(BuildContext context) {
// Todo: implement build
return Scaffold(appBar: AppBar(title: Text('底部导航栏'),),
//从List中根据当前选中的index取出元素显示
body: Center(child: _widget.elementAt(_selectedindex),),
bottomNavigationBar: BottomNavigationBar(items: const<BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
BottomNavigationBarItem(icon: Icon(Icons.contacts),title: Text('通讯录')),
BottomNavigationBarItem(icon: Icon(Icons.build),title: Text('我的'))
],
currentIndex: _selectedindex,
selectedItemColor: Colors.Amber,
//切换选项卡
onTap: _onItemTapped,),);
}
/**
* 负责把当前点击的index赋值给_selectedindex,实现切换
*/
void _onItemTapped(int index){
setState(() {
//将当前选中的选项卡的下标赋值给_selectedindex
_selectedindex=index;
});
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。