菜单默认文本样式更新
概述
#菜单中使用的默认文本样式已更新,以符合 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` 文本样式。
迁移前的代码
MenuItemButton(
child: Text(MenuEntry.about.label),
onPressed: () => _activate(MenuEntry.about),
),
menuButtonTheme: MenuButtonThemeData(
style: MenuItemButton.styleFrom(
/// ...
),
),
迁移后的代码
MenuItemButton(
style: MenuItemButton.styleFrom(
textStyle: Theme.of(context).textTheme.bodyLarge,
),
child: Text(MenuEntry.about.label),
onPressed: () => _activate(MenuEntry.about),
),
menuButtonTheme: MenuButtonThemeData(
style: MenuItemButton.styleFrom(
textStyle: Theme.of(context).textTheme.bodyLarge,
),
),
Material 3 的 `DropdownMenu` 的 `TextField` 使用 `TextTheme.bodyLarge` 作为默认文本样式。要使用先前的默认文本样式,请在 `DropdownMenu.textStyle` 或 `DropdownMenuThemeData.textStyle` 属性中设置 `TextTheme.labelLarge` 文本样式。
迁移前的代码
DropdownMenu<ColorLabel>(
initialSelection: ColorLabel.green,
controller: colorController,
label: const Text('Color'),
dropdownMenuEntries: colorEntries,
onSelected: (ColorLabel? color) {
setState(() {
selectedColor = color;
});
},
),
dropdownMenuTheme: DropdownMenuThemeData(
/// ...
),
迁移后的代码
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;
});
},
),
dropdownMenuTheme: DropdownMenuThemeData(
textStyle: TextStyle(
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
),
),
Material 3 的 `DropdownMenu` 的 `DropdownMenuEntry` 使用 `TextTheme.labelLarge` 作为默认文本样式。要使用先前的默认文本样式,请在 `DropdownMenuEntry.style` 或 `MenuButtonThemeData.style` 属性中设置 `TextTheme.bodyLarge` 文本样式。
迁移前的代码
DropdownMenuEntry<ColorLabel>(
value: color,
label: color.label,
),
menuButtonTheme: MenuButtonThemeData(
style: MenuItemButton.styleFrom(
/// ...
),
),
迁移后的代码
DropdownMenuEntry<ColorLabel>(
style: MenuItemButton.styleFrom(
textStyle: Theme.of(context).textTheme.bodyLarge,
),
value: color,
label: color.label,
),
menuButtonTheme: MenuButtonThemeData(
style: MenuItemButton.styleFrom(
textStyle: Theme.of(context).textTheme.bodyLarge,
),
),
时间线
#发布版本:3.14.0-11.0.pre
稳定版本:3.16
参考资料
#API 文档
MenuBar
MenuAnchor
MenuItemButton
MenuButtonTheme
DropdownMenu
DropdownMenuEntry
DropdownMenuTheme
TextTheme
相关 PR