Flutter跨平台移动端开发丨封装底部导航栏部件 Tab

Flutter 底部栏实现思路

使用flutter实现底部导航栏还是比较简单的，主要用到的组件是 Scaffold + BottomNavigationBar + BottomNavigationBarItem

Scaffold 可添加底部栏，BottomNavigationBar 可控制底部栏具体样式，BottomNavigationBarItem 可控制底部栏每个 item 的具体展现内容和样式

---

Flutter 底部栏实现步骤

创建 images 文件夹，将准备好 icon 资源 copy 进去（images文件夹与 android、ios 等同级）

在 yaml 文件中声明 icon 图片的信息

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    - images/mainTab_item01_down.png
    - images/mainTab_item02_down.png
    - images/mainTab_item03_down.png
    - images/mainTab_item04_down.png
    - images/mainTab_item01_up.png
    - images/mainTab_item02_up.png
    - images/mainTab_item03_up.png
    - images/mainTab_item04_up.png

定义 item 相关数据

  // 被点击 item 下标
  int _itemIndex = 0;

  // item 对应的页面
  final List<Widget> _pageList = [MainHome(), MainProduct(), MainNews(), MainPersonal()];

  // item 对应的名称
  final List<String> _pageNameList = ["Item01","Item02","Item03","Item04"];

  // item 对应的图标
  final _pageIconList = [
    ["images/mainTab_item01_up.png","images/mainTab_item01_down.png"],
    ["images/mainTab_item02_up.png","images/mainTab_item02_down.png"],
    ["images/mainTab_item03_up.png","images/mainTab_item03_down.png"],
    ["images/mainTab_item04_up.png","images/mainTab_item04_down.png"]
  ];

初始化 Scaffold + BottomNavigationBar + BottomNavigationBarItem

  @override
  Widget build(BuildContext context) {
    return _initWidget(context);
  }

  /**
   * 初始化 widget
   * */
  Widget _initWidget(BuildContext context){
    return Scaffold(

      // 初始化顶部导航栏
      appBar: _initTop(context),

      // 初始化中间区域
      body: _initContent(context),

      // 初始化底部导航栏
      bottomNavigationBar: _initBottom(context),
    );
  }

  /**
   * 初始化顶部导航栏
   * */
  AppBar _initTop(BuildContext context){
    return AppBar(
      title: Text(_pageNameList[_itemIndex], style: TextStyle(color:Color(0xffffffff), fontSize: 20.0),),
      centerTitle: true,
      backgroundColor: Color(0xff152137),
    );
  }

  /**
   * 初始化中间区域
   * */
  Widget _initContent(BuildContext context){
    return _pageList[_itemIndex];
  }

  /**
   * 初始化底部导航栏
   * */
  BottomNavigationBar _initBottom(BuildContext context){
    return BottomNavigationBar(
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
            icon: _getItemIcon(0),
            title: _getItemText(0)
        ),
        BottomNavigationBarItem(
            icon: _getItemIcon(1),
            title: _getItemText(1)
        ),
        BottomNavigationBarItem(
            icon: _getItemIcon(2),
            title: _getItemText(2)
        ),
        BottomNavigationBarItem(
            icon: _getItemIcon(3),
            title: _getItemText(3)
        ),
      ],
      type: BottomNavigationBarType.fixed,
      currentIndex: _itemIndex,
      onTap: _onTabItem,
    );
  }

---

运行结果

---

完整源码

/**
 * @des 主页面底部导航栏
 * @author liyongli 20190701
 * */
class MainTab extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => new MainTabState();

}

/**
 * @des 主页面底部导航栏 State
 * @author liyongli 20190701
 * */
class MainTabState extends State<MainTab>{

  @override
  Widget build(BuildContext context) {
    return _initWidget(context);
  }

  // 被点击 item 下标
  int _itemIndex = 0;

  // item 对应的页面
  final List<Widget> _pageList = [MainHome(), MainProduct(), MainNews(), MainPersonal()];

  // item 对应的名称
  final List<String> _pageNameList = ["Item01","Item02","Item03","Item04"];

  // item 对应的图标
  final _pageIconList = [
    ["images/mainTab_item01_up.png","images/mainTab_item01_down.png"],
    ["images/mainTab_item02_up.png","images/mainTab_item02_down.png"],
    ["images/mainTab_item03_up.png","images/mainTab_item03_down.png"],
    ["images/mainTab_item04_up.png","images/mainTab_item04_down.png"]
  ];

  /**
   * 初始化 widget
   * */
  Widget _initWidget(BuildContext context){
    return Scaffold(

      // 初始化顶部导航栏
      appBar: _initTop(context),

      // 初始化中间区域
      body: _initContent(context),

      // 初始化底部导航栏
      bottomNavigationBar: _initBottom(context),
    );
  }

  /**
   * 初始化顶部导航栏
   * */
  AppBar _initTop(BuildContext context){
    return AppBar(
      title: Text(_pageNameList[_itemIndex], style: TextStyle(color:Color(0xffffffff), fontSize: 20.0),),
      centerTitle: true,
      backgroundColor: Color(0xff152137),
    );
  }

  /**
   * 初始化中间区域
   * */
  Widget _initContent(BuildContext context){
    return _pageList[_itemIndex];
  }

  /**
   * 初始化底部导航栏
   * */
  BottomNavigationBar _initBottom(BuildContext context){
    return BottomNavigationBar(
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
            icon: _getItemIcon(0),
            title: _getItemText(0)
        ),
        BottomNavigationBarItem(
            icon: _getItemIcon(1),
            title: _getItemText(1)
        ),
        BottomNavigationBarItem(
            icon: _getItemIcon(2),
            title: _getItemText(2)
        ),
        BottomNavigationBarItem(
            icon: _getItemIcon(3),
            title: _getItemText(3)
        ),
      ],
      type: BottomNavigationBarType.fixed,
      currentIndex: _itemIndex,
      onTap: _onTabItem,
    );
  }

  /**
   * 导航栏 item 点击事件
   */
  void _onTabItem(int index) {
    setState(() {
      _itemIndex = index;
    });
  }

  /**
   * 获取导航栏 item 图标
   * */
  Image _getItemIcon(int index){

    // 选中图标
    if(index == _itemIndex){
      return Image.asset(_pageIconList[index][1], width: 23.0, height: 23.0,);
    }

    // 默认图标
    return Image.asset(_pageIconList[index][0], width: 23.0, height: 23.0,);
  }

  /**
   * 获取导航栏 item 文字
   * */
  Text _getItemText(int index){

    // 选中文字
    if(index == _itemIndex){
      return Text(_pageNameList[index], style:TextStyle(color: Color(0xff152137), fontSize: 15.2));
    }

    // 默认文字
    return Text(_pageNameList[index], style:TextStyle(color: Color(0xff666666), fontSize: 15.0));
  }
}

---

本篇到此完结，更多 Flutter 跨平台移动端开发 原创内容持续更新中~

期待您 关注 / 点赞 / 收藏 向着 大前端工程师 晋级！