Container 允许为控件添加背景颜色和边框，并通过填充、边距和对齐来定位它。
一、基本用法
ft.Container（容器）组件是一个非常常见的UI元素，用于封装其他控件并添加样式。
import flet as ft
def main(page: ft.Page):
page.title = "Flet Container 示例"
# 创建一个带有内容的容器
container = ft.Container(
content=ft.Text("这是一个容器"),
padding=10,
width=300,
height=200,
bgcolor=ft.colors.AMBER_100,
border=ft.border.all(2, ft.colors.BLACK),
border_radius=10,
)
page.add(container)
ft.app(target=main)二、特殊用法/可点击的容器
import flet as ft
def example():
return 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("可点击但无Ink效果的"),
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("已点击“可点击但无Ink效果的”"),
),
ft.Container(
content=ft.Text("可点击且带有Ink效果的"),
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("已点击“可点击且带有Ink效果的”"),
),
ft.Container(
content=ft.Text("可点击且透明的，带有Ink效果的"),
margin=10,
padding=10,
alignment=ft.alignment.center,
width=150,
height=150,
border_radius=10,
ink=True,
on_click=lambda e: print("已点击“可点击且透明的，带有Ink效果的”"),
),
],
)
def main(page:ft.Page):
page.title = "ft.Container（容器）"
page.window_center()
page.add(example())
ft.app(target=main)三、特殊用法/具有不同对齐方式的容器
import flet as ft
def example():
container_1 = ft.Container(
content=ft.Text("居中对齐"),
alignment=ft.alignment.center,
bgcolor=ft.Colors.BLUE_GREY_100,
width=150,
height=150,
)
container_2 = ft.Container(
content=ft.Text("左上对齐"),
alignment=ft.alignment.top_left,
bgcolor=ft.Colors.BLUE_GREY_200,
width=150,
height=150,
)
container_3 = ft.Container(
content=ft.Text("|-0.5, -0.5|"),
alignment=ft.alignment.Alignment(-0.5, -0.5),
bgcolor=ft.Colors.BLUE_GREY_300,
width=150,
height=150,
)
return ft.Row(controls=[container_1, container_2, container_3])
def main(page:ft.Page):
page.title = "ft.Container（容器）"
page.window_center()
page.add(example())
ft.app(target=main)四、属性
alignment
对齐容器内的子控件。
alignment 是 Alignment 的类型值。
animate
启用容器的“隐式”动画，逐步在一段时间内更改其值。
该值是 AnimationValue 类型。
bgcolor
定义容器的背景颜色。
blend_mode
应用于容器背景的 color 或 gradient 背景的混合模式。属性值是 BlendMode ，默认值为 MODULATE。
blur
在容器下方应用高斯模糊效果。此属性的值可以是以下之一：
- 一个数字 - 为水平和垂直 sigma 指定相同的值，例如 10。
- 一个元组 - 为水平和垂直 sigma 指定不同的值，例如 (10, 1)。
- Blur 的一个实例
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”。
image_src
将图像设置为容器背景。有关更多详细信息，请参阅 Image.src。
在 v0.24.0 中已弃用，并将在 v0.27.0 中移除。请改用image.fit。
image_src_base64
将编码为 Base-64 字符串的图像设置为容器背景。有关更多详细信息，请参阅 Image.src_base64。
在 v0.24.0 中已弃用，并将在 v0.27.0 中移除。请改用image.fit。
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
url
点击容器时要打开的 URL。如果提供，on_click 事件在那之后触发。
url_target
在网页模式下打开 URL 的位置。值是 UrlTarget 。默认值是 UrlTarget.BLANK。
五、事件
on_click
当用户点击容器时触发。长按不会触发。 事件对象 e 是 ContainerTapEvent 类的实例：
on_hover
当鼠标指针进入或退出容器区域时触发。事件对象的 data 属性在光标进入时包含 true（字符串），在退出时包含 false。
（汇报完毕，感谢收看！）