如何实现各种类型的进度条

文章目录

  • 1 概念介绍
  • 2 使用方法
  • 3 示例代码

我们在上一章回中介绍了浮动按钮相关的内容,,本章回中将介绍进度条相关的Widget,闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1 概念介绍

进度条是常用的组件之一,它主要用来显示某种动作的完成进度。Flutter提供了多种进度条组件,常用的是水平进度条:LinearProgressIndicator;圆形进度条
:CircularProgressIndicator和RefreshProgressIndicator。接下来我们分析介绍它们的用法。

2 使用方法

和其它的Widget一样,进度条提供了相关的属性来控制自己,下面是常用的属性:

  • backgroundColor属性用来控制进度条背景颜色,就是进度条中全部进度的颜色;
  • valueColor属性用来控制进度条中当前进度的颜色;
  • value属性用来控制当前的进度值,取值范围为0-1之间的小数;
    我们刚才说的三种进度条:、, CircularProgressIndicator和RefreshProgressIndicator都包含这三种属性,这三种Widget
    只是显示进度的形状不同,在使用方法上完全相同。

3 示例代码

class _ExProgressWidgetState extends State<ExProgressWidget> {
  
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Example of Progress indicator"),
          backgroundColor: Colors.purpleAccent,
        ),
        body: Container(
          width: 500,
          height: 700,
          alignment: Alignment.center,
          // child: const LinearProgressIndicator(
          //   backgroundColor: Colors.blue,
          //   valueColor: AlwaysStoppedAnimation(Colors.purpleAccent),
          //   value: 0.5,
          // ),
          // child: const CircularProgressIndicator(
          //   strokeWidth: 9,
          //   backgroundColor: Colors.blue,
          //   valueColor: AlwaysStoppedAnimation(Colors.yellow),
          //   value: 0.3,
          // ),
          child: const RefreshProgressIndicator(
            backgroundColor: Colors.blue,
            valueColor: AlwaysStoppedAnimation(Colors.yellow),
            // value: 1.0,
          )
        )
    );
  }
}

在上面的代码中我们分别使用了刚才介绍的三种进度条,它们的使用方法完成相同,只是形状不同,详细如下:
LinearProgressIndicator表示一个水平的进度条,当前进度是50%,显示为紫色,所有进度是100%,显示为蓝色;
CircularProgressIndicator表示一个圆形的进度条,当前进度是30%,显示为黄色,所有进度是100%,显示为蓝色;
RefreshProgressIndicator表示圆形进度条,不过它是在一个圆形背景上显示圆形的箭头,箭头的长度表示进度,显示为白色,整个背景显示为蓝色;
这里只是文字性的描述,大家可以自己动手编译程序,这样可以看到真实的运行效果。我在这里就不演示程序运行效果了,不过有些注意点还是需要做一些说明:
当前进度的颜色属性值是一个动画对象:AlwaysStoppedAnimation(),不是颜色对象,我们在后面介绍动画时再详细介绍。当前进度值是0-1之间的小数,
用来表示当前的进度,我们可以动态地修改该属性值,进而实现进度不断变化的效果。如果没有给该属性赋值,那么它会一起不停地显示进度变化过程。
看官们,关于进度条Widget相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/958374.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

复位信号的同步与释放(同步复位、异步复位、异步复位同步释放)

文章目录 背景前言一、复位信号的同步与释放1.1 同步复位1.1.1 综述1.1.2 优缺点 1.2 recovery time和removal time1.3 异步复位1.3.1 综述1.3.2 优缺点 1.4 同步复位 与 异步复位1.5 异步复位、同步释放1.5.1 总述1.5.2 机理1.5.3 复位网络 二、思考与补充2.1 复…

欢迎来到linux大陆!本次试炼地点——秩序“权限”圣殿

