菜单的默认文本样式已更新
概述
#菜单使用的默认文本样式已更新,以匹配 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