Flutter进阶—质感设计之底部导航

概述BottomNavigationBar即底部导航栏控件。显示在应用底部的质感设计控件，用于在少量视图中切换。底部导航栏包含多个以标签、图标或两者搭配的形式显示在项目底部的项目，提供了应用程序的顶级视图之间的快速导航。对于较大的屏幕，侧面导航可能更好。 创建navigation_icon_view.dart文件，定义一个NavigationIconView类，用于管理BottomNavigation

BottomNavigationbar即底部导航栏控件。显示在应用底部的质感设计控件，用于在少量视图中切换。底部导航栏包含多个以标签、图标或两者搭配的形式显示在项目底部的项目，提供了应用程序的顶级视图之间的快速导航。对于较大的屏幕，侧面导航可能更好。

创建navigation_icon_vIEw.dart文件，定义一个NavigationIconVIEw类，用于管理BottomNavigationbarItem（底部导航栏项目）控件的样式、行为与动画。

import 'package:Flutter/material.dart';// 创建类，导航图标视图class NavigationIconVIEw {  // 导航图标视图的构造函数  NavigationIconVIEw({    // 控件参数，传递图标    Widget icon,// 控件参数，传递标题    Widget Title,// 控件参数，传递颜色    color color,/* * Ticker提供者 * 由类实现的接口，可以提供Ticker对象 * Ticker对象：每个动画帧调用它的回调一次 */    TickerProvIDer vsync,}):_icon = icon,//接收传递的图标    // 接收传递的颜色    _color = color,// 创建底部导航栏项目    item = new BottomNavigationbarItem(      // 项目的图标      icon: icon,// 项目的标题      Title: Title    ),// 创建动画控制器    controller = new AnimationController(      // 动画持续的时间长度：默认情况下主题更改动画的持续时间      duration: kthemeAnimationDuration,// 垂直同步      vsync: vsync,) {      // 创建曲线动画      _animation = new CurvedAnimation(        // 应用曲线动画的动画        parent: controller,/* * 正向使用的曲线： * 从0.5 * 到1.0结束 * 应用的曲线：快速启动并缓和到最终位置的曲线 */        curve: new Interval(0.5,1.0,curve: Curves.fastOutSlowIn),);    }  // 类成员，存储图标  final Widget _icon;  // 类成员，存储颜色  final color _color;  // 类成员，底部导航栏项目  final BottomNavigationbarItem item;  // 类成员，动画控制器  final AnimationController controller;  // 类成员，曲线动画  CurvedAnimation _animation;  /* * 类函数，过渡转换 * BottomNavigationbarType：定义底部导航栏的布局和行为 * BuildContext：处理控件树中的控件 */  FadeTransition Transition(BottomNavigationbarType type,BuildContext context) {    // 局部变量，存储图标颜色    color iconcolor;    // 如果底部导航栏的位置和大小在点击时会变大    if (type == BottomNavigationbarType.shifting) {      // 存储颜色作为图标颜色      iconcolor = _color;    } else {      /* * 保存质感设计主题的颜色和排版值： * 使用themeData来配置主题控件 * 使用theme.of获取当前主题 */      final themeData themeData = theme.of(context);      /* * 如果程序整体主题的亮度很高（需要深色文本颜色才能实现可读的对比度） * 就返回程序主要部分的背景颜色作为图标颜色 * 否则返回控件的前景颜色作为图标颜色 */      iconcolor = themeData.brightness == Brightness.light        ? themeData.primarycolor        : themeData.accentcolor;    }    // 返回值，创建不透明度转换    return new FadeTransition(      // 控制子控件不透明度的动画      opacity: _animation,// 子控件：创建滑动转换过渡      child: new SlIDeTransition(        /* * 控制子控件位置的动画 * 开始值和结束值之间的线性插值<以尺寸的分数表示的偏移量> * （1.0，0.0）表示Size的右上角 * （0.0，1.0）表示Size的左下角 */        position: new Tween<FractionalOffset>(          // 此变量在动画开头的值          begin: const FractionalOffset(0.0,0.02),// 此变量在动画结尾处的值：左上角          end: FractionalOffset.topleft,).animate(_animation),// 返回给定动画，该动画接受由此对象确定的值        // 子控件：创建控制子控件的颜色，不透明度和大小的图标主题        child: new Icontheme(          // 用于子控件中图标的颜色，不透明度和大小          data: new IconthemeData(            // 图标的默认颜色            color: iconcolor,// 图标的默认大小            size: 120.0,),// 子控件          child: _icon,)      )    );  }}

