FloatingActionButton 和 ThemeData 的 accent 屬性

移除 Flutter 的 FloatingActionButton (FAB) 對 ThemeData accent 屬性的依賴。

這是Material Theme System Updates專案的一小部分。

先前，ThemeData 的 accentIconTheme 屬性僅被 FloatingActionButton 用於決定按鈕內顯示的文字或圖示的預設顏色。

FloatingActionButton 也使用了 ThemeData accentTextTheme 屬性，但此依賴關係沒有文件記錄且是不必要的。

這兩種依賴關係都令人困惑。例如，如果將 Theme 的 accentIconTheme 設定為變更所有浮動操作按鈕的外觀，則很難知道哪些其他元件會受影響，或未來可能會受影響。

Material Design 規範不再包含「accent」顏色。現在改用 ColorScheme 的輔助顏色。

先前，應用程式可以使用 widget 的 foregroundColor 屬性，或使用 FloatingActionButtonTheme 的 foregroundColor，來設定 FloatingActionButtons 內文字和圖示的顏色。如果沒有指定 foregroundColor 屬性，則前景顏色預設為 accentIconTheme 的顏色。

經過此變更，預設行為會改用配色方案的 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。

此變更分兩個步驟進行

1. 如果將 FloatingActionButton 的前景設定為非預設顏色，則現在會列印警告。
2. 已移除 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

設計文件

• 移除 FAB Accent Theme 依賴關係

API 文件

• FloatingActionButton
• ThemeData
• FloatingActionButtonThemeData

相關的 PR

• 第 1/2 步 警告 Flutter 的 FloatingActionButton 對 ThemeData accent 屬性的依賴關係
• 第 2/2 步 移除 Flutter 的 FloatingActionButton 對 ThemeData accent 屬性的依賴關係

其他

• Material Theme System 更新

除非另有說明，否則此網站上的文件反映了 Flutter 的最新穩定版本。頁面上次更新時間為 2024-04-04。 檢視原始碼 或 回報問題。