BottomNavigationBar

该Widget通常在Material design风格的页面框架Widget Scaffold中使用,作为Scaffold的一个bottomNavigationBar属性值。具体使用方法如下:

int selectedIndex = 1;
  final widgetOptions = [
    Text('This is Home Page'),
    Text('This is Product Page'),
    Text('This is More Page'),
  ];
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( //应用栏
        title: Text(widget.title),
      ),
      body: widgetOptions[selectedIndex], //页面内容
      bottomNavigationBar: BottomNavigationBar( //底部导航栏
        items: <BottomNavigationBarItem>[ //导航栏选项集合
          BottomNavigationBarItem( //底部单个导航栏选项
            icon: Icon(Icons.home), //图标
            title: Text('首页'), //标题
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            title: Text('产品'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.more_horiz),
            title: Text('更多'),
          ),
        ],
        currentIndex: selectedIndex, //当前导航栏选中的索引
        fixedColor: Colors.redAccent, //选中项的标题颜色
        onTap: (index) { //导航栏项点击后的处理方法
          setState(() {
            selectedIndex = index;
          });
        },
      ),
    );
  }

 

posted @ 2020-03-13 15:59  lai1322  阅读(117)  评论(0编辑  收藏  举报