容器

容器允许使用背景颜色和边框装饰控件，并通过填充、边距和对齐来定位它。

示例

可点击的容器

Python

import flet as ft

def main(page: ft.Page):
    page.title = "容器 - 可点击与不可点击"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.add(
        ft.Row(
            [
                ft.Container(
                    content=ft.Text("不可点击"),
                    margin=10,
                    padding=10,
                    alignment=ft.alignment.center,
                    bgcolor=ft.Colors.AMBER,
                    width=150,
                    height=150,
                    border_radius=10,
                ),
                ft.Container(
                    content=ft.Text("可点击无墨水效果"),
                    margin=10,
                    padding=10,
                    alignment=ft.alignment.center,
                    bgcolor=ft.Colors.GREEN_200,
                    width=150,
                    height=150,
                    border_radius=10,
                    on_click=lambda e: print("点击了可点击无墨水效果的容器！"),
                ),
                ft.Container(
                    content=ft.Text("可点击有墨水效果"),
                    margin=10,
                    padding=10,
                    alignment=ft.alignment.center,
                    bgcolor=ft.Colors.CYAN_200,
                    width=150,
                    height=150,
                    border_radius=10,
                    ink=True,
                    on_click=lambda e: print("点击了可点击有墨水效果的容器！"),
                ),
                ft.Container(
                    content=ft.Text("可点击透明有墨水效果"),
                    margin=10,
                    padding=10,
                    alignment=ft.alignment.center,
                    width=150,
                    height=150,
                    border_radius=10,
                    ink=True,
                    on_click=lambda e: print("点击了可点击透明有墨水效果的容器！"),
                ),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        ),
    )

ft.app(target=main)

属性

`alignment`

对齐容器内的子控件。

alignment 是 Alignment 的类型值。

`animate`

启用容器的“隐式”动画，逐步在一段时间内更改其值。

该值是 AnimationValue 类型。

`bgcolor`

定义容器的背景颜色。

`blend_mode`

应用于容器背景的 color 或 gradient 背景的混合模式。属性值是 BlendMode ，默认值为 MODULATE。

`blur`

在容器下方应用高斯模糊效果。

此属性的值可以是以下之一：

一个数字 - 为水平和垂直 sigma 指定相同的值，例如 10。
一个元组 - 为水平和垂直 sigma 指定不同的值，例如 (10, 1)。
Blur 的一个实例

例如：

ft.Stack(
    [
        ft.Container(
            content=ft.Text("你好"),
            image_src="https://picsum.photos/100/100",
            width=100,
            height=100,
        ),
        ft.Container(
            width=50,
            height=50,
            blur=10,
            bgcolor="#44CCCC00",
        ),
        ft.Container(
            width=50,
            height=50,
            left=10,
            top=60,
            blur=(0, 10),
        ),
        ft.Container(
            top=10,
            left=60,
            blur=ft.Blur(10, 0, ft.BlurTileMode.MIRROR),
            width=50,
            height=50,
            bgcolor="#44CCCCCC",
            border=ft.border.all(2, ft.Colors.BLACK),
        ),
    ]
)

`border`

在背景颜色之上绘制的边框。该值是 Border 类的实例。

`border_radius`

如果指定，容器的角将由此半径圆角化。边框半径是 BorderRadius 类的实例。

`clip_behavior`

内容将根据此选项进行剪辑（或不剪辑）。

值的类型为 ClipBehavior ，如果 border_radius 不为 None ，则默认为 ClipBehavior.ANTI_ALIAS ；否则为 ClipBehavior.NONE 。

`color_filter`

对容器应用颜色滤镜。

值的类型为 ColorFilter 。

`content`

由容器包含的子控件。

`dark_theme`

允许为容器内及子树中的所有控件在深色主题模式下设置嵌套的主题。

值的类型为Theme。

`foreground_decoration`

前景装饰。

值的类型为BoxDecoration。

`gradient`

定义容器的渐变背景。

值的类型为Gradient。

`ignore_interactions`

是否忽略与此容器及其后代的所有交互。

默认为False。

`image`

在bgcolor或gradient之上绘制的图像。如果shape=BoxShape.CIRCLE，则此图像将被裁剪到圆形边界；如果border_radius不为None，则图像将被裁剪到给定的半径。

值的类型为“DecorationImage”。

`ink`

True 表示当用户点击容器时产生墨水波纹效果。默认值为 False。

`ink_color`

墨水响应的飞溅颜色。

`margin`

围绕装饰和子控件的空白空间。

值是 Margin 类的实例或数字。

`padding`

在容器装饰（背景、边框）内部铭刻的空白空间。子控件放置在此填充内。

值是 Padding 类的实例或数字。

`rtl`

True 设置文本方向为从右到左。默认值为 False。

`shadow`

容器投下的阴影。

值的类型为 BoxShadow 或 List[BoxShadow] 。

`shape`

设置容器的形状。

值的类型为 BoxShape ，默认值为 BoxShape.RECTANGLE 。

`theme_mode`

值是 ThemeMode 。默认值是 SYSTEM。

设置 theme_mode 会“重置”父主题，并为容器内和下方的所有控件创建一个新的唯一方案。否则，容器的 theme 属性中定义的样式将覆盖父级继承主题中的相应样式。

`theme`

值是的类型 Theme 。

允许为容器内和下方树的所有控件设置嵌套 theme，例如：

用例

import flet as ft

def main(page: ft.Page):
    # 黄色页面主题，模式为 SYSTEM（默认）
    page.theme = ft.Theme(
        color_scheme_seed=ft.Colors.YELLOW,
    )

    page.add(
        # 页面主题
        ft.Container(
            content=ft.ElevatedButton("页面主题按钮"),
            bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
            padding=20,
            width=300,
        ),

        # 继承的主题，主要颜色被覆盖
        ft.Container(
            theme=ft.Theme(color_scheme=ft.ColorScheme(primary=ft.Colors.PINK)),
            content=ft.ElevatedButton("继承的主题按钮"),
            bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
            padding=20,
            width=300,
        ),
        
        # 独特的始终为 DARK 的主题
        ft.Container(
            theme=ft.Theme(color_scheme_seed=ft.Colors.INDIGO),
            theme_mode=ft.ThemeMode.DARK,
            content=ft.ElevatedButton("独特的主题按钮"),
            bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
            padding=20,
            width=300,
        ),
    )

ft.app(main)

`url`

点击容器时要打开的 URL。如果提供，on_click 事件在那之后触发。

`url_target`

在网页模式下打开 URL 的位置。值是 UrlTarget 。默认值是 UrlTarget.BLANK。

事件

`on_click`

当用户点击容器时触发。长按不会触发。事件对象 e 是 ContainerTapEvent 类的实例：

`on_hover`

当鼠标指针进入或退出容器区域时触发。事件对象的 data 属性在光标进入时包含 true（字符串），在退出时包含 false。

一个在鼠标悬停时改变背景颜色的容器的简单示例：

import flet as ft

def main(page: ft.Page):
    def on_hover(e):
        e.control.bgcolor = "blue" if e.data == "true" else "red"
        e.control.update()

    page.add(
        ft.Container(width=100, height=100, bgcolor="red", ink=False, on_hover=on_hover)
    )

ft.app(target=main)

`on_long_press`

当长按容器时触发。

`on_tap_down`

当用户点击容器（无论是否长按）时触发。

事件处理程序的参数类型为 ContainerTapEvent 。

信息

如果 ink 为 True ，e 将是普通的 ControlEvent ，其 data 为空，而不是 ContainerTapEvent 。

一个简单的使用示例:

import flet as ft

def main(page: ft.Page):
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def on_long_press(e):
        print("on long press")
        page.add(ft.Text("on_long_press triggered"))

    def on_click(e):
        print("on click")
        page.add(ft.Text("on_click triggered"))

    def on_tap_down(e: ft.ContainerTapEvent):
        print("on tap down", e.local_x, e.local_y)
        page.add(ft.Text("on_tap_down triggered"))

    c = ft.Container(
        bgcolor=ft.Colors.RED,
        content=ft.Text("Test Long Press"),
        height=100,
        width=100,
        on_click=on_click,
        on_long_press=on_long_press,
        on_tap_down=on_tap_down,
    )
    
    page.add(c)

ft.app(target=main)

示例​

可点击的容器​

属性​

alignment​

animate​

bgcolor​

blend_mode​

blur​

border​

border_radius​

clip_behavior​

color_filter​

content​

dark_theme​

foreground_decoration​

gradient​

ignore_interactions​

image​

ink​

ink_color​

margin​

padding​

rtl​

shadow​

shape​

theme_mode​

theme​

url​

url_target​

事件​

on_click​

on_hover​

on_long_press​

on_tap_down​

示例