更新選單的預設文字樣式
摘要
#選單所使用的預設文字樣式已更新,以符合 Material 3 規範。
背景
#MenuItemButton(用於MenuBar以及由MenuAnchor建立的選單中的元件(Widget))與DropdownMenuEntry(在DropdownMenu中)所使用的預設文字樣式,已更新為符合 Material 3 規範。
同樣地,DropdownMenu的TextField預設文字樣式也已更新,以符合 Material 3 規範。
變更說明
#MenuItemButton(用於MenuBar以及由MenuAnchor建立的選單中的元件(Widget))與DropdownMenuEntry(在DropdownMenu中)所使用的預設文字樣式,從TextTheme.bodyLarge更新為 Material 3 的TextTheme.labelLarge。
DropdownMenu的TextField預設文字樣式,從TextTheme.labelLarge更新為 Material 3 的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,
),
),DropdownMenu 的 TextField 在 Material 3 中
預設會使用 TextTheme.bodyLarge 作為文字樣式(text style)。
若要使用先前的預設文字樣式,
請在 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,
),
),DropdownMenu 的 DropdownMenuEntry 在 Material 3 中
預設會使用 TextTheme.labelLarge 作為文字樣式(text style)。
若要使用先前的預設文字樣式,請在
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 文件:
MenuBarMenuAnchorMenuItemButtonMenuButtonThemeDropdownMenuDropdownMenuEntryDropdownMenuThemeTextTheme
相關 PR: