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

1.BottomNavigationBar
是scaffold组件的参数

就是TabBar~~

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

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

class _HTopMainState extends State {
  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;
            });


          },


        ),
      );
  }
}

你可能感兴趣的:(Flutter 3.2 BottomNavigationBar 自定义底部导航条 以及实现页面切换)