主题化 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
最大的标题样式。标题样式比标题样式小,应该用于较短的中等强调文本。
title_medium
中等大小的标题样式。
title_small
最小的标题样式。
ScrollbarTheme
类
自定义应用程序中滚动条的颜色、厚度和形状。
ScrollbarTheme
类具有以下属性:
thumb_visibility
指示滚动条滑块是否应可见,即使在不滚动时也是如此。当 False
时,滚动条将在滚动期间显示,否则会淡出。当 True
时,滚动条将始终可见且不会淡出。属性值可以是单个布尔值或具有 ft.ControlState
作为键和布尔值的字典。
thickness
滚动条在可滚动的横轴上的厚度。属性值可以是单个浮点值或具有 ft.ControlState
作为键和浮点值的字典。
track_visibility
指示滚动条轨道是否应可见。当 True
时,只要滑块可见,滚动条轨道将始终可见。如果滚动条滑块不可见,则轨道也不可见。默认为 False
,当为 None
时。如果此属性为 None
,则使用 Theme.scrollbar_theme
的 ScrollbarTheme.track_visibility
。如果也是 None
,则默认值为 False
。属性值可以是单个布尔值或具有 ft.ControlState
作为键和布尔值的字典。
radius
滚动条滑块的圆角矩形角的半径。
thumb_color
覆盖滚动条滑块的默认颜色。值可以是单一颜色字符串或 ft.ControlState
字典。
track_color
覆盖滚动条轨道的默认颜色。值可以是单一颜色字符串或 ft.ControlState
字典。
track_border_color
覆盖滚动条轨道边框的默认颜色。值可以是单一颜色字符串或 ft.ControlState
字典。
cross_axis_margin
滚动条滑块到最近横轴边缘的距离,以逻辑像素为单位。滚动条轨道会占用此空间。不得为空,默认值为 0。
main_axis_margin
从滚动条滑块的起点和终点到视口边缘的距离,以逻辑像素为单位。它影响可用的绘图区域。滚动条轨道会占用此空间。不得为空,默认值为 0。
min_thumb_length
滚动条滑块在总可滚动范围大、当前可见视口小且视口未过度滚动时可以缩小到的最小首选大小。
interactive
滚 动条是否应该是交互式的,并响应滑块上的拖动或轨道区域的点击。当 False
时,滚动条不会响应手势或悬停事件,并允许点击穿过它。默认值为 True
,除非在 Android 上,当为 None
时,默认值为 False
。
TabsTheme
类
自定义应用程序中 Tabs
控件的外观。
TabsTheme
类具有以下属性:
divider_color
分隔线的颜色。
indicator_border_radius
指示器角的半径。
indicator_border_side
选中选项卡下方绘制的水平线的颜色和宽度。
indicator_padding
定位选中选项卡的下 划线相对于选项卡边界的位置。indicator_tab_size
属性可用于定义选项卡指示器相对于其(居中)选项卡小部件的边界为 False
,或整个选项卡为 True
。
indicator_color
选中选项卡下方线条的颜色。
indicator_tab_size
True
表示指示器占据整个选项卡。
label_color
选中选项卡标签的颜色。
unselected_label_color
未选中选项卡标签的颜色。
overlay_color
定义墨水响应焦点、悬停和溅射颜色。如果指定,它将针对 MaterialState.FOCUSED
、MaterialState.HOVERED
和 MaterialState.PRESSED
之一进行解 析。
PageTransitionsTheme
类
允许为不同平台自定义导航页面过渡。
支持的过渡类型是 ft.PageTransitionTheme
:NONE
(无延迟过渡,无任何动画)、FADE_UPWARDS
、OPEN_UPWARDS
、ZOOM
和 CUPERTINO
。
示例:
theme = ft.Theme()
theme.page_transitions.android = ft.PageTransitionTheme.OPEN_UPWARDS
theme.page_transitions.ios = ft.PageTransitionTheme.CUPERTINO
theme.page_transitions.macos = ft.PageTransitionTheme.FADE_UPWARDS
theme.page_transitions.linux = ft.PageTransitionTheme.ZOOM
theme.page_transitions.windows = ft.PageTransitionTheme.NONE
page.theme = theme
page.update()
android
在 Android 平台上使用的过渡。默认值为 FADE_UPWARDS
。
ios
在 iOS 平台上使用的过渡。默认值为 CUPERTINO
。
macos
在 macOS 平台上使用的过渡。默认值为 ZOOM
。
linux
在 Linux 平台上使用的过渡。默认值为 ZOOM
。
windows
在 Windows 平台上使用的过渡。默认值为 ZOOM
。
SystemOverlayStyle
类
允许自定义移动设备系统覆盖(包括系统状态栏和导航栏)的外观。
它具有以下属性:
system_navigation_bar_color
系统导航栏的 颜色。
system_navigation_bar_divider_color
系统导航栏与应用内容之间的分隔线 颜色。
enforce_system_navigation_bar_contrast
指示设置透明导航栏时系统是否应强制对比。
enforce_system_status_bar_contrast
指示设置透明状态栏时系统是否应强制对比。
system_navigation_bar_icon_brightness
系统导航栏图标的 Brightness
。可以是 Brightness.DARK
或 Brightness.LIGHT
。
status_bar_brightness
状态栏的 Brightness
。可以是 Brightness.DARK
或 Brightness.LIGHT
。
status_bar_icon_brightness
状态栏图标的 Brightness
。可以是 Brightness.DARK
或 Brightness.LIGHT
。
AppBarTheme
类
自定义应用程序中 AppBar
的外观。
AppBarTheme
类具有以下属性:
bgcolor
覆盖所有后代 AppBar
控件中的 AppBar.bgcolor
默认值。
center_title
覆盖所有后代 AppBar
控件中的 AppBar.center_title
默认值。
color
覆盖所有后代 AppBar
控件中的 AppBar.color
默认值。
elevation
覆盖所有后代 AppBar
控件中的 AppBar.elevation
默认值。
scroll_elevation
覆盖所有后代 AppBar
控件中的 AppBar.scroll_elevation
默认值。
shadow_color
覆盖所有后代 AppBar
控件中的 AppBar.shadow_color
默认值。
shape
覆盖所有后代 AppBar
控件中的 AppBar.shape
默认值。
surface_tint_color
覆盖所有后代 AppBar
控件中的 AppBar.surface_tint_color
默认值。
title_spacing
覆盖所有后代 AppBar
控件中的 AppBar.title_spacing
默认值。
title_text_style
覆盖所有后代 AppBar
控件中的 AppBar.title_text_style
默认值。
toolbar_height
覆盖所有后代 AppBar
控件中的 AppBar.toolbar_height
默认值。
toolbar_text_style
覆盖所有后代 AppBar
控件中的 AppBar.toolbar_text_style
默认值。
BadgeTheme
类
自定义应用程序中 Badge
的外观。
BadgeTheme
类具有以下属性:
alignment
覆盖所有后代 Badge
控件中的 Badge.alignment
默认值。
bgcolor
覆盖所有后代 Badge
控件中的 Badge.bgcolor
默认值。
large_size
覆盖所有后代 Badge
控件中的 Badge.large_size
默认值。
offset
覆盖所有后代 Badge
控件中的 Badge.offset
默认值。
padding
覆盖所有后代 Badge
控件中的 Badge.padding
默认值。
small_size
覆盖所有后代 `Badge
控件中的
Badge.small_size` 默认值。
text_color
覆盖所有后代 Badge
控件中的 Badge.text_color
默认值。
text_style
覆盖所有后代 Badge
控件中的 Badge.text_style
默认值。
BannerTheme
类
自定义应用程序中 Banner
的外观。
BannerTheme
类具有以下属性:
bgcolor
覆盖所有后代 Banner
控件中的 Banner.bgcolor
默认值。
content_text_style
覆盖所有后代 Banner
控件中的 Banner.content_text_style
默认值。
divider_color
覆盖所有后代 Banner
控件中的 Banner.divider_color
默认值。
elevation
覆盖所有后代 Banner
控件中的 Banner.elevation
默认值。
leading_padding
覆盖所有后代 Banner
控件中的 Banner.leading_padding
默认值。
padding
覆盖所有后代 Banner
控件中的 Banner.padding
默认值。
shadow_color
覆盖所有后代 Banner
控件中的 Banner.shadow_color
默认值。
surface_tint_color
覆盖所有后代 Banner
控件中的 Banner.surface_tint_color
默认值。
BottomAppBarTheme
类
自定义应用程序中 BottomAppBar
的外观。
BottomAppBarTheme
类具有以下属性:
color
覆盖所有后代 BottomAppBar
控件中的 BottomAppBar.color
默认值。
elevation
覆盖所有后代 BottomAppBar
控件中的 BottomAppBar.elevation
默认值。
height
覆盖所有后代 BottomAppBar
控件中的 BottomAppBar.height
默认值。
padding
覆盖所有后代 BottomAppBar
控件中的 BottomAppBar.padding
默认值。
shadow_color
覆盖所有后代 BottomAppBar
控件中的 BottomAppBar.shadow_color
默认值。
surface_tint_color
覆盖所有后代 BottomAppBar
控件中的 BottomAppBar.surface_tint_color
默认值。
BottomNavigationBarTheme
类
自定义应用程序中 BottomNavigationBar
的外观。
BottomNavigationBarTheme
类具有以下属性:
bgcolor
覆盖所有后代 BottomNavigationBar
控件中的 BottomNavigationBar.bgcolor
默认值。
elevation
覆盖所有后代 BottomNavigationBar
控件中的 BottomNavigationBar.elevation
默认值。
enable_feedback
覆盖所有后代 BottomNavigationBar.enable_feedback
默认值。
show_unselected_labels
覆盖所有后代 BottomNavigationBar.show_unselected_labels
默认值。
selected_item_color
覆盖所有后代 BottomNavigationBar.selected_item_color
默认值。
selected_label_text_style
覆盖所有后代 BottomNavigationBar.selected_label_text_style
默认值。
show_selected_labels
覆盖所有后代 BottomNavigationBar.show_selected_labels
默认值。
unselected_item_color
覆盖所有后代 BottomNavigationBar.unselected_item_color
默认值。
unselected_label_text_style
覆盖所有后代 BottomNavigationBar.unselected_label_text_style
默认值。
BottomSheetTheme
类
自定义应用程序中 BottomSheet
的外观。
BottomSheetTheme
类具有以下属性:
bgcolor
覆盖所有后代 BottomSheet
控件中的 BottomSheet.bgcolor
默认值。
clip_behavior
覆盖所有后代 BottomSheet
控件中的 BottomSheet.clip_behavior
默认值。
drag_handle_color
覆盖所有后代 BottomSheet
控件中的 BottomSheet.drag_handle_color
默认值。
elevation
覆盖所有后代 BottomSheet
控件中的 BottomSheet.elevation
默认值。
modal_bgcolor
覆盖所有后代 BottomSheet
控件中的 BottomSheet.modal_bgcolor
默认值。
modal_elevation
覆盖所有后代 BottomSheet
控件中的 BottomSheet.modal_elevation
默认值。
shadow_color
覆盖所有后代 BottomSheet
控件中的 BottomSheet.shadow_color
默认值。
shape
覆盖所有后代 BottomSheet
控件中的 BottomSheet.shape
默认值。
show_drag_handle
覆盖所有后代 BottomSheet
控件中的 BottomSheet.show_drag_handle
默认值。
surface_tint_color
覆盖所有后代 BottomSheet
控件中的 BottomSheet.surface_tint_color
默认值。
CardTheme
类
自定义应用程序中 Card
的外观。
CardTheme
类具有以下属性:
clip_behavior
覆盖所有后代 Card
控件中的 Card.clip_behavior
默认值。
color
覆盖所有后代 Card
控件中的 Card.color
默认值。
elevation
覆盖所有后代 Card
控件中的 Card.elevation
默认值。
margin
覆盖所有后代 Card
控件中的 Card.margin
默认值。
shadow_color
覆盖所有后代 Card
控件中的 Card.shadow_color
默认值。
shape
覆盖所有后代 Card
控件中的 Card.shape
默认值。
surface_tint_color
覆盖所有后代 Card
控件中的 Card.surface_tint_color
默认值。
CheckboxTheme
类
自定义应用程序中 Checkbox
的外观。
CheckboxTheme
类具有以下属性:
border_side
覆盖所有后代 Checkbox
控件中的 Checkbox.border_side
默认值。
check_color
覆盖所有后代 Checkbox
控件中的 Checkbox.check_color
默认值。
fill_color
覆盖所有后代 Checkbox
控件中的 Checkbox.fill_color
默认值。
mouse_cursor
覆盖所有后代 Checkbox
控件中的 Checkbox.mouse_cursor
默认值。
overlay_color
覆盖所有后代 Checkbox
控件中的 Checkbox.overlay_color
默认值。
shape
覆盖所有后代 Checkbox
控件中的 Checkbox.shape
默认值。
splash_radius
覆盖所有后代 Checkbox
控件中的 Checkbox.splash_radius
默认值。
visual_density
覆盖所有后代 Checkbox
控件中的 Checkbox.visual_density
默认值。
ChipTheme
类
自定义应用程序中 Chip
的外观。
ChipTheme
类具有以下属性:
bgcolor
覆盖所有后代 Chip
控件中的 Chip.bgcolor
默认值。
border_side
覆盖所有后代 Chip
控件中的 Chip.border_side
默认值。
brightness
覆盖所有后代 Chip
控件中 的 Chip.brightness
默认值。
checkmark_color
覆盖所有后代 Chip
控件中的 Chip.checkmark_color
默认值。
click_elevation
覆盖所有后代 Chip
控件中的 Chip.click_elevation
默认值。
delete_icon_color
覆盖所有后代 Chip
控件中的 Chip.delete_icon_color
默认值。
disabled_color
覆盖所有后代 Chip
控件中的 Chip.disabled_color
默认值。
elevation
覆盖所有后代 Chip
控件中的 Chip.elevation
默认值。
label_padding
覆盖所有后代 Chip
控件中的 Chip.label_padding
默认值。
label_text_style
覆盖所有后代 Chip
控件中的 Chip.label_text_style
默认值。
padding
覆盖所有后代 Chip
控件中的 Chip.padding
默认值。
secondary_label_text_style
覆盖所有后代 Chip
控件中的 Chip.secondary_label_text_style
默认值。
secondary_selected_color
覆盖所有后代 Chip
控件中的 Chip.secondary_selected_color
默认值。
selected_color
覆盖所有后代 Chip
控件中的 Chip.selected_color
默认值。
selected_shadow_color
覆盖所有后代 Chip
控件中的 Chip.selected_shadow_color
默认值。
shadow_color
覆盖所有后代 Chip
控件中的 Chip.shadow_color
默认值。
shape
覆盖所有后代 Chip
控件中的 Chip.shape
默认值。
show_checkmark
覆盖所有后代 Chip
控件中的 Chip.show_checkmark
默认值。
surface_tint_color
覆盖所有后代 Chip
控件中的 Chip.surface_tint_color
默认值。
DatePickerTheme
类
自定义应用程序中 DatePicker
的外观。
DatePickerTheme
类具有以下属性:
bgcolor
覆盖所有后代 DatePicker
控件中的 DatePicker.bgcolor
默认值。
cancel_button_style
覆盖所有后代 DatePicker.cancel_button_style
默认值。
confirm_button_style
覆盖所有后代 DatePicker.confirm_button_style
默认值。
day_bgcolor
覆盖所有后代 DatePicker.day_bgcolor
默认值。
day_foreground_color
覆盖所有后代 DatePicker.day_foreground_color
默认值。
day_overlay_color
覆盖所有后代 DatePicker.day_overlay_color
默认值。
day_text_style
覆盖所有后代 DatePicker.day_text_style
默认值。
divider_color
覆盖所有后代 DatePicker.divider_color
默认值。
elevation
覆盖所有后代 DatePicker.elevation
默认值。
header_bgcolor
覆盖所有后代 DatePicker.header_bgcolor
默认值。
header_foreground_color
覆盖所有后代 DatePicker.header_foreground_color
默认值。
header_headline_text_style
覆盖所有后代 DatePicker.header_headline_text_style
默认值。
header_help_text_style
覆盖所有后代 DatePicker.header_help_text_style
默认值。
range_picker_bgcolor
覆盖所有后代 DatePicker.range_picker_bgcolor
默认值。
range_picker_elevation
覆盖所有后代 DatePicker.range_picker_elevation
默认值。
range_picker_header_bgcolor
覆盖所有后代 DatePicker.range_picker_header_bgcolor
默认值。
range_picker_header_foreground_color
覆盖所有后代 DatePicker.range_picker_header_foreground_color
默认值。
range_picker_header_headline_text_style
覆盖所有后代 DatePicker.range_picker_header_headline_text_style
默认值。
range_picker_header_help_text_style
覆盖所有后代 DatePicker.range_picker_header_help_text_style
默认值。
range_picker_shape
覆盖所有后代 DatePicker.range_picker_shape
默认值。
range_picker_surface_tint_color
覆盖所有后代 DatePicker.range_picker_surface_tint_color
默认值。
range_selection_bgcolor
覆盖所有后代 DatePicker.range_selection_bgcolor
默认值。
range_selection_overlay_color
覆盖所有后代 DatePicker.range_selection_overlay_color
默认值。
shadow_color
覆盖所有后代 DatePicker.shadow_color
默认值。
shape
覆盖所有后代 DatePicker.shape
默认值。
surface_tint_color
覆盖所有后代 DatePicker.surface_tint_color
默认值。
today_bgcolor
覆盖所有后代 DatePicker.today_bgcolor
默认值。
today_border_side
覆盖所有后代 DatePicker.today_border_side
默认值。
today_foreground_color
覆盖所有后代 DatePicker.today_foreground_color
默认值。
weekday_text_style
覆盖所有后代 DatePicker.weekday_text_style
默认值。