ThemeData 的 accent 属性已经被弃用

概述

Summary

主题信息 ThemeData 中的 accentColoraccentColorBrightnessaccentIconThemeaccentTextTheme 属性现已被弃用。

The ThemeData accentColor, accentColorBrightness, accentIconTheme and accentTextTheme properties have been deprecated.

Material 设计规范 不再为 Material 组件指定或使用「强调」色。组件的默认颜色来自整个主题的 颜色方案。现在通常使用 ColorSchemesecondary color 代替 accentColor,并且在需要对比色时使用 onSecondary 属性

The Material Design spec no longer specifies or uses an “accent” color for the Material components. The default values for component colors are derived from the overall theme’s color scheme. The ColorScheme’s secondary color is now typically used instead of accentColor and the onSecondary color is used when a contrasting color is needed.

上下文

Context

这是 Material 主题系统升级 项目的一部分。

This was a small part of the Material Theme System Updates project.

从 Flutter 1.17 开始,Material 库不再使用 ThemeData 的强调属性 - accentColoraccentColorBrightnessaccentIconThemeaccentTextTheme。它们已被主题的 colorSchemetextTheme 属性的依赖关系所取代。这是 material 组件的默认配置完全依赖这两个属性的长期目标中的一部分,

As of Flutter 1.17, the ThemeData accent properties - accentColor, accentColorBrightness, accentIconTheme, and accentTextTheme - were no longer used by the Material library. They had been replaced by dependencies on the theme’s colorScheme and textTheme properties as part of the long-term goal of making the default configurations of the material components depend almost exclusively on these two properties.

改动的出发点是使主题系统更易于理解和使用。所有组件的默认颜色由组件本身根据颜色方案定义。特定组件类型的默认配置可以使用特定组件的主题来覆盖,例如 FloatingActionButtonThemeDataCheckBoxTheme。以前,像 accentColor 这样的属性仅在某些情况下被少数组件类型使用,这使得很难理解覆盖它们的含义。

The motivation for these changes is to make the theme system easier to understand and use. The default colors for all components are to be defined by the components themselves and based on the color scheme. The defaults for specific component types can be overridden with component-specific themes like FloatingActionButtonThemeData or CheckBoxTheme. Previously, properties like accentColor were used by a handful of component types and only in some situations, which made it difficult to understand the implications of overriding them.

更改描述

Description of change

主题信息 ThemeData 中的 accentColoraccentColorBrightnessaccentIconThemeaccentTextTheme 属性现已被弃用,因为 Material 不再使用它们。

The ThemeData accentColor, accentColorBrightness, accentIconTheme and accentTextTheme properties have been deprecated because the Material library no longer uses them.

迁移指南

Migration guide

应用程序主题

Application theme

ThemeData 不再需要指定 accentColor、accentColorBrightness、 accentIconTheme 或 accentTextTheme 属性。

ThemeData values no longer need to specify accentColor, accentColorBrightness, accentIconTheme, or accentTextTheme.

要以与以前大致相同的方式配置 material 组件的样式,请指定配色方案的次要颜色,而不是 accentColor

To configure the appearance of the material components in about the same way as before, specify the color scheme’s secondary color instead of accentColor.

迁移前的代码:

Code before migration:

MaterialApp(
  theme: ThemeData(accentColor: myColor),
  // ...
);

迁移后的代码:

Code after migration:

final ThemeData theme = ThemeData();
MaterialApp(
  theme: theme.copyWith(
    colorScheme: theme.colorScheme.copyWith(secondary: myColor),
  ),
  //...
)

accentColor

最接近 ColorScheme 的颜色是 ColorScheme.secondary。为了跟上最新的 Material 设计指南,可以用 ColorScheme.primary 代替。如果需要对比色,使用 ColorScheme.onSecondary

The closest backwards compatible ColorScheme color is ColorScheme.secondary. To hew most closely to the latest Material Design guidelines one can substitute ColorScheme.primary instead. If a contrasting color is needed then use ColorScheme.onSecondary.

自定义组件中查找主题的 accentColor 属性可以改为查找 ColorScheme.secondary

Custom components that used to look up the theme’s accentColor, can look up the ColorScheme.secondary instead.

迁移前的代码:

Code before migration:

Color myColor = Theme.of(context).accentColor;

迁移后的代码:

Code after migration:

Color myColor = Theme.of(context).colorScheme.secondary;

accentColorBrightness

静态方法 ThemeData.estimateBrightnessForColor() 可用于计算任何颜色的亮度。

The static ThemeData.estimateBrightnessForColor() method can be used to compute the brightness of any color.

accentTextTheme

此属性在深色主题中代表白色的 TextStyle,黑色主题中代表浅色的 TextStyles。大多数情况下,可以使用 textTheme。一个常见的用法是引用 accentTextTheme 中的 TextStyle,因为文本样式的颜色要与强调颜色(现在是 ColorScheme.secondaryColor)形成鲜明的对比。现在要获得相同的结果,请将文本样式的颜色指定为 ColorScheme.secondaryColor

This was white TextStyles for dark themes, black TextStyles for light themes. In most cases textTheme can be used instead. A common idiom was to refer to one TextStyle from accentTextTheme, since the text style’s color was guaranteed to contrast well with the accent color (now ColorScheme.secondaryColor). To get the same result now, specify the text style’s color as ColorScheme.onSecondary:

迁移前的代码:

Code before migration:

TextStyle style = Theme.of(context).accentTextTheme.headline1;

迁移后的代码:

Code after migration:

final ThemeData theme = Theme.of(context);
TextStyle style = theme.textTheme.headline1.copyWith(
  color: theme.colorScheme.onSecondary,
)

accentIconTheme

此属性仅用于配置 FloatingActionButton 中图标的颜色。现在可以直接使用 FloatingActionButtonThemeData 配置图标颜色。参阅 FloatingActionButton 和 ThemeData 的强调属性

This property had only been used to configure the color of icons within a FloatingActionButton. It’s now possible to configure the icon color directly or with the FloatingActionButtonThemeData. See FloatingActionButton and ThemeData’s accent properties.

时间轴

Timeline

发布于版本:2.3.0-0.1.pre
发布于稳定版本:2.5

Landed in version: 2.3.0-0.1.pre
In stable release: 2.5

参考文献

References

API 文档:

API documentation:

相关 issues:

Relevant issues:

相关 PR:

Relevant PRs:

其他:

Other: