跳到主內容

概述

#

選單使用的預設文字樣式已更新，以匹配 Material 3 規範。

背景

#

MenuItemButton（在 MenuBar 中使用，以及在用 MenuAnchor 建立的選單中使用）和 DropdownMenuEntry（在 DropdownMenu 中使用）的預設文字樣式已更新，以匹配 Material 3 規範。

同樣，DropdownMenu 的 TextField 的預設文字樣式也已更新，以匹配 Material 3 規範。

變更說明

#

對於 Material 3，MenuItemButton（在 MenuBar 中使用，以及在用 MenuAnchor 建立的選單中使用）和 DropdownMenuEntry（在 DropdownMenu 中使用）的預設文字樣式已從 TextTheme.bodyLarge 更新為 TextTheme.labelLarge。

對於 Material 3，DropdownMenu 的 TextField 的預設文字樣式已從 TextTheme.labelLarge 更新為 TextTheme.bodyLarge。

遷移指南

#

Material 3 的 MenuItemButton 使用 TextTheme.labelLarge 作為預設文字樣式。要使用之前的預設文字樣式，請在 MenuItemButton.style 或 MenuButtonThemeData.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,
  ),
),

Material 3 的 DropdownMenu 的 TextField 使用 TextTheme.bodyLarge 作為預設文字樣式。要使用之前的預設文字樣式，請在 DropdownMenu.textStyle 或 DropdownMenuThemeData.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,
  ),
),

Material 3 的 DropdownMenu 的 DropdownMenuEntry 使用 TextTheme.labelLarge 作為預設文字樣式。要使用之前的預設文字樣式，請在 DropdownMenuEntry.style 或 MenuButtonThemeData.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

除非另有說明，本網站的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-04-04。 檢視原始碼 或 報告問題。