摘要

#

選單所使用的預設文字樣式已更新,以符合 Material 3 規範。

背景

#

MenuItemButton(用於MenuBar以及由MenuAnchor建立的選單中的元件(Widget))與DropdownMenuEntry(在DropdownMenu中)所使用的預設文字樣式,已更新為符合 Material 3 規範。

同樣地,DropdownMenuTextField預設文字樣式也已更新,以符合 Material 3 規範。

變更說明

#

MenuItemButton(用於MenuBar以及由MenuAnchor建立的選單中的元件(Widget))與DropdownMenuEntry(在DropdownMenu中)所使用的預設文字樣式,從TextTheme.bodyLarge更新為 Material 3 的TextTheme.labelLarge

DropdownMenuTextField預設文字樣式,從TextTheme.labelLarge更新為 Material 3 的TextTheme.bodyLarge

遷移指南

#

Material 3 的MenuItemButton會使用TextTheme.labelLarge作為預設文字樣式。
若要使用先前的預設文字樣式,請於MenuItemButton.styleMenuButtonThemeData.style屬性中設定TextTheme.bodyLarge文字樣式。

遷移前的程式碼:

dart
MenuItemButton(
  child: Text(MenuEntry.about.label),
  onPressed: () => _activate(MenuEntry.about),
),
dart
menuButtonTheme: MenuButtonThemeData(
  style: MenuItemButton.styleFrom(
    /// ...
  ),
),

遷移後的程式碼:

dart
MenuItemButton(
  style: MenuItemButton.styleFrom(
    textStyle: Theme.of(context).textTheme.bodyLarge,
  ),
  child: Text(MenuEntry.about.label),
  onPressed: () => _activate(MenuEntry.about),
),
dart
menuButtonTheme: MenuButtonThemeData(
  style: MenuItemButton.styleFrom(
    textStyle: Theme.of(context).textTheme.bodyLarge,
  ),
),

DropdownMenuTextField 在 Material 3 中
預設會使用 TextTheme.bodyLarge 作為文字樣式(text style)。
若要使用先前的預設文字樣式,
請在 DropdownMenu.textStyleDropdownMenuThemeData.textStyle 屬性中
設定 TextTheme.labelLarge 文字樣式。

遷移前的程式碼:

dart
DropdownMenu<ColorLabel>(
  initialSelection: ColorLabel.green,
  controller: colorController,
  label: const Text('Color'),
  dropdownMenuEntries: colorEntries,
  onSelected: (ColorLabel? color) {
    setState(() {
      selectedColor = color;
    });
  },
),
dart
dropdownMenuTheme: DropdownMenuThemeData(
  /// ...
),

遷移後的程式碼:

dart
DropdownMenu<ColorLabel>(
  textStyle: Theme.of(context).textTheme.labelLarge,
  initialSelection: ColorLabel.green,
  controller: colorController,
  label: const Text('Color'),
  dropdownMenuEntries: colorEntries,
  onSelected: (ColorLabel? color) {
    setState(() {
      selectedColor = color;
    });
  },
),
dart
dropdownMenuTheme: DropdownMenuThemeData(
  textStyle: TextStyle(
    fontStyle: FontStyle.italic,
    fontWeight: FontWeight.bold,
  ),
),

DropdownMenuDropdownMenuEntry 在 Material 3 中
預設會使用 TextTheme.labelLarge 作為文字樣式(text style)。
若要使用先前的預設文字樣式,請在
DropdownMenuEntry.styleMenuButtonThemeData.style 屬性中設定
TextTheme.bodyLarge 文字樣式。

遷移前的程式碼:

dart
DropdownMenuEntry<ColorLabel>(
  value: color,
  label: color.label,
),
dart
menuButtonTheme: MenuButtonThemeData(
  style: MenuItemButton.styleFrom(
    /// ...
  ),
),

遷移後的程式碼:

dart
DropdownMenuEntry<ColorLabel>(
  style: MenuItemButton.styleFrom(
    textStyle: Theme.of(context).textTheme.bodyLarge,
  ),
  value: color,
  label: color.label,
),
dart
menuButtonTheme: MenuButtonThemeData(
  style: MenuItemButton.styleFrom(
    textStyle: Theme.of(context).textTheme.bodyLarge,
  ),
),

時程

#

引入版本:3.14.0-11.0.pre

正式版本:3.16

參考資料

#

API 文件:

相關 PR: