Flutter 学习： BottomNavigationBar 自定义底部导航条，已经实现页面切换

一.复习上一节

• 有状态组件写法

class HomePage extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return MyButtonWidget();
  }
}

class MyButtonWidget extends State {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
            child: Text("点击增加条目"),
            onPressed: () {
              setState(() {
             
              });
            },
          );
  }
}

二. BottomNavigationBar底部导航条

• BottomNavigationBar 是底部导航条，可以让我们定义底部Tab切换，BottomNavigationBar是Scaffold组件的参数

-常见属性

• items :底部导航条按钮集合 List
• iconSize:icon尺寸
• currentIndex:默认选中第几个
• onTap:选中变化的回调参数
• fixedColor:选中颜色
• type:配置底部tabs可以有多个 BottomNavigationBarType.fixed BottomNavigationBarType.shifting

• 代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyContent());
}

class MyContent extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return MyContentWidget();
  }
}

class MyContentWidget extends State {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text("标题${currentIndex}")),
      body: HomePage(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        fixedColor: Colors.pink,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              title: Text("首页", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.list, color: Colors.grey)),
          BottomNavigationBarItem(
              title: Text("守护", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.satellite, color: Colors.grey)),
          BottomNavigationBarItem(
              title: Text("故事", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.account_balance, color: Colors.grey)),
        ],
      ),
    ));
  }
}

• 效果图

  
  
  image.png

• 注意

items 数组中必须是指定类型 BottomNavigationBarItem

三.实现底部tab切换内容区域

1.在libs包下创建三个页面，在flutter中页面就是组件

• page页面

import 'package:flutter/material.dart';

class MyPage1 extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return MyButtonWidget();
  }
}

class MyButtonWidget extends State {
  int count = 0;
  List list = new List();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      alignment: Alignment.center,
      child: Text("页面1")
    );
  }
}

• 主页面

import 'package:flutter/material.dart';

import 'main0.dart';
import 'main1.dart';
import 'main2.dart';

void main() {
  runApp(MyContent());
}

class MyContent extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return MyContentWidget();
  }
}

class MyContentWidget extends State {
  int currentIndex = 0;
  List _listPage = [MyPage0(), MyPage1(), Mypage2()];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text("标题${currentIndex}")),
      body: _listPage[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        fixedColor: Colors.pink,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              title: Text("首页", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.list, color: Colors.grey)),
          BottomNavigationBarItem(
              title: Text("守护", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.satellite, color: Colors.grey)),
          BottomNavigationBarItem(
              title: Text("故事", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.account_balance, color: Colors.grey)),
        ],
      ),
    ));
  }
}

• 效果图

  
  
  tab切换.gif

• 注意

1.通过onTap回调 参数来获取 listPage 中的页面设置在body上
按钮比较多时设置type 属性
2.主页面引用MyPage0、MyPage1、MyPage2 组件需要导入包
3.当底部tab过多时可以设置type 属性BottomNavigationBarType.fixed
4.通过更新数据实现body内容切换，需要用到有状态组件

四.总结

BottomNavigationBar 写法

class MyContent extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return MyContentWidget();
  }
}

class MyContentWidget extends State {
  int currentIndex = 0;
  List _listPage = [];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      appBar: AppBar(title: ),
      body: _listPage[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        fixedColor: Colors.pink,
        type: BottomNavigationBarType.fixed,
        items: [BottomNavigationBarItem()],
      ),
    ));
  }
}