前言在萌宠日记的首页中今日记录卡片用于展示用户当天的日记摘要包含时间、标题、正文预览、照片缩略图等要素。其中文本溢出处理是一个关键细节 — 当正文内容超出卡片区域时如何优雅地截断并显示省略号保持布局整洁。本文将从萌宠日记的今日记录卡片实现出发深入解析文本截断、多行溢出、缩略图布局以及卡片内容组织等关键技术。一、今日记录卡片整体设计1.1 卡片结构┌─────────────────────────────────────┐ │ 今日记录 10:30 │ ← 标题行 ├─────────────────────────────────────┤ │ 愉快的一天 │ ← 日记标题加粗 │ 今天带豆豆去公园散步开心地跑 │ ← 正文预览最多2行省略号 │ 来跑去... │ │ ┌────┐ ┌────┐ ┌────┐ │ ← 照片缩略图 │ │ │ │ │ │ │ │ │ └────┘ └────┘ └────┘ │ └─────────────────────────────────────┘1.2 完整代码// HomePage.ets — 今日记录卡片 Column({ space: 12 }) { // 标题行 Row() { Text(今日记录) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333333) Blank() Text(10:30) .fontSize(12) .fontColor(#999999) } .width(100%) // 记录内容卡片 Column({ space: 8 }) { // 日记标题 Text(愉快的一天) .fontSize(15) .fontWeight(FontWeight.Medium) .fontColor(#333333) .width(100%) // 正文预览 Text(今天带豆豆去公园散步开心地跑来跑去还遇到了好朋友...) .fontSize(13) .fontColor(#666666) .width(100%) .maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) // 照片缩略图 Row({ space: 8 }) { ForEach([0, 1, 2], (_: number) { Column() { Text().fontSize(24) } .width(72).height(72) .backgroundColor(#FFF3E0) .borderRadius(12) .justifyContent(FlexAlign.Center) }) } .width(100%) } .width(100%) .padding(16) .backgroundColor(#FFFFFF) .borderRadius(12) } .width(100%) .padding({ left: 16, right: 16 })提示maxLines和textOverflow是 Text 组件中控制文本溢出的两个核心属性maxLines限制最大行数textOverflow定义溢出时的处理方式省略号、截断等。二、文本溢出处理2.1 核心属性Text(今天带豆豆去公园散步开心地跑来跑去还遇到了好朋友...) .fontSize(13) .fontColor(#666666) .width(100%) .maxLines(2) // 最多显示 2 行 .textOverflow({ overflow: TextOverflow.Ellipsis }) // 溢出时显示省略号2.2 文本溢出模式TextOverflow枚举支持三种溢出模式模式效果说明TextOverflow.Ellipsis显示省略号...✅ 萌宠日记使用适合内容预览TextOverflow.Clip直接截断适合精确控制宽度TextOverflow.None不处理内容溢出默认行为不推荐2.3 多行文本截断// 单行截断 Text(长文本内容...) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) // 两行截断萌宠日记使用 Text(长文本内容...) .maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) // 三行截断 Text(长文本内容...) .maxLines(3) .textOverflow({ overflow: TextOverflow.Ellipsis })三、标题行布局3.1 标题行结构Row() { Text(今日记录) // 左侧标题 .fontSize(16) .fontWeight(FontWeight.Bold) Blank() // 弹性占位将左右两侧分开 Text(10:30) // 右侧时间 .fontSize(12) .fontColor(#999999) } .width(100%)3.2 Blank() 的弹性占位Blank()组件会占据所有剩余空间将左右两侧的元素推到两端┌─────────────────────────────────────┐ │ 今日记录 Blank() 10:30 │ │ ← 固定宽度 → ← 弹性占位 → ← 固定宽度 → │ └─────────────────────────────────────┘四、内容卡片设计4.1 卡片嵌套// 外层标题行 内容卡片的 Column Column({ space: 12 }) { // 标题行 Row() { ... } // 内层白色卡片 Column({ space: 8 }) { // 标题、正文、缩略图 } .padding(16) .backgroundColor(#FFFFFF) .borderRadius(12) }4.2 嵌套卡片 vs 独立卡片对比维度嵌套卡片独立卡片结构层次标题在外卡片在内标题和内容在同一卡片视觉风格标题与卡片分离标题与卡片一体萌宠日记选择✅ 使用—五、照片缩略图布局5.1 缩略图网格Row({ space: 8 }) { ForEach([0, 1, 2], (_: number) { Column() { Text().fontSize(24) // Emoji 占位 } .width(72).height(72) .backgroundColor(#FFF3E0) .borderRadius(12) .justifyContent(FlexAlign.Center) }) } .width(100%)5.2 缩略图参数参数值说明尺寸72×72vp标准缩略图大小间距8vp缩略图之间的间距圆角12vp圆角矩形背景色#FFF3E0浅橙与主色调呼应数量3 张最多展示 3 张缩略图六、数据状态管理6.1 空状态处理// 当没有今日记录时显示提示文字 if (this.hasTodayRecord) { // 显示记录卡片 this.renderRecordCard() } else { // 显示空状态 Column() { Text(今天还没有记录哦~) .fontSize(14) .fontColor(#999999) Button(写一篇日记) .fontSize(13) .fontColor(#F5A623) .backgroundColor(#FFF3E0) .borderRadius(16) .margin({ top: 8 }) } .width(100%) .padding(24) .backgroundColor(#FFFFFF) .borderRadius(12) .alignItems(HorizontalAlign.Center) }6.2 数据加载状态State isLoading: boolean true State hasError: boolean false aboutToAppear(): void { this.loadTodayRecord() } loadTodayRecord(): void { this.isLoading true // 模拟数据加载 try { // 加载今日记录数据 this.isLoading false } catch (err) { this.hasError true this.isLoading false } }七、卡片点击交互7.1 点击跳转// 点击卡片跳转到日记详情 Column({ space: 8 }) { // 日记内容... } .width(100%) .padding(16) .backgroundColor(#FFFFFF) .borderRadius(12) .onClick(() { // 跳转到日记详情页 if (this.onNavigateToDiaryDetail) { this.onNavigateToDiaryDetail() } })7.2 点击反馈.onClick(() { // 点击跳转 }) .clickEffect({ level: ClickEffectLevel.LIGHT }) // 轻量点击涟漪八、卡片阴影与圆角8.1 阴影配置// 内层卡片未设置阴影保持简洁 .backgroundColor(#FFFFFF) .borderRadius(12) // 没有 shadow 属性与宠物信息卡片形成对比8.2 卡片样式对比卡片阴影圆角背景色用途宠物信息卡片✅ 有阴影16vp白色突出显示今日记录卡片❌ 无阴影12vp白色内容展示健康提醒卡片❌ 无阴影12vp白色列表项九、图片加载优化9.1 真实图片加载// 缩略图真实图片加载替代 Emoji 占位 Row({ space: 8 }) { ForEach(this.photos, (photo: PhotoInfo) { Image(photo.uri) .width(72) .height(72) .borderRadius(12) .objectFit(ImageFit.Cover) // 裁剪填充保持比例 .onLoad(() { console.log(Thumbnail loaded) }) .onError(() { // 加载失败显示占位图 }) }) }9.2 图片加载优化优化策略说明缩略图预加载提前加载缩略图减少等待时间懒加载只在可见区域加载图片内存缓存使用 Image 组件的默认缓存机制占位图加载失败时显示 Emoji 占位十、最佳实践10.1 文本溢出处理原则有序列表 — 文本溢出处理的 5 个原则maxLines 控制行数预览内容通常限制 2-3 行Ellipsis 省略号使用TextOverflow.Ellipsis提示更多内容width 100%Text 组件必须设置宽度溢出才能生效合理字号预览文字使用 13-14fp避免过大或过小与详情页衔接预览被截断点击后进入详情页查看完整内容10.2 萌宠日记今日记录卡片总结设计要素值说明标题行今日记录 时间左右分布日记标题15fp 加粗中等强调正文预览13fp, 2 行限制带省略号缩略图72×72, 3 张圆角 12vp内边距16vp内容与卡片边缘背景色白色与页面背景区分总结本文从萌宠日记的今日记录卡片实现出发深入解析了文本溢出处理和卡片布局的完整方法卡片结构标题行 内容卡片 照片缩略图文本溢出maxLines textOverflow 控制多行截断三种模式Ellipsis 省略号、Clip 截断、None 不处理标题行布局Row Blank 实现左右分布缩略图布局Row ForEach 渲染 3 张图片空状态处理无记录时显示提示和引导按钮点击交互点击卡片跳转详情页图片加载占位图、缓存、懒加载策略文本溢出处理是 UI 开发中常见但重要的细节合理的截断策略能让内容预览既简洁又完整。下一篇我们将深入健康提醒列表与动态数据绑定解析首页健康提醒区域的实现。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Text 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textTextOverflow 枚举https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textBlank 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-blankRow 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-rowImage 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image点击效果https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-click-effect图片加载优化https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/image-optimization卡片设计指南https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/design-cards