如进入页面时请求网络加载数据,这里最好是在页面上显示一个加载中的小圆圈。 https://dartpad.dartlang.org/flutter?id
1 线性指示器LinearProgressIndicator LinearProgressIndicator是一个线性进度指示器 Widget,当 value为null时,进度条是一个线性的循环模式,表示正在加载;当 value 不为空时,可设置 0.0 到 1.0 之间的非空值,用来表示加载进度,如图4-1所示,基本使用代码如下: Widget buildLinearProgress() { //Container 来约束大小 return const SizedBox( width: 300, height: 10,//会覆盖 进度条的 minHeight child: LinearProgressIndicator( // value: 0.3, //进度高亮颜色 valueColor: AlwaysStoppedAnimation<Color>(Colors.blue), //总进度的颜色 backgroundColor: Color(0xff00ff00), //设置进度条的高度 minHeight: 10, ), ); }
2 圆形指示器 CircularProgressIndicator Material风格的圆形小圆圈,未设置指定值时,一直顺时针旋转,设置值后,可用来指定具体的进度,效果如下图所示,基本使用代码如下 Widget buildCircularProgress() { //通过Container或者SizeBox来限制大小 return const SizedBox( width: 55, height: 55, child: CircularProgressIndicator( // value: 0.3, //进度高亮颜色 valueColor: AlwaysStoppedAnimation<Color>(Colors.blue), //总进度的颜色 backgroundColor: Color(0xff00ff00), strokeWidth: 6.0, //圆圈的厚度 ), ); }
3 小菊花CupertinoActivityIndicator CupertinoActivityIndicator是一个顺时针旋转的iOS风格的活动指示器,效果如下图所示,基本使用代码如下: Widget buildCupertinoIndicator() { //通过Container或者SizeBox来限制大小 return const SizedBox( width: 85, height: 85, child: CupertinoActivityIndicator( radius: 30, //半径 color: Colors.red,//颜色 animating: true,//是否转动 默认为 true 开启转动 ), ); }
CupertinoActivityIndicator 需要结合 CupertinoApp 与 CupertinoPageScaffold 来实现使用。
|