跳到主要内容

卡片

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

示例​

在线示例

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​

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

默认值为 ClipBehavior.NONE。

color​

卡片的背景颜色。

content​

要在卡片中显示的控件。

此控件只能有一个子控件。要布局多个子控件，请让此控件的子控件为具有子属性的控件，例如Row、Column或Stack，然后将子控件提供给该控件。

elevation​

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

is_semantic_container​

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

margin​

卡片周围的空白区域。

margin 属性的值可以是以下类型之一：

shadow_color​

用于绘制卡片下方阴影的颜色。

shape​

卡片的形状。

该值是OutlinedBorder类的实例。

默认形状是 RoundedRectangleBorder，半径为 4.0。

show_border_on_foreground​

如果应在 content 前面绘制边框的形状，则设置为 True（默认值），如果应在其后面绘制，则设置为 False。

surface_tint_color​

用于在 color 上作为覆盖的颜色，以指示海拔高度。

如果为 None，则不会应用覆盖。如果设置了此颜色，它将以与 elevation 相关的不透明度复合在 color 之上，并用于绘制卡片的背景。

默认值为 None。

variant​

定义要使用的卡片变体。值为 CardVariant 枚举：

  • ELEVATED - 默认变体
  • FILLED - 填充变体
  • OUTLINED - 轮廓变体