微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Flutter底部导航栏BottomNavigationBar

BottomNavigationBar是底部的导航栏,一般应用在多个视图进行选择。类比于Android的底部导航栏,由Text文本和Icon图标组成。

这里创建一个List为显示内容提供容器:

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] 举报,一经查实,本站将立刻删除。

相关推荐