Skip to content

Card 卡片

将信息分组展示的容器组件。

实现原理

使用 Container 嵌套 Column 实现卡片布局,通过 MouseRegion 实现悬浮效果。

基础用法

基础的卡片容器,可以包含标题、内容和底部区域。

查看代码

简单卡片

只包含内容区域的简单卡片。

查看代码

图片卡片

包含图片的卡片展示。

查看代码

阴影效果

通过 shadow 属性设置卡片的阴影效果。

查看代码

API

Card 属性

属性名说明类型默认值
header卡片标题Widget-
footer卡片底部Widget-
child卡片内容Widget-
bodyStyle自定义卡片内容样式BoxDecoration-
headerClass自定义标题 CSS 类名String-
bodyClass自定义内容 CSS 类名String-
footerClass自定义底部 CSS 类名String-
shadow卡片阴影效果ECardShadowECardShadow.always
margin卡片外边距EdgeInsets-
padding卡片内边距EdgeInsetsEdgeInsets.all(16)
width卡片宽度double-
height卡片高度double-

Card 阴影类型

类型说明
always始终显示阴影
hover鼠标悬浮时显示阴影
never从不显示阴影
</rewritten_file>

基于 MIT 协议发布