概述

#

LinearProgressIndicatorCircularProgressIndicator 已更新,以符合 Material 3 设计规范。

LinearProgressIndicator 的变化包括活动轨迹和非活动轨迹之间的间隙、一个停止指示器和圆角。CircularProgressIndicator 的变化包括活动轨迹和非活动轨迹之间的间隙,以及圆角笔划帽。

背景

#

LinearProgressIndicatorCircularProgressIndicator 的 Material 3 设计规范已于 2023 年 12 月更新。

要选择采用 2024 年设计规范,请将 LinearProgressIndicator.year2023CircularProgressIndicator.year2023 标志设置为 false。这样做是为了确保现有应用不受更新设计规范的影响。

变更说明

#

LinearProgressIndicatorCircularProgressIndicator 小部件都带有一个 year2023 标志,可以将其设置为 false 以选择采用更新的设计规范。year2023 标志的默认值为 true,这意味着进度指示器使用 2023 年设计规范。

LinearProgressIndicator.year2023 设置为 false 时,进度指示器在活动轨迹和非活动轨迹之间会有间隙、一个停止指示器和圆角。如果 LinearProgressIndicator 是不确定的,则不显示停止指示器。

CircularProgressIndicator.year2023 设置为 false 时,进度指示器会有轨迹间隙和圆角笔划帽。

迁移指南

#

要选择采用 LinearProgressIndicator 的更新设计规范,请将 year2023 标志设置为 false

dart
LinearProgressIndicator(
  year2023: false,
  value: 0.5,
),

要更新整个应用以使用更新的 LinearProgressIndicator 设计,请在您的 MaterialApp 中将 ProgressIndicatorThemeData.year2023 属性设置为 false

dart
return MaterialApp(
  theme: ThemeData(progressIndicatorTheme: const ProgressIndicatorThemeData(year2023: false)),
        // ...
        LinearProgressIndicator(
          year2023: false,
          value: 0.5,
        ),
        // ...

要选择采用 CircularProgressIndicator 的更新设计规范,请将 year2023 标志设置为 false

dart
CircularProgressIndicator(
  year2023: false,
  value: 0.5,
),

要更新整个应用以使用更新的 CircularProgressIndicator 设计,请在您的 MaterialApp 中将 ProgressIndicatorThemeData.year2023 属性设置为 false

dart
return MaterialApp(
  theme: ThemeData(progressIndicatorTheme: const ProgressIndicatorThemeData(year2023: false)),
        // ...
        CircularProgressIndicator(
          year2023: false,
          value: 0.5,
        ),
        // ...

时间线

#

已在版本中发布: 3.28.0-0.1.pre
稳定版发布于: 3.29

参考资料

#

API 文档

相关问题

相关 PR