跳到主要内容

卡片

一个材质设计的卡片:带有轻微圆角和阴影的面板。

示例

在线示例

import flet as ft

def main(page):
page.title = "卡片示例"
page.add(
ft.Card(
content=ft.Container(
content=ft.Column(
[
ft.ListTile(
leading=ft.Icon(ft.icons.ALBUM),
title=ft.Text("魔法夜莺"),
subtitle=ft.Text("朱莉·盖布尔作曲,西德尼·斯坦作词。"),
),
ft.Row(
[ft.TextButton("购票"), ft.TextButton("试听")],
alignment=ft.MainAxisAlignment.END,
),
]
),
width=400,
padding=10,
)
)
)

ft.app(target=main)

属性

clip_behavior

内容将根据此选项进行裁剪。请参阅 ClipBehavior 了解可能的值。

默认值为 ClipBehavior.NONE

color

卡片的背景颜色

content

要在卡片中显示的控件。

此控件只能有一个子控件。要布局多个子控件,请让此控件的子控件为具有子属性的控件,例如RowColumnStack,然后将子控件提供给该控件。

elevation

控制卡片下方阴影的大小。默认值为 1.0

is_semantic_container

如果此卡片表示单个语义容器,则设置为 True(默认值),如果表示一组单独的语义节点(不同类型的内容),则设置为 False

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