跳至主要內容
目錄

更新選單的預設文字樣式

目錄

摘要

#

選單使用的預設文字樣式已更新為符合 Material 3 規格。

背景

#

MenuItemButton (在 MenuBar 中使用的 Widget，以及使用 MenuAnchor 建立的選單) 和 DropdownMenuEntry (在 DropdownMenu 中) 的預設文字樣式已更新為符合 Material 3 規格。

同樣地，DropdownMenu 的 TextField 的預設文字樣式已更新為符合 Material 3 規格。

變更描述

#

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

DropdownMenu 的 TextField 的預設文字樣式，已從 Material 3 的 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。 檢視原始碼 或 回報問題。