概述

#

菜单中使用的默认文本样式已更新,以符合 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