HarmonyOS开发实战：小分享-最近使用横向列表——三栏均分布局

发布时间：2026/10/27 3:55:29

HarmonyOS开发实战：小分享-最近使用横向列表——三栏均分布局
前言最近使用列表是首页常见的功能模块用于展示用户最近操作过的内容方便快速重复访问。本篇以小分享 App 的 HomePage 最近使用区为例讲解三栏均分布局、文字省略、SpaceBetween分散对齐等核心技巧。详细 API 可参考 HarmonyOS Row 官方文档。一、最近使用完整代码1.1 数据定义private recentItems: ArrayRecentItem [ { title: 生活的美好, image: ️ }, { title: 山川湖海, image: }, { title: 天地有爱, image: } ];1.2 接口定义export interface RecentItem { title: string; // 标题 image: string; // 图片 Emoji }1.3 渲染代码Column({ space: 12 }) { Row() { Text(最近使用) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#1A1A1A) .layoutWeight(1) Text(›) .fontSize(18) .fontColor(#CCCCCC) } .width(100%) .padding({ left: 16, right: 16 }) Row({ space: 12 }) { ForEach(this.recentItems, (item: RecentItem, index: number) { Column() { Column() { Text(item.image) .fontSize(40) } .width(100%) .height(120) .backgroundColor(#F0F0F0) .borderRadius(12) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) Text(item.title) .fontSize(12) .fontColor(#666666) .margin({ top: 8 }) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .width(30%) .alignItems(HorizontalAlign.Center) }, (item: RecentItem, index: number) ${item.title}) } .width(100%) .padding({ left: 16, right: 16 }) .justifyContent(FlexAlign.SpaceBetween) }二、三栏均分布局2.1 宽度分配每栏宽度 30%三栏合计 90%剩余 10% 用于 Row 的space: 12Row 总宽 100% ├─ Column.width(30%) → 栏 1 │ space: 12 ├─ Column.width(30%) → 栏 2 │ space: 12 └─ Column.width(30%) → 栏 32.2 宽度分配方案对比方案总宽度间距适用场景30% × 390%10% 空间三栏均分33% × 399%1% 空间紧凑三栏50% × 2100%0 空间两栏均分25% × 4100%0 空间四栏均分2.3 SpaceBetween 分散对齐justifyContent(FlexAlign.SpaceBetween)让三栏在 Row 内均匀分布Row({ space: 12 }) { // 三栏内容 } .justifyContent(FlexAlign.SpaceBetween)三、文字省略处理3.1 完整代码Text(item.title) .fontSize(12) .fontColor(#666666) .margin({ top: 8 }) .maxLines(1) // 最多 1 行 .textOverflow({ overflow: TextOverflow.Ellipsis }) // 溢出省略号3.2 文字溢出处理方案方案代码效果省略号TextOverflow.Ellipsis文字溢出显示…裁剪TextOverflow.Clip直接裁剪多余文字不处理不设置可能会导致布局溢出3.3 多行省略Text(item.content) .maxLines(2) // 最多 2 行 .textOverflow({ overflow: TextOverflow.Ellipsis })四、标题行设计4.1 完整代码Row() { Text(最近使用) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#1A1A1A) .layoutWeight(1) Text(›) .fontSize(18) .fontColor(#CCCCCC) } .width(100%) .padding({ left: 16, right: 16 })4.2 标题行布局layoutWeight(1)让标题文字撑开›箭头符号固定在右侧Row 总宽 100% ├─ Text(最近使用) → layoutWeight(1) 撑开 └─ Text(›) → 右侧固定4.3 箭头符号设计›箭头符号Unicode U203A表示「更多」入口后期可扩展为点击跳转到详情页。五、图片占位区设计5.1 完整代码Column() { Text(item.image) .fontSize(40) } .width(100%) .height(120) .backgroundColor(#F0F0F0) .borderRadius(12) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center)5.2 设计要点设计要点如下尺寸100% × 120vp宽高比约 3:4背景色#F0F0F0浅灰作为占位色圆角12vp与卡片风格一致居中justifyContent CenteralignItems Center六、完整卡片布局6.1 卡片结构Column (30% 宽度) ├─ Column (图片占位区 100% × 120) │ └─ Text(Emoji) 40px └─ Text(标题) 12px 灰色6.2 间距控制间距值作用标题行 space12标题行与列表间距Row space12三栏之间间距图片与标题 margin8图片与文字间距6.3 交互反馈未来可添加点击跳转Column() .onClick(() { router.pushUrl({ url: pages/PreviewPage, params: { title: item.title } }) })七、扩展思考7.1 动态数据当前数据是硬编码的后续可从本地存储读取State recentItems: ArrayRecentItem []; aboutToAppear(): void { this.recentItems this.getRecentItems(); } private getRecentItems(): ArrayRecentItem { // 从 AppStorage 或 Preferences 读取 return JSON.parse(AppStorage.get(recent_items) || []); }7.2 横向滚动如果最近使用项超过 3 个可以改为横向 ScrollScroll() { Row({ space: 12 }) { ForEach(this.recentItems, (item, index) { // 每项 width(120) 固定宽度 }, (item) item.title) } } .scrollable(ScrollDirection.Horizontal)7.3 空状态处理当没有最近使用记录时显示空状态提示if (this.recentItems.length 0) { Text(暂无最近使用记录) .fontSize(14) .fontColor(#999999) .padding({ top: 40 }) }八、本篇核心知识点8.1 三栏布局核心要点三栏布局核心要点总结如下width(30%)每栏宽度justifyContent(SpaceBetween)分散对齐Row({ space: 12 })控制间距三栏合计 90%剩余用于间距8.2 文字省略处理文字省略处理要点总结如下maxLines(1)限制行数textOverflow({ overflow: TextOverflow.Ellipsis })省略号8.3 实战开发要点实战开发中需要重点关注以下几个要点百分比宽度确保响应式文字溢出必须处理避免布局错乱标题行留「更多」入口后续可扩展为横向滚动总结本文详细讲解了最近使用横向列表的三栏均分布局、文字省略处理、标题行设计、图片占位区等核心技巧。下一篇我们将看 BottomTabBar 自定义底部导航栏组件抽取。附录完整实现细节1. 核心 API 参考API作用说明本文涉及的核心 API功能实现参见华为官方文档2. 完整代码示例// 核心功能代码 // 详见正文中的完整实现3. 常见问题排查问题原因解决方案编译错误import 路径错误检查路径和 API 版本运行时异常参数不合法使用 try/catch 捕获性能问题主线程耗时操作使用异步 API4. 最佳实践错误处理完善使用 try/catch 包裹资源及时释放避免内存泄漏异步操作使用 async/await权限配置完整按需申请5. 完整代码文件索引文件路径说明本文涉及的代码文件见正文6. 实现要点总结核心实现要点API 的正确使用方法和参数说明完整的代码实现流程常见问题的排查方案性能优化和安全建议7. 总结本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力

相关新闻

制造业订单处理自动化：RPA与AI融合实践

制造业订单处理自动化：RPA与AI融合实践

1. 项目背景与核心挑战去年接手了一个制造业客户的订单处理流程自动化改造项目，客户每天需要处理超过2000份来自不同渠道的采购订单。传统人工操作模式下，平均每单处理耗时8分钟，且错误率高达3%。更棘手的是，这些订单涉及ERP、CRM…

2026/10/27 17:49:46 阅读更多 →
AI模型随机数生成偏好：套壳API检测与行为指纹技术解析

AI模型随机数生成偏好：套壳API检测与行为指纹技术解析

这次我们来看一个很有意思的研究发现：布拉格经济大学的研究团队发现，AI模型在生成随机数时存在特定的"偏好"，这种偏好可以作为一种"行为指纹"来检测套壳API。简单来说，很多声称自研的AI服务可能只是对现有大模…

2026/10/27 9:59:57 阅读更多 →
LLM应用评估框架：从质量监控到生产部署的完整指南

LLM应用评估框架：从质量监控到生产部署的完整指南

最近在 Hacker News 上看到一个很有意思的讨论："Ask HN: If youre running LLM bots on HN, can you at least report results?" 这个话题之所以引发关注，是因为越来越多的人开始用大语言模型（LLM）自动生成内容、回答问…

2026/10/25 9:02:03 阅读更多 →

最新新闻

Electron桌面应用开发实战：从环境搭建到打包发布全流程

Electron桌面应用开发实战：从环境搭建到打包发布全流程

做前端这些年，我大部分时间都在跟浏览器标签页打交道，直到第一次把桌面应用跑起来，才发现原来自己一直被限制在地址栏和刷新按钮围起来的框框里。Electron这个词，最开始是在某段时间频繁出现在同事的讨论里，一个用HTML…

2026/10/27 17:33:32 阅读更多 →
滑盖智能锁T109深度解析：结构原理、安装调试与故障排查

滑盖智能锁T109深度解析：结构原理、安装调试与故障排查

简介：亚太天能T109滑盖智能锁产品说明书是一份PDF格式的官方技术文档，主要面向智能锁安装人员、终端用户及售后维护者，帮助快速掌握产品安装、配置与常见故障处理。全包仅1个PDF文件，大小4.37MB，内容结构清晰&#xff…

2026/10/27 4:06:49 阅读更多 →
PMSM弱磁控制原理与Simulink建模：高速AGV驱动系统设计指南

PMSM弱磁控制原理与Simulink建模：高速AGV驱动系统设计指南

上个月我在调试一台高速AGV的驱动系统，整车要求空载跑到8m/s，电机转速已经拉到额定点，驱动器的输出电压也顶到了母线电压极限附近。再往上踩速度指令，转速纹丝不动，三相电流反而开始震荡。那会儿我的第一反应就是&…

2026/10/27 7:21:53 阅读更多 →
C++核心知识点：从内存管理到STL的实战指南

C++核心知识点：从内存管理到STL的实战指南

C 这门语言我前前后后折腾了十几年，用它写过嵌入式驱动、做过游戏服务端，也搭过基础组件库。每次看到新人一头扎进"C 核心知识点"这个搜索词，我其实挺感慨的——这门语言的难点从来不是语法多，而是知识点之间的耦合太深…

2026/10/27 18:20:50 阅读更多 →
T109滑盖智能锁怎么装？安装调试与故障排查全攻略

T109滑盖智能锁怎么装？安装调试与故障排查全攻略

简介：亚太天能T109滑盖智能锁产品说明书以PDF格式发布，适合智能锁用户、安装人员与售后维修人员阅读。内容围绕T109系列指纹密码刷卡锁展开，先介绍前面板、后面板、锁体、机械钥匙、电池盒盖等部件名称与功能，再给出完整安装步骤&…

2026/10/27 6:20:47 阅读更多 →
LLM知识降熵：从信息垄断到理解权下放

LLM知识降熵：从信息垄断到理解权下放

你有没有过这种经历：翻开源码注释、论文摘要或者一份专业报告，每个字都认识，连在一起却像天书。想找人聊聊，身边要么没人懂，要么懂的懒得跟你解释。后来我试着把同一段内容丢给一个大语言模型，几秒钟之后&a…

2026/10/27 4:06:50 阅读更多 →

日新闻

周新闻

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/27 13:55:19 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/27 7:21:50 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/27 19:19:37 阅读更多 →