Advertisement

Flutter-快速使用BottomNavigationBar(底部导航栏组件)

阅读量:

用于实现底部导航条的功能的是BottomNavigationBar组件,在使用时能够快速切换并浏览顶级视图。这一组件常见于许多App的主页设计中。

下面先来看看效果

在这里插入图片描述

实现流程主要包含三个阶段:
第一阶段.导入图片至项目并设置其存储位置
1.1

在这里插入图片描述

1.2这里注意前面必须加空格

在这里插入图片描述

第二步.自定义BottomNavigationBarItem

复制代码
    import 'package:flutter/material.dart';
    
    //自定义底部导航栏itme
    class NavigationIconView {
      final BottomNavigationBarItem item;
      //标题
      final String title;
      //图标
      final String icon;
      //选中图标路径
      final String activedIconPath;
    
      NavigationIconView(
      {@required this.title,
      @required this.icon,
      @required this.activedIconPath})
      : item = BottomNavigationBarItem(
            //默认图标
            icon: Image.asset(
              icon,
              width: 20,
              height: 20,
            ),
            //选中状态
            activeIcon: Image.asset(
              activedIconPath,
              width: 22,
              height: 22,
            ),
            title: Text(title));
    }
    
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

第三步.

复制代码
    import 'package:ejar/widgets/navigation_icon_view.dart';
    import 'package:flutter/material.dart';
    
    class HomePage extends StatefulWidget {
      @override
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      var _currentIndex = 0;
      List<NavigationIconView> _navigationIconView;
      List bottom_titles = ['首页', "分类", "消息", "购物车", "我的"];
      List bottom_icons = [
    'assets/images/home.png',
    "assets/images/all.png",
    "assets/images/message.png",
    "assets/images/cart_empty.png",
    "assets/images/my.png"
      ];
      List bottom_select_icons = [
    'assets/images/home_fill.png',
    "assets/images/all_fill.png",
    "assets/images/message_fill.png",
    "assets/images/cart_empty_fill.png",
    "assets/images/my_fill.png"
      ];
    
      // TODO: 初始化
      @override
      void initState() {
    super.initState();
    _navigationIconView = [
      for (var i = _currentIndex; i < bottom_titles.length; i++)
        NavigationIconView(
            title: bottom_titles[i],
            icon: bottom_icons[i],
            activedIconPath: bottom_select_icons[i])
    ];
      }
    
      @override
      Widget build(BuildContext context) {
    return Scaffold(
      //顶部应用按钮
      appBar: AppBar(
        title: Text("艺家"),
      ),
      body: Center(
        child: Container(
          child: Text(bottom_titles[_currentIndex]),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        //设置默认选中第一个图标
        currentIndex: _currentIndex,
        items: _navigationIconView.map((view) => view.item).toList(),
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
      }
    }
    
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

下面是BottomNavigationBar常见属性表

在这里插入图片描述

全部评论 (0)

还没有任何评论哟~