Flutter代码锦囊---魔改进度条
Flutter框架提供了Material Design风格的线性进度条(LinearProgressIndicator
)组件,就是下面的样子,方方正正的,一点也不圆润。
但是很多APP的设计都按照Material Design风格来玩的,各种各样的都有,我们选择最常见的一种来看一下,下面是“淘宝APP->淘抢购”页面里面的进度条,还是带动画的。
如果直接用线性进度条(LinearProgressIndicator
)组件去做,是没办法实现上面的进度条的。正常的话会遇到下面几个问题:
- 没有参数可以设置圆角
- 组件自带的动画效果是无限循环的
- 设置了
value
参数就没有动画效果 - 没有参数可以设置高度
- 没有参数可以设置中间的文本组件
但是上面的问题都可以被解决,下面就是具体的解决方案了。
设置圆角
为进度条设置圆角边框的方法就是圆角矩形剪裁(ClipRRect
)组件,用圆角矩形剪裁(ClipRRect
)组件把线性进度条(LinearProgressIndicator
)组件包装起来就可以了。
class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Flutter Demo 主页'),),// 圆角矩形剪裁(`ClipRRect`)组件,使用圆角矩形剪辑其子项的组件。body: ClipRRect(// 边界半径(`borderRadius`)属性,圆角的边界半径。borderRadius: BorderRadius.all(Radius.circular(10.0)),child: LinearProgressIndicator(value: 0.6,backgroundColor: Color(0xffFFE3E3),valueColor: AlwaysStoppedAnimation<Color>(Color(0xffFF4964)),),),);}
}
设置高度与宽度
为进度条添加高度与宽度限制的方法也不难,就是用大小框(SizedBox
)组件包装线性进度条(LinearProgressIndicator
)组件。
class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Flutter Demo 主页'),),body: SizedBox(height: 10.0,width: 98.0,// 圆角矩形剪裁(`ClipRRect`)组件,使用圆角矩形剪辑其子项的组件。child: ClipRRect(// 边界半径(`borderRadius`)属性,圆角的边界半径。borderRadius: BorderRadius.all(Radius.circular(10.0)),child: LinearProgressIndicator(value: 0.6,backgroundColor: Color(0xffFFE3E3),valueColor: AlwaysStoppedAnimation<Color>(Color(0xffFF4964)),),),),);}
}
设置内容文本
为进度条的里面配置描述文本,和上面一样,就是继续包装(PS:Flutter的布局方式真的是过度包装),用堆栈(Stack
)组件包装线性进度条(LinearProgressIndicator
)组件。
class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Flutter Demo 主页'),),body: Stack(children: <Widget>[SizedBox(height: 10.0,width: 98.0,// 圆角矩形剪裁(`ClipRRect`)组件,使用圆角矩形剪辑其子项的组件。child: ClipRRect(// 边界半径(`borderRadius`)属性,圆角的边界半径。borderRadius: BorderRadius.all(Radius.circular(10.0)),child: LinearProgressIndicator(value: 0.6,backgroundColor: Color(0xffFFE3E3),valueColor: AlwaysStoppedAnimation<Color>(Color(0xffFF4964)),),),),Container(height: 10.0,width: 98.0,padding: EdgeInsets.only(left: 7.0),alignment: Alignment.centerLeft,child: Text('已抢60%',style: TextStyle(color: Color(0xffFFFFFF),fontSize: 8.0,),),),],),);}
}
设置动画效果
要为进度条设置动画效果,就不得不提到动画控制器(AnimationController
)和补间(Tween
)组件,Flutter中的大部分动画效果都可以用它们实现。具体怎么使用它们,请参考下面的代码。
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {/// 当前的进度。double currentProgress = 0.6;// 动画相关控制器与补间。AnimationController animation;Tween<double> tween;@overridevoid initState() {// AnimationController({// double value,// Duration duration,// String debugLabel,// double lowerBound: 0.0,// double upperBound: 1.0,// TickerProvider vsync// })// 创建动画控制器animation = AnimationController(// 这个动画应该持续的时间长短。duration: const Duration(milliseconds: 900),vsync: this,// void addListener(// VoidCallback listener// )// 每次动画值更改时调用监听器// 可以使用removeListener删除监听器)..addListener(() {setState(() {});});// Tween({T begin, T end }):创建tween(补间)tween = Tween<double>(begin: 0.0,end: currentProgress,);// 开始向前运行这个动画(朝向最后)animation.forward();super.initState();}@overridevoid dispose() {animation.dispose();super.dispose();}@overrideWidget build(BuildContext context) {// TODO:构建页面的主要内容。}
}
在上面的代码中,我们已经设置好了动画与补间,下面就把线性进度条(LinearProgressIndicator
)组件中的value
属性值设置成动画控制。
// TODO:构建页面的主要内容。return Scaffold(appBar: AppBar(title: Text('Flutter Demo 主页'),),body: Stack(children: <Widget>[SizedBox(height: 10.0,width: 98.0,// 圆角矩形剪裁(`ClipRRect`)组件,使用圆角矩形剪辑其子项的组件。child: ClipRRect(// 边界半径(`borderRadius`)属性,圆角的边界半径。borderRadius: BorderRadius.all(Radius.circular(10.0)),child: LinearProgressIndicator(// Animation<T> animate(// Animation<double> parent// )// 返回一个由给定动画驱动的新动画,但它承担由该对象确定的值value: tween.animate(animation).value,backgroundColor: Color(0xffFFE3E3),valueColor: AlwaysStoppedAnimation<Color>(Color(0xffFF4964)),),),),Container(height: 10.0,width: 98.0,padding: EdgeInsets.only(left: 7.0),alignment: Alignment.centerLeft,child: Text('已抢${(currentProgress * 100).toInt()}%',style: TextStyle(color: Color(0xffFFFFFF),fontSize: 8.0,fontFamily: 'PingFangRegular',),),),],),);
这样进度条在构建时就会开始播放前进动画了。
Flutter代码锦囊---魔改进度条相关推荐
- 给Python代码加上酷炫进度条的几种姿势
作者 | 刘早起 来源 | 早起Python(ID: zaoqi-python) 大家好,在下载某些文件的时候你一定会不时盯着进度条,在写代码的时候使用进度条可以便捷的观察任务处理情况,除了使用pri ...
- android 下载进度条代码实现,Android 文件下载进度条的实现
Android 中很多地方都需要用到线程下载.下面我谢了个简单的下载图片的demo.望对你们有到帮助. 首先,配置权限, 在 AndroidManifest.xml里面的application节点下面 ...
- Flutter进阶—质感设计之进度条
LinearProgressIndicator控件是质感设计中的线性进度指示器. import 'package:flutter/material.dart'; class ActionViewEco ...
- 图片轮播php代码下载,jQuery带进度条滚动图片轮播代码
jQuery带进度条滚动图片轮播代码 jQuery带进度条滚动图片轮播代码是一款带左右箭头按钮控制图片滚动轮播,标题和进度条显示效果. $(document).ready(function(e) { ...
- android 下载进度条代码实现,Android文件下载进度条的实现代码
搜索热词 main.xml: android:orientation="vertical" android:layout_width="fill_parent" ...
- Flutter代码锦囊---自定义曲线裁剪
在实际开发中,很多APP里面都会有一些布局需要用到曲线,而不是直线,下面举两个例子,一个是京东APP的页面,一个是淘宝APP的页面,它们都用到了曲线. 在Flutter中可以怎么实现这个效果呢,有一个 ...
- Flutter代码锦囊---淘口令复制弹窗
对于淘系电商APP或其他类似的APP而言,获取剪贴板上的淘口令,再解析出具体的商品详情,是整个APP的核心业务操作,就像下面图片展示的这样. 下面我们就用Flutter实现这个功能,首先是前面一部分导 ...
- Flutter代码锦囊---摇一摇
现在很多APP里面的会出现让用户拿起手机摇一摇的场景,除了最常见的微信.QQ等社交APP里面的摇一摇,我们在把APP给测试人员测试的时候,也经常要添加上摇一摇弹窗切换环境的场景,比如下面的场景. 所以 ...
- Flutter代码锦囊---集中管理路由与导航
当一个Flutter项目的页面多来以后,页面跳来跳去的,开发者自己都会晕,所以需要用一个集中.灵活的方式去管理项目中所有页面的路由与导航. 通常我们是使用主页(home)属性设置应用程序的默认路由,即 ...
最新文章
- 12岁上中科大,17岁哈佛博士,31岁成哈佛教授,学神认识一下?
- 饱和气压与温度的关系_凯米斯小课堂 | 溶解氧与水产养殖的关系
- python获取maco句柄_python之subprocess模块
- MySQL:参数wait_timeout和interactive_timeout以及空闲超时的实现【转】
- 常用的 WEB 服务器
- 逻辑综合——概述与基本概念
- 解决网站请求速度慢的一些方法
- mysql 时间 1_(转)mysql日期时间函数1
- linux强制用户改密码,如何在Linux中强制用户在下次登录时更改密码?
- SAP License:对煤化工行业的几点思考
- Swoole 结合TP5创建http服务
- 【老生谈算法】matlab实现演化博弈算法源码——演化博弈
- 小区广播机制(MIB、SIB)
- java excel 取消科学计数法_java使用poi解析或处理excel的时候,如何防止数字变成科学计数法的形式...
- Dominant Indices
- 供应链金融与区块链的关系
- macbookair有没有touchbar_高配MacBook Air和低配MacBook Pro选哪个?
- echarts饼图默认中间显示总数
- 解决you-get下载速度慢 B站 bilibili
- idea 汉化版 自定义类注释与方法注释 解决自定义注解出现红线