一篇关于权限的学习笔记~ 1、权限的概念2、权限管理2.1 角色的不同分类2.2 文件权限原理剖析2.2.1 熟悉指令2.2.2 普通用户只能更改自己的文件权限&#xff0c;但是sudo提权可以更改其他文件权限2.2.3 没有权限&#xff0c;系统拒绝访问2.2.4 权限匹配2.2.5 root用户不受任何限…

Spring 定时任务:@Scheduled 注解四大参数解析

本文主要介绍了在 Spring 框架中使用Scheduled注解实现定时任务的方法&#xff0c;重点讲解了fixedRate、fixedDelay、cron和initialDelay这四个参数的用法&#xff0c;并通过实例代码进行了详细说明。 1. fixedRate 参数 参数含义 fixedRate指定任务固定时间间隔执行。如设…

使用频谱仪:测量宽带信号的功率

marker默认只测一个频率点的功率&#xff0c;当测试宽带信号&#xff0c;如20MHz&#xff0c;不能直接使用marker来测量功率。 有2种方式&#xff1a; 宽带信号需要使用Measure-> channel power 来测量。 meas setup integ BW&#xff1a;500mhz Freq&#xff1a;中心频…

postman请求参数化

postman界面介绍 一、使用环境变量(Environment Variables)进行参数化 1、在请求中使用环境变量 在请求的url、请求头(Headers)、请求体(Body)等部分都可以使用环境变量。 URL 部分示例 点击 Postman 界面右上角的 “眼睛” 图标(Environment Quick Look)打开环境管理…

优选算法——哈希表

目录 1. 哈希表简介 2. 两数之和 3. 判定是否为字符重排 4. 存在重复元素 5. 字母异位词分组 1. 哈希表简介 2. 两数之和 题目链接&#xff1a;1. 两数之和 - 力扣&#xff08;LeetCode&#xff09; 题目展示&#xff1a; 题目分析&#xff1a; 大家来看上面的图&…

【C语言学习】:C语言补充:转义字符,<<,>>操作符,IDE

&#x1f381;个人主页&#xff1a;我们的五年https://blog.csdn.net/djdjiejsn?typeblog &#x1f50d;系列专栏&#xff1a;C课程学习https://blog.csdn.net/djdjiejsn/category_12617142.html &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 C语言学…

Cesium特效——城市白模的科技动效的各种效果

最终效果图如下&#xff1a; 实现方法&#xff1a; 步骤一&#xff1a;使用cesiumlib生产白模&#xff0c;格式为3dtiles 注意事项&#xff1a;采用其他方式可能导致白模贴地&#xff0c;从而导致不能实现该效果&#xff0c;例如把步骤二的服务地址改为Cesium Sandcastle 里的…

仿 RabbitMQ 的消息队列3(实战项目)

七. 消息存储设计 上一篇博客已经将消息统计文件的读写代码实现了&#xff0c;下一步我们将实现创建队列文件和目录。 实现创建队列文件和目录 初始化 0\t0 这样的初始值. //创建队列对应的文件和目录&#xff1a;public void createQueueFile(String queueName) throws IO…

无人机 PX4 飞控 | PX4源码添加自定义参数方法并用QGC显示与调整

无人机 PX4 飞控 | PX4源码添加自定义参数方法并用QGC显示与调整 0 前言 之前文章添加了一个自定义的模块&#xff0c;本篇文章在之前的自定义模块中&#xff0c;添加两个自定义参数 使用QGC显示出来&#xff0c;并通过QGC调整参数值&#xff0c;代码实现参数更新 新增的参…

【真机调试】前端开发:移动端特殊手机型号有问题,如何在电脑上进行调试?

目录 前言一、怎么设置成开发者模式&#xff1f;二、真机调试基本步骤&#xff1f; &#x1f680;写在最后 前言 edge浏览器 edge://inspect/#devices 谷歌浏览器&#xff08;开tizi&#xff09; chrome://inspect 一、怎么设置成开发者模式&#xff1f; Android 设备 打开设…

