当前位置: 首页 > 编程笔记 >

Flutter质感设计之底部导航

蓟浩旷
2023-03-14
本文向大家介绍Flutter质感设计之底部导航,包括了Flutter质感设计之底部导航的使用技巧和注意事项,需要的朋友参考一下

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创建一个容器控件,作为一个自定义的图标使用。同时使用质感设计的弹出菜单控件切换底部导航栏的行为和样式。

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],
    vsync: this,
   ),
   new NavigationIconView(
    icon: new Icon(Icons.cloud),
    title: new Text('人物'),
    color: Colors.teal[500],
    vsync: this,
   ),
   new NavigationIconView(
    icon: new Icon(Icons.favorite),
    title: new Text('财产'),
    color: Colors.indigo[500],
    vsync: this,
   ),
   new NavigationIconView(
    icon: new Icon(Icons.event_available),
    title: new Text('设置'),
    color: Colors.pink[500],
    vsync: this,
   ),
  ];
  // 循环调用存储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> [
     // 创建一个显示弹出式菜单的按钮
     new PopupMenuButton<BottomNavigationBarType>(
      // 当用户从此按钮创建的弹出菜单中选择一个值时调用
      onSelected: (BottomNavigationBarType value) {
       // 通知框架此对象的内部状态已更改
       setState((){
        // 存储底部导航栏的布局和行为:选择值
        _type = value;
       });
      },
      // 点击弹出菜单中显示的项目时调用
      itemBuilder: (BuildContext context) => <PopupMenuItem<BottomNavigationBarType>> [
       /*
        * 弹出菜单中的显示项目
        * 返回值:底部导航栏的布局和行为
        * 子控件:文本控件
        */
       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质感设计之模态底部面板的使用技巧和注意事项,需要的朋友参考一下 模态底部面板是菜单或对话框的替代方案,可防止用户与其他控件进行互动,可以使用showModalBottomSheet函数创建和显示模态底部面板。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Flutter质感设计之持久底部面板,包括了Flutter质感设计之持久底部面板的使用技巧和注意事项,需要的朋友参考一下 持久性底部面板可以用于补充应用主要内容的信息,即使用户与应用程序的其他控件进行互动,也仍然可以看到持久的底部面板。可以使用Scaffold.showBottomSheet函数创建和显示持久性底部面板。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多

  • 本文向大家介绍Flutter质感设计之弹出菜单,包括了Flutter质感设计之弹出菜单的使用技巧和注意事项,需要的朋友参考一下 PopupMenuButton控件即弹出菜单控件,点击控件会出现菜单。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Flutter质感设计之表单输入,包括了Flutter质感设计之表单输入的使用技巧和注意事项,需要的朋友参考一下 FormField控件是单一表单字段,这个控件维护表单字段的当前状态,以便更新和验证错误能在UI中可见。TextField控件就是在FormField中包装了一个Input控件(后面的文章讲解),FormField维护输入的当前值,使您不需要自己管理它,更容易一次保存,重

  • 本文向大家介绍Flutter进阶质感设计之标签栏,包括了Flutter进阶质感设计之标签栏的使用技巧和注意事项,需要的朋友参考一下 在质感设计的控件中,有一个显示水平的一行选项卡,通常作为AppBar控件的一部分创建,并与TabBarView控件结合使用。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Flutter实现底部导航,包括了Flutter实现底部导航的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Flutter实现底部导航的具体代码,供大家参考,具体内容如下 BottomNavigationBar使用 底部导航栏 主文件 main.dart (注意导入文件路径) 底部包含三个导航按钮,分别对应三个界面: firstPage.dart secondPage.