欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-30 09:36:40
...

Flutter 底部栏实现思路

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

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


Flutter 底部栏实现步骤

创建 images 文件夹,将准备好 icon 资源 copy 进去(images文件夹与 android、ios 等同级)

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

在 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,
    );
  }

运行结果

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


完整源码

/**
 * @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 跨平台移动端开发 原创内容持续更新中~

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

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