11.Flutter学习之BottomNavigationBar自定义底部导航栏，以及页面切换

易帜

发布于 2022-02-09 16:00:23

1.2K0

发布于 2022-02-09 16:00:23

`BottomNavigationBar`

BottomNavigationBar是底部导航栏，可以让我们定义底部tab切换，bottomNavigationBar是之前讲到的Scaffold组件的参数常见属性：

属性名	说明
items	List<BottomNavigationBar>底部导航栏集合
iconSize	icon大小
currentIndex	默认选中第几个
onTap	选中变化回调函数
fixedColor	选中的颜色
type	BottomNavigationBarType.fied BottomNavigationBarType.shifting

注意：如果底部有3个以上的tabs，则需要使用BottomNavigationBarType.fied这个属性，才会显示正常

main()=>runApp(MyApp());
class MyApp extends StatelessWidget{


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
    );
  }

}

class Tabs extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _TabsState();
  }

}

class _TabsState extends State<Tabs>{
  int _bottomIndex=0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Flutter BottomNavigationBar'),),
      body: Text('tabBar'),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._bottomIndex,//对应点击/显示哪个底部导航栏按钮
        onTap: (index){ //bottomNavigationBar的点击事件
          setState(() {
            this._bottomIndex=index;  //将选中的下标进行替换
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.mood),
              title: Text('我的')
          ),
        ],
      ),
    );
  }
}

可以看出，随着我们点击tab，tab的颜色会切换。

进阶，点击Tab进行页面切换

首先我们进行页面的创建首页

class HomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }

}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('首页'),
    );
  }
}

设置

class CategoryPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _CategoryPageState();
  }

}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('这是设置页面'),
    );
  }
}

我的

class MinePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _MinePageState();
  }

}

class _MinePageState extends State<MinePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('这是我的页面'),
    );
  }
}

则我们的_TabsState类则进行如下修改即可

class _TabsState extends State<Tabs>{
  List<Widget> _page=[HomePage(),SettignPage(),MinePage()]; //用于存放对应的页面
  int _bottomIndex=0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('Flutter BottomNavigationBar'),),
      body:this._page[_bottomIndex],//此处取下标对应的页面即可
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._bottomIndex,//对应点击/显示哪个底部导航栏按钮
        onTap: (index){ //bottomNavigationBar的点击事件
          setState(() {
            this._bottomIndex=index;  //将选中的下标进行替换
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.mood),
              title: Text('我的')
          ),
        ],
      ),
    );
  }
}