flutter的CircularProgressIndicator基本使用

CircularProgressIndicator

循环进度指示器视图

定义及作用

  • 循环进度指示器视图。
  • 在页面绘制一个循环进度指示器视图。

参数

复制代码
const CircularProgressIndicator({
    super.key,
    super.value,
    super.backgroundColor,
    super.color,
    super.valueColor,
    this.strokeWidth = 4.0,//条的宽度
    super.semanticsLabel,//描述CircularProgressIndicator的预期用途
    super.semanticsValue,//为屏幕阅读器提供有关当前进度的信息,给盲人用的,比如设置0.3这个进度时,就会为盲人读30%
})

代码示例

无限循环指示器

复制代码
CircularProgressIndicator(
    backgroundColor: Colors.blue,
    valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)

能显示进度的指示器

  • 设置了value就会让指示器固定到对应比例的长度
    • 可以用于下载时显示进度,更新value的值并且setstate重绘制即可

      CircularProgressIndicator(
      value: 0.3,
      backgroundColor: Colors.blue,
      valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
      )

相关推荐
程序员老刘13 小时前
2025年Flutter状态管理新趋势:AI友好度成为技术选型第一标准
flutter·ai编程·客户端
AGG_Chan17 小时前
flutter专栏--深入了解widget原理
开发语言·javascript·flutter
墨客希19 小时前
通俗易懂的理解Vue.js
vue.js·flutter
—Qeyser20 小时前
Flutter bottomNavigationBar 底部导航栏
flutter
ZFJ_张福杰20 小时前
【Flutter】APP的数据安全(基于Flutter 交易所APP的总结)
flutter·web3·区块链·app·交易所
Bryce李小白4 天前
Flutter 自定义 View 权威指引
flutter
恋猫de小郭4 天前
Fluttercon EU 2025 :Let‘s go far with Flutter
android·开发语言·flutter·ios·golang
SoaringHeart5 天前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
许泽宇的技术分享6 天前
Flutter + Ollama:开启本地AI的全平台新纪元 —— 从零剖析一款现代化AI客户端的技术奥秘
人工智能·flutter