内容

更新菜单的默认文本样式

内容

摘要
上下文
变更描述
迁移指南
时间线
参考

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

迁移前代码

dartMenuItemButton(
  child: Text(MenuEntry.about.label),
  onPressed: () => _activate(MenuEntry.about),
),

dartmenuButtonTheme: MenuButtonThemeData(
  style: MenuItemButton.styleFrom(
    /// ...
  ),
),

迁移后代码

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

dartmenuButtonTheme: MenuButtonThemeData(
  style: MenuItemButton.styleFrom(
    textStyle: Theme.of(context).textTheme.bodyLarge,
  ),
),

Material 3 的DropdownMenu的TextField使用TextTheme.bodyLarge作为默认文本样式。要使用以前的默认文本样式，请在DropdownMenu.textStyle或DropdownMenuThemeData.textStyle属性中设置TextTheme.labelLarge文本样式。

迁移前代码

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

dartdropdownMenuTheme: DropdownMenuThemeData(
  /// ...
),

迁移后代码

dartDropdownMenu<ColorLabel>(
  textStyle: Theme.of(context).textTheme.labelLarge,
  initialSelection: ColorLabel.green,
  controller: colorController,
  label: const Text('Color'),
  dropdownMenuEntries: colorEntries,
  onSelected: (ColorLabel? color) {
    setState(() {
      selectedColor = color;
    });
  },
),

dartdropdownMenuTheme: DropdownMenuThemeData(
  textStyle: TextStyle(
    fontStyle: FontStyle.italic,
    fontWeight: FontWeight.bold,
  ),
),

Material 3 的DropdownMenu的DropdownMenuEntry使用TextTheme.labelLarge作为默认文本样式。要使用以前的默认文本样式，请在DropdownMenuEntry.style或MenuButtonThemeData.style属性中设置TextTheme.bodyLarge文本样式。

迁移前代码

dartDropdownMenuEntry<ColorLabel>(
  value: color,
  label: color.label,
),

dartmenuButtonTheme: MenuButtonThemeData(
  style: MenuItemButton.styleFrom(
    /// ...
  ),
),

迁移后代码

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

dartmenuButtonTheme: MenuButtonThemeData(
  style: MenuItemButton.styleFrom(
    textStyle: Theme.of(context).textTheme.bodyLarge,
  ),
),

包含于版本：3.14.0-11.0.pre
稳定版发布：3.16

API 文档

摘要

上下文

变更描述

迁移指南

时间线

参考