Flutter 3.2 BottomNavigationBar 自定义底部导航条 以及实现页面切换

1.BottomNavigationBar
是scaffold组件的参数

就是TabBar~~

type BottomNavigationBarType.fixed 配置底部tabs可以有多个按钮

class HTopMain extends StatefulWidget {
  @override
  _HTopMainState createState() => _HTopMainState();
}

class _HTopMainState extends State<HTopMain> {
  int _currentIndex = 0;
  List homeList = [HomeController(),SetController()];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Wnb"),
        ),
        body: homeList[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          items: [BottomNavigationBarItem(
            icon: Icon(
             Icons.cloud 
            ),
            title: Text("首页"),
          ),BottomNavigationBarItem(
            icon: Icon(
             Icons.cloud 
            ),
            title: Text("其他"),
          )],
          currentIndex: this._currentIndex,
          onTap: (int index){
            setState(() {
              this._currentIndex = index;
            });


          },


        ),
      );
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容