跳至主要內容
內容

為 Material 3 引入新的 ColorScheme 角色

內容

摘要

#

ColorScheme 中的新色彩角色包含七個基於色調的表面和容器，以及主要、次要和第三組的十二種強調色。此更新會棄用三個現有的色彩角色：background、onBackground 和 surfaceVariant。更新後的 ColorScheme.fromSeed 方法建構的 ColorScheme 現在會產生與先前版本不同的值，以適應 Material Design 3 指導原則。

背景

#

基於色調的表面顏色包括

  • surfaceBright
  • surfaceDim
  • surfaceContainer
  • surfaceContainerLow
  • surfaceContainerLowest
  • surfaceContainerHigh
  • surfaceContainerHighest

這些變更可協助消除使用 widget 的 surfaceTintColor，並取代基於不透明度的舊模型，該模型會根據表面高度在表面上應用有色覆蓋層。

所有 widget 的預設 surfaceTintColor 現在為 null，而其預設背景顏色現在基於新的基於色調的表面顏色。

ColorScheme.fromSeed 也已更新，以使用來自 Material color utilities 套件的最新演算法。此變更可防止建構的 ColorScheme 過於明亮，即使來源顏色看起來明亮且具有高彩度（包含少量黑色、白色和灰色陰影）。

遷移指南

#

更新後的 ColorScheme.fromSeed 和新的色彩角色所造成的差異應該很小且可以接受。但是，當為 ColorScheme.fromSeed 提供較亮的種子顏色時，它可能會建構出相對較暗的 ColorScheme 版本。若要強制輸出仍然明亮，請在 ColorScheme.fromSeed 中設定 dynamicSchemeVariant: DynamicSchemeVariant.fidelity。例如

遷移前的程式碼

dart
ColorScheme.fromSeed(
    seedColor: Color(0xFF0000FF), // Bright blue
)

遷移後的程式碼

dart
ColorScheme.fromSeed(
    seedColor: Color(0xFF0000FF), // Bright blue
    dynamicSchemeVariant: DynamicSchemeVariant.fidelity,
)

Material Design 3 移除了 3 種顏色。

若要設定 material 元件的外觀，應將 background 替換為 surface，將 onBackground 替換為 onSurface，並將 surfaceVariant 遷移到 surfaceContainerHighest。

遷移前的程式碼

dart
final ColorScheme colorScheme = ColorScheme();
MaterialApp(
  theme: ThemeData(
    //...
    colorScheme: colorScheme.copyWith(
      background: myColor1,
      onBackground: myColor2,
      surfaceVariant: myColor3,
    ),
  ),
  //...
)

遷移後的程式碼

dart
final ColorScheme colorScheme = ColorScheme();
MaterialApp(
  theme: ThemeData(
    //...
    colorScheme: colorScheme.copyWith(
      surface: myColor1,
      onSurface: myColor2,
      surfaceContainerHighest: myColor3,
    ),
  ),
  //...
)

過去使用 ColorScheme.background、ColorScheme.onBackground 和 ColorScheme.surfaceVariant 的自訂元件可以改為查詢 ColorScheme.surface、ColorScheme.onSurface 和 ColorScheme.surfaceContainerHighest。

遷移前的程式碼

dart
Color myColor1 = Theme.of(context).colorScheme.background;
Color myColor2 = Theme.of(context).colorScheme.onBackground;
Color myColor3 = Theme.of(context).colorScheme.surfaceVariant;

遷移後的程式碼

dart
Color myColor1 = Theme.of(context).colorScheme.surface;
Color myColor2 = Theme.of(context).colorScheme.onSurface;
Color myColor3 = Theme.of(context).colorScheme.surfaceContainerHighest;

時間軸

#

已在版本中發布：3.21.0-4.0.pre
在穩定版本中：3.22.0

參考資料

#

相關問題

相關 PR

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