Flet中文文档

主题

颜色使用指南 (Working with Colors) ​

Color Palettes

Flet 支持两种定义颜色的主要方式：

  1. 十六进制颜色值 (Hexadecimal values)
  2. 命名颜色 (Named colors)

十六进制颜色值 (Hexadecimal Values) ​

十六进制颜色值遵循以下格式之一：

  • #aarrggbb 或 0xaarrggbb
  • #rrggbb 或 0xrrggbb（如果省略了表示不透明度的 aa 通道，则不透明度默认为 ff）
python
>>> ft.Container(bgcolor="#ff0000")

命名颜色 (Named Color) ​

Flet 使用了 Material Design 主题颜色和调色板。

你可以通过两种方式来定义命名颜色：

  • 字符串方式（例如 "blue"、"redAccent100"）
  • Enums 方式（利用 Colors 或 CupertinoColors 枚举以获得更好的类型安全和代码自动补全支持）
python
>>> ft.Container(bgcolor="yellow")
>>> ft.Container(bgcolor=ft.Colors.YELLOW)
>>> ft.Container(bgcolor=ft.CupertinoColors.DESTRUCTIVE_RED)
主题颜色 (Theme Colors) ​

Theme Colors

在 Theme.color_scheme 中有 30 个命名主题颜色，它们是基于 Theme.color_scheme_seed 生成的，默认的种子颜色是 Colors.BLUE。

python
>>> page.theme = ft.Theme(color_scheme_seed=ft.Colors.GREEN)

这 30 个主题配方颜色中的任何一个都可以被单独重写覆盖。重写后，它们将具有绝对颜色值，不再依赖于种子颜色。

python
page.theme = ft.Theme(
    color_scheme=ft.ColorScheme(
        primary=ft.Colors.GREEN,
        error=ft.Colors.RED,
    ),
)

Theme Colors Green

主题颜色作为大多数 Flet 控件的后备颜色（Fallback）。

调色板 (Color Palettes) ​

Color Palettes 2

调色板最初由 Material Design 于 2014 年引入，是一组经过精心协调、能够和谐共存的颜色集合。

每个**色板（Swatch / 调色板）**包含特定颜色的多个色调阴影，其中较小的数字代表较浅的色调，较大的数字代表较深的色调。大多数调色板色号范围从 50 到 900，步长为 100，而强调色色板（例如 Colors.RED_ACCENT）仅包含 100, 200, 400 和 700。

除了调色板外，Flet 还提供了内置了不透明度的命名黑色和白色变体，例如：

  • Colors.BLACK_54 → 不透明度为 54% 的黑色
  • Colors.WHITE_70 → 不透明度为 70% 的白色

这些调色板颜色可以被：

  • 直接用作控件的颜色相关属性的值（例如 bgcolor、color）
  • 用作种子颜色，通过 Theme.color_scheme_seed 生成动态主题配色方案

颜色不透明度 (Color opacity) ​

Flet 提供了多种设置不透明度的方法：

使用 with_opacity ​

此方法存在于 Colors 和 CupertinoColors 枚举中。它接收一个颜色和一个不透明度值，并返回 Flet 可以识别的格式为 "color,opacity" 的字符串。

python
>>> ft.Colors.with_opacity(0.5, ft.Colors.RED)
"red,0.5"
>>> ft.CupertinoColors.with_opacity(0.8, ft.CupertinoColors.LINK)
"link,0.8"
十六进制不透明度通道 ​

对于十六进制格式的颜色，你可以为 aa 通道指定 00 至 ff 之间的值。

python
>>> "#7fff6666"

为 Flet 控件定义颜色 ​

大部分 Flet 控件拥有通过 Theme.color_scheme 定义的默认颜色，并且可以在不同层级上对它们进行重写覆盖。

Colors fallback

控件层级 (Control Level) ​

如果将一个颜色直接作为控件属性（如 color、bgcolor）的值提供，它将直接被使用。

python
>>> ft.Card(bgcolor=ft.Colors.GREEN_200)

注意：并非所有 Flet 控件都在控件层级提供颜色属性。例如，FilledButton 总是拥有默认的 “primary” 颜色，该颜色是由其最近的父级（Ancestor）主题决定的。

控件主题层级 (Control Theme Level) ​

Theme 对象拥有许多属性，可以用于覆盖 Flet 控件的默认颜色。

例如，最近的 Theme.card_bgcolor 将用于 Card 控件。

注意：如果你需要改变特定子孙控件的主题，可以将它们包裹在例如 Container 中，并定制该容器的 theme 属性，它将自动应用到其所有的子孙控件上。

祖先主题层级 (Ancestor Theme Level) ​

Flet 会在组件树中向上搜索，以寻找最近的定义了主题的父祖级控件，并从中获取 Theme.color_scheme 的颜色。在下面的示例中，FilledButton 的最近祖先是 Container，因此该按钮使用的 primary 颜色将被取自 Container.theme。

python
import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Container(
            width=200,
            height=200,
            border=ft.Border.all(1, ft.Colors.BLACK),
            content=ft.FilledButton("Primary color"),
            theme=ft.Theme(color_scheme=ft.ColorScheme(primary=ft.Colors.YELLOW))
        )
    )

ft.run(main)

如果某个控件、其父级或其父级的祖先均没有定义主题，则该控件默认使用最顶层祖先的主题，即 Page.theme（或者在暗黑模式下使用 Page.dark_theme）。

关注我，学习大模型、大数据、Python等热门技术。

footer-banner