云计算、AI、云原生、大数据等一站式技术学习平台

网站首页 > 教程文章 正文

Flet 主题化 Theming,配置应用程序及包含的主题,让你的App风格化

jxf315 2025-02-27 15:38:04 教程文章 35 ℃

Flet 开发 App,为了程序更美观,UI风格更统一,可以之用 主题化 Theming。它包括两个层面:一是 程序级:整个应用程序的风格;二是容器级,特定(指定)容器内的所有控件的风格。下面分别分享一下用法。

一、程序级的主体化

Page控件 是整个应用程序的根容器,它的主题化将影响全局。

它有两个对此有用的属性:themedark_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。

(汇报完毕,感谢收看,收藏+点赞!)

#python# #flet# #编程# #app# #主题#

最近发表
标签列表