FloatingActionButton 和 ThemeData 的 accent 属性
概述
#移除了 Flutter 的 FloatingActionButton
(FAB) 对 ThemeData
accent 属性的依赖。
背景
#这是 Material 主题系统更新项目中的一小部分。
以前,ThemeData
的 accentIconTheme
属性仅被 FloatingActionButton
用于确定按钮内文本或图标的默认颜色。
FloatingActionButton
还使用了 ThemeData accentTextTheme
属性,但此依赖关系是未公开的且不必要的。
这两种依赖关系都令人困惑。例如,如果配置了 Theme
的 accentIconTheme
来更改所有浮动操作按钮的外观,则很难知道哪些其他组件会受到影响,或者将来可能会受到影响。
Material Design 规范 不再包含“accent”颜色。现在改用 ColorScheme
的 secondary color。
以前,应用程序可以使用 widget 的 foregroundColor
属性,或使用 FloatingActionButtonTheme
的 foregroundColor
来配置 FloatingActionButtons
中文本和图标的颜色。如果两者都没有指定 foregroundColor
属性,则前景色将默认为 accentIconTheme
的颜色。
通过此更改,默认行为改用 color scheme 的 onSecondary
颜色。
变更说明
#以前,accentIconTheme
为 FloatingActionButton
的 foregroundColor
属性提供了默认值。
final Color foregroundColor = this.foregroundColor
?? floatingActionButtonTheme.foregroundColor
?? theme.accentIconTheme.color // To be removed.
?? theme.colorScheme.onSecondary;
对于那些配置了主题的 accentIconTheme
来有效地配置所有浮动操作按钮的 foregroundColor
的应用程序,可以通过配置主题的 floatingActionButtonTheme
的 foregroundColor
来获得相同的效果。
FloatingActionButton
的 foregroundColor
现在用于配置 FloatingActionButton
创建的 RawMaterialButton
的 textStyle
。以前,此文本样式基于 ThemeData.accentTextTheme
的按钮样式。
// theme.accentTextTheme becomes theme.textTheme
final TextStyle textStyle = theme.accentTextTheme.button.copyWith(
color: foregroundColor,
letterSpacing: 1.2,
);
除非应用程序明确配置了 accentTextTheme
来利用此未公开的依赖关系,否则使用 accentTextTheme
是不必要的。此更改将此 accentTextTheme
的使用替换为 textTheme
。
迁移指南
#此更改分两步进行:
- 如果
FloatingActionButton
的前景色设置为非默认颜色,则现在会打印警告。 - 已移除
accentIconTheme
依赖。如果尚未完成,请按照以下模式迁移您的应用程序。
要为所有 FAB 配置 FloatingActionButton
的 foregroundColor
,您可以配置主题的 floatingActionButtonTheme
,而不是 accentIconTheme
。
迁移前的代码
MaterialApp(
theme: ThemeData(
accentIconTheme: IconThemeData(color: Colors.red),
),
)
迁移后的代码
MaterialApp(
theme: ThemeData(
floatingActionButtonTheme: FloatingActionButtonThemeData(
foregroundColor: Colors.red,
),
),
)
时间线
#发布版本: 1.16.3
稳定版本: 1.17
参考资料
#设计文档
API 文档
相关 PR
- 第 1 步(共 2 步) 警告 Flutter 的 FloatingActionButton 对 ThemeData accent 属性的依赖
- 第 2 步(共 2 步) 移除 Flutter 的 FloatingActionButton 对 ThemeData accent 属性的依赖
其他