跳到主要内容

控件参考 Controls reference

Flet UI 是由控件构建的。控件以一种层次结构或树的形式组织，每个控件都有一个父控件（除了 Page），容器控件如 Column、Dropdown 可以包含子控件，例如：

Page
 ├─ TextField
 ├─ Dropdown
 │   ├─ Option
 │   └─ Option
 └─ Row
     ├─ ElevatedButton
     └─ ElevatedButton

控件库演示

按类别分类的控件​

常见控件属性​

Flet 控件具有以下属性：

bottom​

只在 Stack 内有效。将子控件的底边与堆栈底部的距离。

data​

可以附加到控件的任意数据。

disabled​

每个控件都有一个 disabled 属性，默认为 False - 控件及其所有子控件都启用。 disabled 属性通常用于数据输入控件，如 TextField、Dropdown、Checkbox、按钮。 但是，也可以将 disabled 设置为父控件上，它的值将递归地传递给所有子控件。

例如，如果您有一个包含多个输入控件的表单，可以通过禁用容器将它们一起禁用：

c = ft.Column(controls=[
    ft.TextField(),
    ft.TextField()
])
c.disabled = True
page.add(c)

expand​

当将子控件放置在 Column 或 Row 中时，您可以将其“展开”以填充可用空间。expand 属性可以是一个布尔值（True - 将控件展开以填充所有可用空间），也可以是一个整数 - 一个“展开因子”，指定如何与其他展开的子控件共享空闲空间。

有关 expand 属性的更多信息和示例，请参阅 Column 或 Row 中的“展开子控件”部分。

height​

控件在虚拟像素中的高度。

left​

只在 Stack 内有效。将子控件的左边与堆栈左侧的距离。

只在 Stack 内有效。将子控件的右边与堆栈右侧的距离。

top​

只在 Stack 内有效。将子控件的顶边与堆栈顶部的距离。

visible​

每个控件都有一个 visible 属性， 默认为 True - 在页面上呈现控件。将 visible 设置为 False 将完全阻止控件（以及其所有子控件，如果有的话）在页面画布上呈现。隐藏的控件无法使用键盘或鼠标进行聚焦或选择，并且不会发出任何事件。

width​

控件在虚拟像素中的宽度。

变换​

offset​

在绘制控件之前应用平移变换。

平移是用 transform.Offset 表示的，其值缩放到控件的大小。例如，带有 x 值为 0.25 的 Offset 将导致控件水平平移四分之一控件宽度。

以下示例将容器显示在堆栈的 0，0 左上角，因为变换将 -1 * 100，-1 * 100（offset * control_size）的水平和垂直平移应用于控件：

import flet as ft

def main(page: ft.Page):

    page.add(
        ft.Stack(
            [
                ft.Container(
                    bgcolor="red",
                    width=100,
                    height=100,
                    left=100,
                    top=100,
                    offset=ft.transform.Offset(-1, -1),
                )
            ],
            width=1000,
            height=1000,
        )
    )

ft.app(target=main)

opacity​

使控件部分透明。0.0 - 控件完全透明，不绘制；1.0（默认值）- 控件完全绘制，没有任何透明度。

rotate​

使用围绕中心点旋转的旋转变换。

rotate 属性的值可以是以下类型之一：

  • number - 顺时针旋转的弧度数。完整圆圈 360° 是 math.pi * 2 弧度，90° 是 pi / 2，45° 是 pi / 4，以此类推。
  • transform.Rotate - 允许指定旋转角度 angle，以及旋转中心的 alignment。

例如：

ft.Image(
    src="https://picsum.photos/100/100",
    width=100,
    height=100,
    border_radius=5,
    rotate=Rotate(angle=0.25 * pi, alignment=ft.alignment.center_left)
)

scale​

沿着二维平面缩放控件。默认的缩放因子为 1.0 - 控件不缩放。 0.5 - 控件缩小为原来的两倍，2.0 - 控件扩大为原来的两倍。

可以为 x 和 y 轴指定不同的缩放因子，通过将 Control.scale 属性设置为 transform.Scale 类的实例：

from dataclasses import field

class Scale:
    scale: float = field(default=None)
    scale_x: float = field(default=None)
    scale_y: float = field(default=None)
    alignment: Alignment = field(default=None)

可以指定 scale，也可以指定 scale_x 和 scale_y，但不能同时指定全部，例如：

ft.Image(
    src="https://picsum.photos/100/100",
    width=100,
    height=100,
    border_radius=5,
    scale=Scale(scale_x=2, scale_y=0.5)
)