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<Tabs> {
  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: <Widget>[
                 DrawerHeader(child: Text("1234r")),
                 ListTile(
                   title: Text("空间"),
                 leading: CircleAvatar(child: Icon(Icons.people)),
                )
               ],
             )
           ),
           endDrawer: Drawer(
             child: Text("你好"),
           ),
    );
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值