大佬教程收集整理的这篇文章主要介绍了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(
// 动画持续的@L_616_18@:默认情况下主题更改动画的持续时间
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 @H_958_18@menusDemo extends StatefulWidget {
/* * 覆盖具有相同名称的超类成员 * createState方法在树中的给定位置为此控件创建可变状态 * 子类应重写此方法以返回其关联的State子类新创建的实例 */
@override
_MenusDemoState createState() => new _MenusDemoState();
}
/* * 关联State子类的实例 * 继承State:StatefulWidget(有状态的控件)逻辑和内部状态 * 继承TickerProviderStatemixin,提供Ticker对象 */
class _MenusDemoState extends State<@H_958_18@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> [
// 创建一个显示弹出式菜单的按钮
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进阶—质感设计之底部导航所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。