容器

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

示例

可点击的容器

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`

由容器包含的子控件。

`foreground_decoration`

前景装饰。

值的类型为BoxDecoration。

`gradient`

定义容器的渐变背景。

值的类型为Gradient。

`ignore_interactions`

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

默认为False。

`image`

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

值的类型为“DecorationImage”。