2024年第十五届蓝桥杯青少组国赛(c++)真题—快速分解质因数

快速分解质因数 完整题目和在线测评可点击下方链接前往&#xff1a; 快速分解质因数_C_少儿编程题库学习中心-嗨信奥https://www.hixinao.com/tiku/cpp/show-3781.htmlhttps://www.hixinao.com/tiku/cpp/show-3781.html 若如其他赛事真题可自行前往题库中心查找&#xff0c;题…

Linux系统下速通stm32的clion开发环境配置

陆陆续续搞这个已经很久了。 因为自己新电脑是linux系统无法使用keil&#xff0c;一开始想使用vscode里的eide但感觉不太好用&#xff1b;后面想直接使用cudeide但又不想妥协&#xff0c;想趁着这个机会把linux上的其他单片机开发配置也搞明白&#xff1b;而且非常想搞懂cmake…

【FFmpeg】FLV 格式分析 ③ ( Tag Body 数据块体结构 - Vedio Data 视频数据 )

文章目录 一、Tag Body 数据块体结构 - Video Data 视频数据1、Vedio Data 视频数据 类型标识2、Vedio Data 视频数据 结构分析3、Composition Time Offset 字段涉及的时间计算4、AVC Packet Type 字段说明① AVC Sequence Header 类型② AVC NALU 类型③ AVC End of Sequence …

尚硅谷大数据数仓项目superset db upgrade报错解决(2025.1.23解决)

尚硅谷大数据数仓项目superset db upgrade报错解决&#xff08;2025.1.23解决&#xff09;和 superset安装MySQL报错解决 解决方法&#xff08;2025.1.23解决&#xff09; 0.卸载之前安装好的Superset -- 退出当前环境 conda deactivate-- 卸载Superset conda remove -n sup…

vue3+uniapp开发鸿蒙初体验

去年7月20号&#xff0c;uniapp官网就已经开始支持鸿蒙应用开发了&#xff0c;话不多说&#xff0c;按照现有规则进行配置实现一下鸿蒙开发效果&#xff1b; 本文基于macOS Monterey 版本 12.6.5实现 开发鸿蒙的前置准备 这里就直接说我的版本&#xff1a; DevEco Studio 5.…

996引擎 - 前期准备-配置开发环境

996引擎 - 前期准备 官网搭建服务端、客户端单机搭建 开发环境配置后端开发环境配置环境 前端开发环境配置环境 后端简介前端简介GUILayoutGUIExport 官网 996传奇引擎官网 所有资料从官网首页开始&#xff0c;多探索。 文档&#xff1a; 996M2-服务端Lua 996M2-客户端Lua 搭…

Python FastAPI 实战应用指南

文章目录 1. 前言2. FastAPI 的优势3. FastAPI 快速入门3.1 安装3.2 最简单的 API 案例 4. 基础功能应用4.1 模型验证和参数校验4.2 实现高级计划&#xff1a;用于实时功能和快速发布 5. 高级应用5.1 实现 OAuth2 认证5.2 提供 WebSocket 支持 6. 总结 1. 前言 FastAPI 是一个…

Vue3 项目打包并部署到Nginx

一、安装Nginx 官网下载链接&#xff1a; nginx: downloadhttps://nginx.org/en/download.htmlhttps://nginx.org/en/download.html 下载后解压并双击 nginx.exe 启动服务&#xff1a; 打开浏览器&#xff0c;访问 http://localhost/ &#xff0c;若出现如下页面&#xff0c…

二叉树(了解)c++

二叉树是一种特殊的树型结构&#xff0c;它的特点是: 每个结点至多只有2棵子树(即二叉树中不存在度大于2的结点) 并且二叉树的子树有左右之分&#xff0c;其次序不能任意颠倒&#xff0c;因此是一颗有序树 以A结点为例&#xff0c;左边的B是它的左孩子&#xff0c;右边的C是…