Flutter控件之CircularProgressIndicator

简介: Flutter控件之CircularProgressIndicator

CircularProgressIndicator的作用

Flutter中的CircularProgressIndicator是一个圆形进度指示器,用于表示正在进行的任务的进度。它通常用于长时间运行的任务,例如文件下载、网络请求等。CircularProgressIndicator可以在圆周上旋转,以表示正在进行的任务的进度,同时可以根据需要设置颜色、尺寸和线宽等属性。

CircularProgressIndicator的类型

CircularProgressIndicator有两种类型:确定进度和不确定进度。确定进度指示器用于表示已知的进度,例如文件下载的进度,而不确定进度指示器用于表示未知的进度,例如正在加载数据。根据不同的场景,我们可以选择不同类型的进度指示器。


CircularProgressIndicator常用属性

以下是CircularProgressIndicator的一些常用属性:


value: 进度值,0.0表示没有进度,1.0表示完成。

backgroundColor: 进度条的背景颜色。

valueColor: 进度条的颜色,可以使用AlwaysStoppedAnimation<Color>或ColorTween来指定动画效果。

strokeWidth: 进度条的线宽。

semanticsLabel: 用于屏幕阅读器的标签。

以下是一个简单的示例,演示如何在Flutter中使用CircularProgressIndicator:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

在上面的代码中,我们在Center小部件中添加了一个CircularProgressIndicator,并将其作为页面的主体,这将在屏幕中央显示一个圆形进度指示器。

效果如图:

d46c735182ac6ba7b8492b9a0afb3288.png


除了默认的CircularProgressIndicator之外,Flutter还提供了其他类型的进度指示器,例如线性进度指示器和扇形进度指示器,可以根据需要选择不同的类型来满足不同的需求。


其他用途

如下图使用CircularProgressIndicator实现的倒计时效果


cd650ac7096df0f02712868e761fd4db.png





相关文章
|
Android开发 iOS开发 容器
Flutter控件封装之轮播图Banner
Flutter中实现轮播图的方式有很多种,比如使用三方flutter_swiper,card_swiper等等,使用这些三方,可以很快很方便的实现一个轮播图展示,基本上也能满足我们日常的开发需求,如果说,想要一些定制化的操作,那么就不得不去更改源码或者自己自定义一个,自己定义的话,Flutter中提供了原生组件PageView,可以使用它很方便的来实现一个轮播图。
374 0
|
4月前
|
Android开发
Flutter控件的显示与隐藏
Flutter控件的显示与隐藏
156 3
|
4月前
|
开发者 监控 开发工具
如何将JSF应用送上云端?揭秘在Google Cloud Platform上部署JSF应用的神秘步骤
【8月更文挑战第31天】本文详细介绍如何在Google Cloud Platform (GCP) 上部署JavaServer Faces (JSF) 应用。首先,确保已准备好JSF应用并通过Maven构建WAR包。接着,使用Google Cloud SDK登录并配置GCP环境。然后,创建`app.yaml`文件以配置Google App Engine,并使用`gcloud app deploy`命令完成部署。最后,通过`gcloud app browse`访问应用,并利用GCP的监控和日志服务进行管理和故障排查。整个过程简单高效,帮助开发者轻松部署和管理JSF应用。
61 0
|
5月前
|
移动开发 UED 容器
Flutter-自定义可展开文本控件
Flutter-自定义可展开文本控件
90 0
|
5月前
Flutter-自定义三角形评分控件
Flutter-自定义三角形评分控件
49 0
|
7月前
Flutter StatefulWidget传递数据,多级控件传递数据
Flutter StatefulWidget传递数据,多级控件传递数据 在Flutter中,StatefulWidget可以通过构造函数将数据传递给其子控件,这种方式适用于一些简单的场景。但是,当存在多级嵌套控件时,将数据从祖先传递到后代可能会变得困难。在这种情况下,可以使用Flutter提供的InheritedWidget类来传递数据。
115 0
Flutter的ClipRRect控件介绍
ClipRRect(Rounded Rectangle Clip)是Flutter中的一个控件,用于将其子控件剪裁为圆角矩形形状。
|
API Android开发
Flutter控件封装之视频进度条
视频控制器,三方所提供的样式,有时很难满足我们的需求,对于此情况,我们不得不在此基础上自行封装,今天所分享的文章就是一个很简单的控制器封装案例,包含了基本的播放暂停,全屏和退出全屏,以及时间和进度的展示,封装了事件回调以及各个属性的控制,基本上可以满足大部分的业务需求,即便不满足,大家也可以在此基础之上拓展。
299 0
|
Android开发 UED
Flutter控件之Tab选项卡封装
Tab选项卡,这是一个非常常见且权重很高的一个组件,随便打开一个App,比如掘金,如下图,首页顶部就是一个Tab选项卡,这个功能可以说,几乎每个App都会存在。
233 0
|
存储 Android开发
Flutter控件之图片Image封装
Flutter中偏偏原生的控件,少了很多需要又常用的属性,比如宽高,比如内外边距,又比如点击事件,如果不采取封装,视图的结构会一层嵌套一层,徒增很多的冗余代码,所以,为了简洁代码,还有为了拓展原生组件没有的属性,就不得不进行一次简单的封装,使其在调用的时候,可以很方便的实现某些功能。
142 0