再创建main.dart文件。类CustomIcon创建一个容器控件，作为一个自定义的图标使用。同时使用质感设计的d出菜单控件切换底部导航栏的行为和样式。

import 'package:Flutter/material.dart';import 'navigation_icon_vIEw.dart';// 创建类，自定义图标，继承StatelessWidget（无状态的控件）class CustomIcon extends StatelessWidget {  // 覆盖此函数以构建依赖于动画的当前状态的控件  @overrIDe  Widget build(BuildContext context) {    // 获取当前图标主题，创建与此图标主题相同的图标主题    final IconthemeData icontheme = Icontheme.of(context).fallback();    // 返回值，创建一个容器控件    return new Container(      // 围绕子控件的填充：每个边都偏移4.0      margin: const EdgeInsets.all(4.0),// 容器宽度：图标主题的宽度减8.0      wIDth: icontheme.size - 8.0,// 容器高度：图标主题的高度减8.0      height: icontheme.size - 8.0,// 子控件的装饰：创建一个装饰      decoration: new Boxdecoration(        // 背景颜色：图标主题的颜色        backgroundcolor: icontheme.color      )    );  }}// 创建类，菜单演示，继承StatefulWidget（有状态的控件）class MenusDemo extends StatefulWidget {  /* * 覆盖具有相同名称的超类成员 * createState方法在树中的给定位置为此控件创建可变状态 * 子类应重写此方法以返回其关联的State子类新创建的实例 */  @overrIDe  _MenusDemoState createState() => new _MenusDemoState();}/* * 关联State子类的实例 * 继承State：StatefulWidget（有状态的控件）逻辑和内部状态 * 继承TickerProvIDerStateMixin，提供Ticker对象 */class _MenusDemoState extends State<MenusDemo> with TickerProvIDerStateMixin {  // 类成员，存储底部导航栏的当前选择  int _currentIndex = 2;  // 类成员，存储底部导航栏的布局和行为：在点击时会变大  BottomNavigationbarType _type = BottomNavigationbarType.shifting;  // 类成员，存储NavigationIconVIEw类的列表  List<NavigationIconVIEw> _navigationVIEws;  /* * 在对象插入到树中时调用 * 框架将为它创建的每个State（状态）对象调用此方法一次 * 覆盖此方法可以实现此对象被插入到树中的位置的初始化 * 或用于配置此对象上的控件的位置的初始化 */  @overrIDe  voID initState() {    // 调用父类的内容    super.initState();    // 在存储NavigationIconVIEw类的列表里添加内容    _navigationVIEws = <NavigationIconVIEw>[      /* * 创建NavigationIconVIEw类的实例 * 传递图标参数 * 传递标题参数 * 传递颜色参数 * 传递Ticker对象 */      new NavigationIconVIEw(        icon: new Icon(Icons.access_alarm),Title: new Text('成就'),color: colors.deepPurple[500],vsync: this,new NavigationIconVIEw(        icon: new CustomIcon(),Title: new Text('行动'),color: colors.deepOrange[500],new NavigationIconVIEw(        icon: new Icon(Icons.cloud),Title: new Text('人物'),color: colors.teal[500],new NavigationIconVIEw(        icon: new Icon(Icons.favorite),Title: new Text('财产'),color: colors.indigo[500],new NavigationIconVIEw(        icon: new Icon(Icons.event_available),Title: new Text('设置'),color: colors.pink[500],];    // 循环调用存储NavigationIconVIEw类的列表的值    for (NavigationIconVIEw vIEw in _navigationVIEws)      // 每次动画控制器的值更改时调用侦听器      vIEw.controller.addListener(_rebuild);    // 底部导航栏当前选择的动画控制器的值为1.0    _navigationVIEws[_currentIndex].controller.value = 1.0;  }  // 释放此对象使用的资源  @overrIDe  voID dispose() {    // 调用父类的内容    super.dispose();    // 循环调用存储NavigationIconVIEw类的列表中的项    for (NavigationIconVIEw vIEw in _navigationVIEws)      // 调用此方法后，对象不再可用      vIEw.controller.dispose();  }  // 动画控制器的值更改时的 *** 作  voID _rebuild() {    // 通知框架此对象的内部状态已更改    setState((){      // 重建，以便为视图创建动画    });  }  // 建立过渡堆栈  Widget _buildTransitionsstack() {    // 局部变量，存储不透明度转换的列表    final List<FadeTransition> Transitions = <FadeTransition>[];    // 循环调用存储NavigationIconVIEw类的列表的值    for (NavigationIconVIEw vIEw in _navigationVIEws)      // 在存储不透明度转换的列表中添加Transition函数的返回值      Transitions.add(vIEw.Transition(_type,context));    // 对存储不透明度转换的列表进行排序    Transitions.sort((FadeTransition a,FadeTransition b) {      final Animation<double> aAnimation = a.Listenable;      final Animation<double> bAnimation = b.Listenable;      // aValue：a的动画值      double aValue = aAnimation.value;      // bValue：b的动画值      double bValue = bAnimation.value;      /* * 将aValue与bValue进行比较 * 返回一个负整数，aValue排序在bValue之前 * 返回一个正整数，aValue排序在bValue之后 */      return aValue.compareto(bValue);    });    // 返回值，创建层叠布局控件    return new Stack(children: Transitions);  }  // 覆盖此函数以构建依赖于动画的当前状态的控件  @overrIDe  Widget build(BuildContext context) {    // 局部变量，创建底部导航栏    final BottomNavigationbar botNavbar = new BottomNavigationbar(      /* * 在底部导航栏中布置的交互项：迭代存储NavigationIconVIEw类的列表 * 返回此迭代的每个元素的底部导航栏项目 * 创建包含此迭代的元素的列表 */      items: _navigationVIEws        .map((NavigationIconVIEw navigationVIEw) => navigationVIEw.item)        .toList(),// 当前活动项的索引：存储底部导航栏的当前选择      currentIndex: _currentIndex,// 底部导航栏的布局和行为：存储底部导航栏的布局和行为      type: _type,// 当点击项目时调用的回调      onTap: (int index) {        // 通知框架此对象的内部状态已更改        setState((){          // 当前选择的底部导航栏项目，开始反向运行此动画          _navigationVIEws[_currentIndex].controller.reverse();          // 更新存储底部导航栏的当前选择          _currentIndex = index;          // 当前选择的底部导航栏项目，开始向前运行此动画          _navigationVIEws[_currentIndex].controller.forward();        });      }    );    // 实现基本的质感设计视觉布局结构    return new Scaffold(      // 质感设计应用栏      appbar: new Appbar(        // 应用栏中显示的主要控件，包含程序当前内容描述的文本        Title: new Text('底部导航演示'),// 在标题控件后显示的控件        actions: <Widget> [          // 创建一个显示d出式菜单的按钮          new PopupMenubutton<BottomNavigationbarType>(            // 当用户从此按钮创建的d出菜单中选择一个值时调用            onSelected: (BottomNavigationbarType value) {              // 通知框架此对象的内部状态已更改              setState((){                // 存储底部导航栏的布局和行为：选择值                _type = value;              });            },// 点击d出菜单中显示的项目时调用            itemBuilder: (BuildContext context) => <PopupMenuItem<BottomNavigationbarType>> [              /* * d出菜单中的显示项目 * 返回值：底部导航栏的布局和行为 * 子控件：文本控件 */              new PopupMenuItem<BottomNavigationbarType>(                value: BottomNavigationbarType.fixed,child: new Text('Fixed')              ),new PopupMenuItem<BottomNavigationbarType>(                value: BottomNavigationbarType.shifting,child: new Text('Shifting')              )            ]          )        ]      ),// 主要内容      body: new Center(        // 主要内容：_buildTransitionsstack函数的返回值        child: _buildTransitionsstack()      ),// 水平的按钮数组，沿着程序的底部显示      bottomNavigationbar: botNavbar,);  }}// 程序入口voID main() {  // 创建质感设计程序，并放置到主屏幕  runApp(new MaterialApp(    // 在窗口管理器中使用此应用程序的单行描述    Title: 'Flutter教程',// 程序的默认路由的控件    home: new MenusDemo(),));}

总结

以上是内存溢出为你收集整理的Flutter进阶—质感设计之底部导航全部内容，希望文章能够帮你解决Flutter进阶—质感设计之底部导航所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。