Flet 开发 App,为了程序更美观,UI风格更统一,可以之用 主题化 Theming。它包括两个层面:一是 程序级:整个应用程序的风格;二是容器级,特定(指定)容器内的所有控件的风格。下面分别分享一下用法。
一、程序级的主体化
Page控件 是整个应用程序的根容器,它的主题化将影响全局。
它有两个对此有用的属性:theme 和 dark_theme 属性,分别用于在浅色和深色主题模式下配置整个应用程序的外观/主题。 两者的类型均为 Theme,它们表示在整个应用程序中使用的默认/回退主题,除非在树中明确修改/覆盖。
def main(page: ft.Page):
page.theme = ft.Theme(color_scheme_seed=ft.colors.YELLOW)
page.dark_theme = ft.Theme(color_scheme_seed=ft.colors.GREEN)
....
在 ft.Theme 初始化设置主题参数。ft.Theme 的相关属性介绍,我们放在文末。
二、容器级的主题化
可以让 应用程序的 一部分 使用不同的主题或为特定的控件覆盖一些主题样式。
Flet的容器控件,一般有theme和theme_mode属性。
比如:在 容器控件 Container 中,指定 theme_mode 意味着不打算继承父主题模式,而是想为容器内的所有控件使用一个全新的、独特的方案。 如果容器没有设置theme_mode属性,那么其theme属性中的样式将覆盖从父级继承的主题中的样式,也就是针对性的局部覆盖。
ThemeMode 主题模式 枚举具有以下值:
- SYSTEM(系统)
- LIGHT(浅色)
- DARK(深色)
主体应用示例:
import flet as ft
def main(page: ft.Page):
# 程序级主题:黄色页面主题
page.theme = ft.Theme(color_scheme_seed=ft.colors.YELLOW,)
page.add(
# 第一个 Container,没有设置主题,默认继承 page 的主题
ft.Container(
content=ft.ElevatedButton("第一个 Container,没有设置主题,默认继承 page 的主题"),
bgcolor=ft.colors.SURFACE_VARIANT,
padding=20,
width=300,
),
# 第二个 Container,设置控件主题,在继承page的主题基础上,有自己的个性风格
ft.Container(
theme=ft.Theme(color_scheme=ft.ColorScheme(primary=ft.colors.GREEN)),
content=ft.ElevatedButton("第二个 Container,设置控件主题,在继承page的主题基础上,有自己的个性风格"),
bgcolor=ft.colors.SURFACE_VARIANT,
padding=20,
width=300,
),
# 第三个 Container,设置了theme_mode,独特的始终为 DARK 主题
ft.Container(
theme=ft.Theme(color_scheme_seed=ft.colors.INDIGO),
theme_mode=ft.ThemeMode.DARK,
content=ft.ElevatedButton("第三个 Container,设置了theme_mode,独特的始终为 DARK 主题"),
bgcolor=ft.colors.SURFACE_VARIANT,
padding=20,
width=300,
),
)
ft.app(main)
按VsCode的F5键,运行效果如下:
三、主题(Theme)类的属性
应用栏主题(appbar_theme)
值的类型为 AppBarTheme。
徽章主题(badge_theme)
值的类型为 BadgeTheme。
横幅主题(banner_theme)
值的类型为 BannerTheme。
底部应用栏主题(bottom_appbar_theme)
值的类型为 BottomAppBarTheme。
底部表单主题(bottom_sheet_theme)
值的类型为 BottomSheetTheme。
画布颜色(canvas_color)
值的类型为 ColorValue。
卡片颜色(card_color)
值的类型为 ColorValue。
卡片主题(card_theme)
值的类型为 CardTheme。
复选框主题(checkbox_theme)
值的类型为 CheckboxTheme。
芯片主题(chip_theme)
值的类型为 ChipTheme。
颜色方案种子(color_scheme_seed)
用于通过算法从其推导出其余主题颜色的种子颜色。值的类型为 ColorValue。
颜色方案(color_scheme)
值的类型为 ColorScheme 类,允许自定义从 color_scheme_seed 派生的材质颜色方案。
日期选择器主题(date_picker_theme)
值的类型为 DatePickerTheme。
对话框背景颜色(dialog_bgcolor)
值的类型为 ColorValue。
对话框主题(dialog_theme)
值的类型为 DialogTheme。
禁用颜色(disabled_color)
值的类型为 ColorValue。
分隔线颜色(divider_color)
值的类型为 ColorValue。
分隔线主题(divider_theme)
值的类型为 DividerTheme。
扩展瓷砖主题(expansion_tile_theme)
值的类型为 ExpansionTileTheme。
焦点颜色(focus_color)
值的类型为 ColorValue。
字体家族(font_family)
所有用户界面元素的基础字体。
突出显示颜色(highlight_color)
值的类型为 ColorValue。
提示颜色(hint_color)
值的类型为 ColorValue。
悬停颜色(hover_color)
值的类型为 ColorValue。
指示器颜色(indicator_color)
值的类型为 ColorValue。
列表瓷砖主题(list_tile_theme)
值的类型为 ListTileTheme。
导航栏主题(navigation_bar_theme)
值的类型为 NavigationBarTheme。
导航抽屉主题(navigation_drawer_theme)
值的类型为 NavigationDrawerTheme。
导航轨道主题(navigation_rail_theme)
值的类型为 NavigationRailTheme。
页面过渡(page_transitions)
值的类型为 PageTransitionsTheme
主要文本主题(primary_text_theme)
描述与主要颜色形成对比的文本主题。
值的类型为 TextTheme。
弹出菜单主题(popup_menu_theme)
值的类型为 PopupMenuTheme。
主要颜色(primary_color)
值的类型为 ColorValue。
主要颜色(深色)(primary_color_dark)
值的类型为 ColorValue。
主要颜色(浅色)(primary_color_light)
值的类型为 ColorValue。
主要色板(primary_swatch)
值的类型为 ColorValue。
进度指示器主题(progress_indicator_theme)
值的类型为 ProgressIndicatorTheme。
单选按钮主题(radio_theme)
值的类型为 RadioTheme。
脚手架背景颜色(scaffold_bgcolor)
值的类型为 ColorValue。
滚动条主题(scrollbar_theme)
值的类型为 ScrollbarTheme
搜索栏主题(search_bar_theme)
值的类型为 SearchBarTheme。
搜索视图主题(search_view_theme)
值的类型为 SearchViewTheme。
开关主题(switch_theme)
值的类型为 SwitchTheme。
标签页主题(tabs_theme)
值的类型为 TabsTheme
文本主题(text_theme)
定义与卡片和画布颜色形成对比的文本样式。值的类型为 TextTheme。
次要标题颜色(secondary_header_color)
值的类型为 ColorValue。
分段按钮主题(segmented_button_theme)
值的类型为 SegmentedButtonTheme。
阴影颜色(shadow_color)
值的类型为 ColorValue。
滑块主题(slider_theme)
值的类型为 SliderTheme。
小吃栏主题(snackbar_theme)
值的类型为 SnackBarTheme。
启动颜色(splash_color)
值的类型为 ColorValue。
系统覆盖样式(system_overlay_style)
值的类型为 SystemOverlayStyle
时间选择器主题(time_picker_theme)
值的类型为 TimePickerTheme。
工具提示主题(tooltip_theme)
值的类型为 TooltipTheme。
未选中的控制颜色(unselected_control_color)
值的类型为 ColorValue。
使用 Material 3(use_material3)
是否使用 Material 3 设计而不是 Material 2。
值的类型为 bool,默认值为 True。
视觉密度(visual_density)
值的类型为 ThemeVisualDensity,默认值为
ThemeVisualDensity.STANDARD。
(汇报完毕,感谢收看,收藏+点赞!)