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 使用方法和最佳实践。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力