Flutter从入门到跑路 ------BottomNavigationBar、自定义底部导航条(七)

BottomNavigationBar

属于Scaffold 组件的参数'
items  底部导航条按钮集合
iconSize  icon
currentlendex  默认选中的第几个
onTap  选中变换回调函数
fixedColor 选中的颜色
type 
class Tabs extends StatefulWidget {
  Tabs({Key key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State {
  int _currentIndex =0;
  List _pageList = [
    HomePage(),
    CategoryPage(),
    Setting(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
            title: Text('demo'),
          ),
          floatingActionButton: Container(
            height: 80,
            width: 80,
            child:  FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: (){
              print("点击");
            },
            ),
          ),
            floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
           body: this._pageList[this._currentIndex],
           bottomNavigationBar: BottomNavigationBar(
             currentIndex: this._currentIndex,
             onTap: (int index){
               setState(() {
                 
                 this._currentIndex =index;

               });
             },

             items: 
           [
             BottomNavigationBarItem(
               icon: Icon(Icons.home),
               title: Text("首页"),
             ),
             BottomNavigationBarItem(
               icon: Icon(Icons.category),
               title: Text("分类"),
             ),
             BottomNavigationBarItem(
               icon: Icon(Icons.settings),
               title: Text("设置"),
             ),
           ],
           ),
           drawer: Drawer(
             child: Column(
              
               children: [
                 DrawerHeader(child: Text("1234r")),
                 ListTile(
                   title: Text("空间"),
                 leading: CircleAvatar(child: Icon(Icons.people)),
                )
               ],
             )
           ),
           endDrawer: Drawer(
             child: Text("你好"),
           ),
    );
  }
}

你可能感兴趣的:(flutter)