当前位置： 首页 > news >正文

Compose UI 之 Card 卡片组件

news 2026/4/2 0:46:18

Card

Card 是用于显示带有圆角和可选阴影的矩形内容容器。它通常用于构建用户界面，并可以包含标题、文本、图像、按钮等元素，表示界面上的可交互元素，我们称它是 “卡片”。

Card 使用的一些经典的场景：

  • 列表数据，例如 新闻列表，产品列表等。
  • 信息提示框，使用 Card 组件突出显示。
  • 内容详情页卡片。

出上面列出的 3 中场景，还有其较多的场景可以使用卡片组件，这里不再一一列出。

Compose UI 库中定义了 3 种样式的卡片组件。分别是 Filled Card，Elevated Card，Outlined Card。3 种卡片的设计准则是一致的。

Compose-Card_measures.png

属性值
外形（shape）12dp 大小的圆角
左右内边距（left/right padding）16dp
卡片组件之间的间距最大 8dp
标签对齐方式Start-aligned：靠左或靠右（在一些文字从右向左的国家）

它们执行后的样式有所区别。

默认情况

相关文章：

Compose UI 之 Card 卡片组件

Card Card 是用于显示带有圆角和可选阴影的矩形内容容器。它通常用于构建用户界面，并可以包含标题、文本、图像、按钮等元素，表示界面上的可交互元素，我们称它是 “卡片”。 Card 使用的一些经典的场景： 列表数据，例如 新闻列表，产品列表等。信息提示框，使用 Card 组件…...

编程日记 2024/4/12 10:00:33

ELK日志

​​​​​​​...

编程日记 2024/4/12 9:59:32

WPF Pack

在WPF中，Pack URI（Uniform Resource Identifier）是一种特殊格式的统一资源标识符，用于定位和访问应用程序内部或外部的各种资源，如XAML文件、图像、样式、字体等。这种机制允许开发者以标准化、平台无关的方式引用和打…...

编程日记 2024/4/12 9:58:30

计算两个时间段的差值

计算两个时间段的差值 运行效果&#xff1a; 代码实现&#xff1a; #include<stdio.h>typedef struct {int h; // 时int m; // 分int s; // 秒 }Time;void fun(Time T[2], Time& diff) {int sum_s[2] { 0 }; for (int i 0; i < 1; i) { // 统一为秒数sum_s[…...

编程日记 2024/4/12 9:57:28

Element Plus 表单校验

原理 为 rules 属性传入约定的验证规则&#xff0c;并将 form-Item 的 prop 属性设置为需要验证的特殊键值:model和:rules中字段的名称需要一致 示例&#xff1a; <template><el-form ref"ruleFormRef" :model"ruleForm" :rules"rules&q…...

编程日记 2024/4/12 9:55:25

java实现TCP交互

服务器端 import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; import java.util.PriorityQueue; import java.util.Scanner;public class TCP_Serv…...

编程日记 2024/4/12 9:54:23

学习云计算HCIE选择誉天有什么优势？

誉天云计算课程优势实战性强 课程注重实践操作&#xff0c;通过实际案例和实验操作&#xff0c;让学员深入了解云计算的应用场景和实际操作技能。课程内容全面 涵盖所有云计算涉及的IT基础知识、服务器、存储、网络等方面的基础知识&#xff0c;开源操作系统Linux&#xff0c;开…...

编程日记 2024/4/12 9:52:20

python之文件操作与管理

1、文件操作 通过open&#xff08;&#xff09;操作&#xff0c;来创建文件对象&#xff0c;下面是open&#xff08;&#xff09;函数语法如下&#xff1a; open&#xff08;file,mode r,buffering -1 , encoding None ,errors None , newline None,closefd True,opener …...

编程日记 2024/4/12 9:50:18

大厂Java笔试题之对完全数的处理

题目&#xff1a;完全数&#xff08;Perfect number&#xff09;&#xff0c;又称完美数或完备数&#xff0c;是一些特殊的自然数。 它所有的真因子&#xff08;即除了自身以外的约数&#xff09;的和&#xff08;即因子函数&#xff09;&#xff0c;恰好等于它本身。 例如&…...

编程日记 2024/4/12 9:46:14

【Redis深度解析】揭秘Cluster（集群）：原理、机制与实战优化

Redis Cluster是Redis官方提供的分布式解决方案&#xff0c;通过数据分片与节点间通信机制&#xff0c;实现了水平扩展、高可用与数据容灾。本文将深入剖析Redis Cluster的工作原理、核心机制&#xff0c;并结合实战经验分享优化策略&#xff0c;为您打造坚实可靠的Redis分布式…...

