Card
Card
是用于显示带有圆角和可选阴影的矩形内容容器。它通常用于构建用户界面,并可以包含标题、文本、图像、按钮等元素,表示界面上的可交互元素,我们称它是 “卡片”。
Card
使用的一些经典的场景:
- 列表数据,例如 新闻列表,产品列表等。
- 信息提示框,使用 Card 组件突出显示。
- 内容详情页卡片。
出上面列出的 3 中场景,还有其较多的场景可以使用卡片组件,这里不再一一列出。
Compose UI 库中定义了 3 种样式的卡片组件。分别是 Filled Card,Elevated Card,Outlined Card。3 种卡片的设计准则是一致的。
属性 | 值 |
---|---|
外形(shape) | 12dp 大小的圆角 |
左右内边距(left/right padding) | 16dp |
卡片组件之间的间距 | 最大 8dp |
标签对齐方式 | Start-aligned:靠左或靠右(在一些文字从右向左的国家) |
它们执行后的样式有所区别。
默认情况