主题化 Theming
定义视觉主题的配置。
page.theme
或page.dark_theme
属性可用于分别配置整个应用程序在浅色和深色主题模式下的外观。
如果您希望在主题的 font_family
中使用系统字体,请阅读这篇关于系统字体的说明。
- Python
page.theme = theme.Theme(color_scheme_seed="green")
page.update()
Theme
属性
Theme
类具有以下属性:
color_scheme_seed
一种种子颜色,用于算法派生其余的主题颜色。
color_scheme
ColorScheme
类的实例,允许自定义从 color_scheme_seed
派生的 Material 颜色方案。
text_theme
TextTheme
类的实例,用于自定义与卡片和画布颜色形成对比的文本样式。
primary_text_theme
描述与主颜色形成对比的文本主题的 TextTheme
类的实例。
scrollbar_theme
ScrollbarTheme
类的实例。
tabs_theme
TabsTheme
类的实例。
font_family
所有 UI 元素的基础字体。
use_material3
True
(默认)使用 Material 3 设计;否则使用 Material 2。
visual_density
值是 ThemeVisualDensity
。默认是 STANDARD
。
page_transitions
PageTransitionsTheme
类的实例。
system_overlay_style
SystemOverlayStyle
类的实例。
appbar_theme
AppBarTheme
类的实例。
badge_theme
BadgeTheme
类的实例。
banner_theme
BannerTheme
类的实例。
bottom_appbar_theme
BottomAppBarTheme
类的实例。
bottom_navigation_bar_theme
BottomNavigationBarTheme
类的实例。
bottom_sheet_theme
BottomSheetTheme
类的实例。
card_theme
CardTheme
类的实例。
checkbox_theme
CheckboxTheme
类的 实例。
chip_theme
ChipTheme
类的实例。
date_picker_theme
DatePickerTheme
类的实例。
dialog_theme
DialogTheme
类的实例。
divider_theme
DividerTheme
类的实例。
expansion_tile_theme
ExpansionTileTheme
类的实例。
list_tile_theme
ListTileTheme
类的实例。
navigation_bar_theme
NavigationBarTheme
类的实例。
navigation_drawer_theme
NavigationDrawerTheme
类的实例。
navigation_rail_theme
NavigationRailTheme
类的实例。
popup_menu_theme
PopupMenuTheme
类的实例。
primary_color
应用程序屏幕和组件中最常显示的颜色。
primary_color_dark
深色主题中的主颜色。
primary_color_light
浅色主题中的主颜色。
primary_swatch
主色调。
progress_indicator_theme
ProgressIndicatorTheme
类的实例。
radio_theme
RadioTheme
类的实例。
search_bar_theme
SearchBarTheme
类的实例。
search_view_theme
SearchViewTheme
类的实例。
segmented_button_theme
SegmentedButtonTheme
类的实例。
slider_theme
SliderTheme
类的实例。
snackbar_theme
SnackBarTheme
类的实例。
switch_theme
SwitchTheme
类的实例。
time_picker_theme
TimePickerTheme
类的实例。
tooltip_theme
TooltipTheme
类的实例。
ColorScheme
类
基于 Material 规范 的一组 30 种颜色,可用于配置大多数组件的颜色属性。阅读更多关于 ColorScheme
的信息,请参考 Flutter 文档。
ColorScheme
类具有以下属性:
primary
在应用程序屏幕和组件中最常显示的颜色。
on_primary
在 primary
上清晰可见的颜色。
primary_container
用于需要比 primary
少强调的元素的颜色。
on_primary_container
在 primary_container
上清晰可见的颜色。
secondary
用于界面中较不突出的组件(例如过滤芯片)的强调颜色,同时扩展了颜色表达的机会。
on_secondary
在 secondary
上清晰可见的颜色。
secondary_container
用于需要比 secondary
少强调的元素的颜色。
on_secondary_container
在 secondary_container
上清晰可见的颜色。
tertiary
用于作为对比强调的颜色,可以平衡 primary
和 secondary
颜色或引起对某个元素(如输入框)的高度关注。
on_tertiary
在 tertiary
上清晰可见的颜色。
tertiary_container
用于需要比 tertiary
少强调的元素的颜色。
on_tertiary_container
在 tertiary_container
上清晰可见的颜色。
error
用于输入验证错误的颜色,例如 TextField.error_text
。
on_error
在 error
上清晰 可见的颜色。
error_container
用于需要比 error
少强调的错误元素的颜色。
on_error_container
在 error_container
上清晰可见的颜色。
background
通常出现在可滚动内容后面的颜色。
on_background
在 background
上清晰可见的颜色。
surface
用于像 Card
这样的控件的背景颜色。
on_surface
在 surface
上清晰可见的颜色。
surface_variant
surface
的颜色变体,可用于与使用 surface
的组件区分开来。
on_surface_variant
在 surface_variant
上清晰可见的颜色。
outline
用于创建边界和强调的实用颜色,以提高可用性。
outline_variant
用于在不需要 3:1 对比度时(例如分隔线或装饰元素)为装饰元素创建边界的实用颜色。
shadow
用于绘制提升组件阴影的颜色。
scrim
用于绘制模态组件周围的遮罩颜色。
inverse_surface
用于显示与周围 UI 反转的表面颜色,例如在 SnackBar
中引起对警报的注意。
on_inverse_surface
在 inverse_surface
上清晰可见的颜色。
inverse_primary
用于在 inverse_surface
背景上显示高亮颜色的强调颜色,例如 SnackBar
中按钮文本的颜色。
surface_tint
用作表面颜色叠加的颜色,以指示组件的提升程度。
TextTheme
类
自定义文本样式。
TextTheme
类具有以下类型的 ft.TextStyle
属性:
body_large
最大的正文样式。正文样式用于较长的文本段落。
body_medium
中等大小的正文样式。正文样式用于较长的文本段落。Material 的默认文本样式。
body_small
最小的正文样式。
display_large
最大的显示样式。作为屏幕上最大的文本,显示样式适用于短而重要的文本或数字。它们在大屏幕上效果最好。
display_medium
中等大小的显示样式。
display_small
最小的显示样式。
headline_large
最大的标题样式。标题样式比显示样式小。它们最适合在较小屏幕上用于短的、高强调的文本。
headline_medium
中等大小的标题样式。
headline_small
最小的标题样式。
`label_large
`
最大的标签样式。标签样式较小,实用性强,用于 UI 区域,如组件内的文本或内容主体中的非常小的辅助文本,如标题。用于 ElevatedButton
、TextButton
和 OutlinedButton
上的文本。
label_medium
中等大小的标签样式。
label_small
最小的标签样式。
title_large
最大的标题样式。标题样式比标题样式小,应该用于较短的中等强调文本。