更新了 Material 3 进度指示器
概述
#LinearProgressIndicator
和 CircularProgressIndicator
已更新,以符合 Material 3 设计规范。
LinearProgressIndicator
的变化包括活动轨迹和非活动轨迹之间的间隙、一个停止指示器和圆角。CircularProgressIndicator
的变化包括活动轨迹和非活动轨迹之间的间隙,以及圆角笔划帽。
背景
#LinearProgressIndicator
和 CircularProgressIndicator
的 Material 3 设计规范已于 2023 年 12 月更新。
要选择采用 2024 年设计规范,请将 LinearProgressIndicator.year2023
和 CircularProgressIndicator.year2023
标志设置为 false
。这样做是为了确保现有应用不受更新设计规范的影响。
变更说明
#LinearProgressIndicator
和 CircularProgressIndicator
小部件都带有一个 year2023
标志,可以将其设置为 false
以选择采用更新的设计规范。year2023
标志的默认值为 true
,这意味着进度指示器使用 2023 年设计规范。
当 LinearProgressIndicator.year2023
设置为 false
时,进度指示器在活动轨迹和非活动轨迹之间会有间隙、一个停止指示器和圆角。如果 LinearProgressIndicator
是不确定的,则不显示停止指示器。
当 CircularProgressIndicator.year2023
设置为 false
时,进度指示器会有轨迹间隙和圆角笔划帽。
迁移指南
#要选择采用 LinearProgressIndicator
的更新设计规范,请将 year2023
标志设置为 false
LinearProgressIndicator(
year2023: false,
value: 0.5,
),
要更新整个应用以使用更新的 LinearProgressIndicator
设计,请在您的 MaterialApp
中将 ProgressIndicatorThemeData.year2023
属性设置为 false
return MaterialApp(
theme: ThemeData(progressIndicatorTheme: const ProgressIndicatorThemeData(year2023: false)),
// ...
LinearProgressIndicator(
year2023: false,
value: 0.5,
),
// ...
要选择采用 CircularProgressIndicator
的更新设计规范,请将 year2023
标志设置为 false
CircularProgressIndicator(
year2023: false,
value: 0.5,
),
要更新整个应用以使用更新的 CircularProgressIndicator
设计,请在您的 MaterialApp
中将 ProgressIndicatorThemeData.year2023
属性设置为 false
return MaterialApp(
theme: ThemeData(progressIndicatorTheme: const ProgressIndicatorThemeData(year2023: false)),
// ...
CircularProgressIndicator(
year2023: false,
value: 0.5,
),
// ...
时间线
#已在版本中发布: 3.28.0-0.1.pre
稳定版发布于: 3.29
参考资料
#API 文档
LinearProgressIndicator
CircularProgressIndicator
LinearProgressIndicator.year2023
CircularProgressIndicator.year2023
相关问题
相关 PR