一种材料设计卡片：一个带有略微圆角的面板和一个提升阴影。
一、基本用法
Card 组件是一个非常常见的UI元素，用于创建视觉上吸引人的内容区域。
import flet as ft
def main(page: ft.Page):
page.title = "Flet 卡片示例"
# 创建一个带有内容的卡片
card = ft.Card(
content=ft.Container(
content=ft.Text("这是一个卡片"),
padding=10,
width=300,
height=200,
bgcolor=ft.colors.AMBER_100,
),
margin=20,
)
page.add(card)
ft.app(target=main)二、特别用法
卡片通常用于封装相关的信息或功能。你可以在卡片中嵌套其他组件，如按钮、文本框或图像，以创建复杂且易于管理和样式的UI元素。
import flet as ft
def main(page: ft.Page):
page.title = "Flet 卡片示例"
card = ft.Card(
content=ft.Container(
content=ft.Column(
[
ft.Text("标题"),
ft.TextField(label="描述"),
ft.ElevatedButton(text="操作", on_click=lambda e: print("按钮被点击了！")),
],
tight=True,
),
padding=10,
width=300,
height=200,
bgcolor=ft.colors.AMBER_100,
),
margin=20,
)
page.add(card)
ft.app(target=main)这个示例展示了如何创建一个包含标题、描述文本框和按钮的卡片，所有这些都整齐地封装在一个卡片组件中。
三、属性
clip_behavior
内容将根据此选项进行裁剪。请参阅 ClipBehavior 了解可能的值。
默认值为 ClipBehavior.NONE。
color
卡片的背景颜色。
content
要在卡片中显示的控件。
此控件只能有一个子控件。要布局多个子控件，请让此控件的子控件为具有子属性的控件，例如Row、Column或Stack，然后将子控件提供给该控件。
elevation
控制卡片下方阴影的大小。默认值为 1.0。
is_semantic_container
如果此卡片表示单个语义容器，则设置为 True（默认值），如果表示一组单独的语义节点（不同类型的内容），则设置为 False。
margin
卡片周围的空白区域。
margin 属性的值可以是以下类型之一：
- int
- float
- margin.Margin
shadow_color
用于绘制卡片下方阴影的颜色。
shape
卡片的形状。
该值是OutlinedBorder类的实例。
默认形状是 RoundedRectangleBorder(radius=4.0)。
show_border_on_foreground
设置边框的形状是否应绘制在“内容”的前面还是后面。
默认为“True”。
surface_tint_color
用于在 color 上作为覆盖的颜色，以指示海拔高度。
如果为 None，则不会应用覆盖。如果设置了此颜色，它将以与 elevation 相关的不透明度复合在 color 之上，并用于绘制卡片的背景。
默认值为 None。
variant
定义要使用的卡片变体。值的类型为 CardVariant ，默认值为 CardVariant.ELEVATED 。