编程日记 2024/4/12 9:42:09

【JAVA基础篇教学】第六篇：Java异常处理

博主打算从0-1讲解下java基础教学&#xff0c;今天教学第五篇&#xff1a; Java异常处理。 异常处理是Java编程中重要的一部分&#xff0c;它允许开发人员在程序运行时检测和处理各种错误情况&#xff0c;以保证程序的稳定性和可靠性。在Java中&#xff0c;异常被表示为对象&am…...

编程日记 2024/4/12 9:39:06

【ubuntu20.04】安装GeographicLib

下载地址 GeographicLib: Installing GeographicLib 我们是ubuntu20.04 &#xff0c;所以下载第一个 GeographicLib-2.3.tar.gz 接着跟着官方步骤安装&#xff0c;会出错&#xff01;&#xff01;&#xff01;&#xff01;马的 官方错误示例&#xff1a;tar xfpz Geographi…...

编程日记 2024/4/12 9:38:01

从0开始搭建基于VUE的前端项目(四) Vue-Router的使用与配置

版本 vue-router 3.6.5 (https://v3.router.vuejs.org/zh/) 安装 安装要指定版本&#xff0c;默认安装的4版本的 npm install vue-router3.6.5代码实现 在src目录下创建router目录 router/index.js import Vue from vue import Router from vue-routerVue.use(Router)con…...

编程日记 2024/4/12 9:33:56

力扣爆刷第117天之CodeTop100五连刷71-75

力扣爆刷第117天之CodeTop100五连刷71-75 文章目录 力扣爆刷第117天之CodeTop100五连刷71-75一、48. 旋转图像二、39. 组合总和三、113. 路径总和 II四、34. 在排序数组中查找元素的第一个和最后一个位置五、394. 字符串解码 一、48. 旋转图像 题目链接&#xff1a;https://le…...

编程日记 2024/4/12 9:30:50

ActiveMQ入门案例（queue模式和topic模式）

目录 前言&#xff1a;为什么使用消息中间件&#xff1f; 异步通信 缓冲 解耦 前提&#xff1a;安装并启动activemq 一、点对点&#xff08;point to point&#xff0c; queue&#xff09; 1.1 创建maven项目 1.2 Pom依赖 1.2 JmsProduce 消息生产者 1.3 JmsConsumer…...

编程日记 2024/4/12 9:26:44

2024年最新云服务器ECS租用报价费用表-阿里云

阿里云服务器租用价格表2024年最新&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;ECS u1服务器2核4G5M固定带宽199元一年&#xff0c;2核4G4M带宽轻量服务器一年165元12个月&#xff0c;2核…...

编程日记 2024/4/12 9:23:41

第四百五十四回

文章目录 1. 问题描述2. 优化方法2.1 缩小范围2.2 替代方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何获取AppBar的高度"相关的内容&#xff0c;本章回中将介绍关于MediaQuery的优化.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 问题描述 我们在…...

编程日记 2024/4/12 9:19:36

蓝桥杯算法题：蓝桥骑士

题目描述 小明是蓝桥王国的骑士&#xff0c;他喜欢不断突破自我。 这天蓝桥国王给他安排了 N 个对手&#xff0c;他们的战力值分别为 a_1,a_2,…,a_n&#xff0c;且按顺序阻挡在小明的前方。对于这些对手小明可以选择挑战&#xff0c;也可以选择避战。 身为高傲的骑士&#xff…...

编程日记 2024/4/12 9:18:34

sonar搭建（linux系统）

前景 静态代码扫描是CI/CD中重要的一环&#xff0c;可以在代码提交到代码仓库之后&#xff0c;在CI/CD流程中加入代码扫描步骤&#xff0c;从而及时地对代码进行质量的检查。这可以有效地降低后期维护成本&#xff0c;优化产品质量&#xff0c;提高产品交付速度。同时&#xf…...

编程日记 2024/4/12 9:17:33

中科软面试题

1、用户注册登录这一块用了哪些技术&#xff1f;数据库主要涉及那些表&#xff1f; 用了BCrypt加密算法&#xff0c;jwt生成token&#xff0c;网关实现全局过滤器校验token&#xff0c;还用了拦截器&#xff0c;获取在网关是指到请求头的userid存到threadlocal里面&#xff0c…...

编程日记 2024/4/12 9:14:30

IDEA插件MyBatisX实战：3分钟搞定SpringBoot项目CRUD代码生成

MyBatisX插件全流程实战&#xff1a;SpringBoot项目CRUD代码生成效率革命 在快节奏的企业级开发中&#xff0c;重复编写基础CRUD代码就像在键盘上跳机械舞——动作标准却毫无新意。当项目包含20张以上数据表时&#xff0c;手动创建Entity、Mapper、Service等层级代码会消耗开发…...

编程新知 2026/4/2 0:12:46

intv_ai_mk11镜像部署教程：3条命令完成服务启动、状态检查、日志监控

intv_ai_mk11镜像部署教程&#xff1a;3条命令完成服务启动、状态检查、日志监控 1. 快速了解intv_ai_mk11 intv_ai_mk11是一款基于7B参数Llama架构的AI对话机器人&#xff0c;它能帮助你完成各种任务&#xff1a; 回答各类问题&#xff08;技术、生活、知识等&#xff09;辅…...

编程新知 2026/4/1 23:54:37

PasteMD用户调研报告：2024年文档格式转换需求分析

PasteMD用户调研报告&#xff1a;2024年文档格式转换需求分析 1. 调研背景与核心发现 最近整理了500份来自不同行业用户的实际反馈&#xff0c;这些反馈不是问卷里的标准答案&#xff0c;而是真实工作场景中留下的痕迹——有深夜赶论文时的抱怨截图&#xff0c;有项目汇报前的…...

编程新知 2026/4/1 23:40:29

3个高效功能让视频创作者轻松生成专业字幕

3个高效功能让视频创作者轻松生成专业字幕 【免费下载链接】video-srt-windows 这是一个可以识别视频语音自动生成字幕SRT文件的开源 Windows-GUI 软件工具。 项目地址: https://gitcode.com/gh_mirrors/vi/video-srt-windows 工具概述 VideoSrt是一款基于Golang开发的…...

编程新知 2026/4/1 20:56:05

FinalShell v4.5.12 安装避坑指南：为什么你的远程连接总是失败？

FinalShell 4.5.12 高效配置手册&#xff1a;从安装到稳定连接的进阶实践 远程终端工具的选择往往决定了运维效率的天花板。作为一款集SSH连接、文件传输、性能监控于一体的全能型工具&#xff0c;FinalShell近年来在开发者社区中积累了不错的口碑。但不少用户在初次接触时&…...

编程新知 2026/4/1 18:34:20

自指宇宙学形式化验证套件 (Coq‑SRU v1.2.0)

自指宇宙学形式化验证套件 (Coq‑SRU v1.2.0)技术摘要 正式整编版 项目标识&#xff1a;Coq Formalization of Self‑Referential Universe (Coq‑SRU) 版本&#xff1a;v1.2.0&#xff08;对齐《世毫九自指宇宙学》理论第三部分&#xff09; 代码仓库&#xff1a;https://git…...

编程新知 2026/4/1 17:27:00

零域名部署实战：阿里云ECS与宝塔面板的IP直连建站指南

1. 为什么选择IP直连建站&#xff1f; 很多刚接触服务器部署的朋友可能会疑惑&#xff1a;为什么不用域名直接访问网站&#xff1f;其实IP直连建站特别适合以下几种场景。比如你正在开发一个内部测试项目&#xff0c;需要快速让团队成员查看效果&#xff1b;或者你要给客户演示…...

编程新知 2026/4/1 15:58:30

2026专业护眼产品深度评测：告别眼干涩疲劳，哪款才是“医用级“长效养护的选择？

屏幕时代&#xff0c;眼睛正在为我们的工作和生活"买单"。从早起看手机的那一刻&#xff0c;到深夜关灯前最后一次刷屏&#xff0c;多数人每天面对电子屏幕的时间早已超过10小时。干涩、疲劳、视力模糊、异物感……这些曾经只出现在中老年人身上的困扰&#xff0c;正…...

编程新知 2026/4/1 15:05:29

从RTL到GDSII：用Design Compiler优化时序的关键20个命令详解

从RTL到GDSII&#xff1a;用Design Compiler优化时序的关键20个命令详解 在先进工艺节点下&#xff0c;时序收敛已成为ASIC设计中最具挑战性的环节之一。当我们从RTL代码出发&#xff0c;最终生成满足PPA&#xff08;性能/功耗/面积&#xff09;目标的GDSII布局布线文件时&…...

编程新知 2026/4/1 13:18:53

D3KeyHelper：暗黑3效率提升工具的全方位应用指南

D3KeyHelper&#xff1a;暗黑3效率提升工具的全方位应用指南 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面&#xff0c;可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper D3KeyHelper是一款开源的暗黑3鼠标宏工具…...

编程新知 2026/4/1 12:58:29