前言前面我们用layoutWeight让 HUD 三栏按 2:1:2 比例分宽——屏宽变化时各栏同比例缩放。但有个新问题窄屏折叠屏合屏、小尺寸手机时连击栏被挤成一条缝文字溢出截断。我们想要的是宽屏三栏全显示窄屏自动隐藏低优先级的连击栏只留得分和时间。HarmonyOS 提供了displayPriority优先级布局——给每个子组件设一个优先级容器空间不足时自动隐藏低优先级组件。本篇以「猫猫大作战」HUD 窄屏适配为锚点把displayPriority的优先级机制、隐藏触发条件、与 layoutWeight 搭配三大要点讲透。提示本系列不讲 ArkTS 基础语法与环境搭建假设你已跟完第 1–23 篇。本篇是布局进阶的第四篇。一、场景拆解HUD 窄屏适配回顾「猫猫大作战」HUD第 23 篇// 来源entry/src/main/ets/pages/Index.ets GameHUD() 改造版 Row() { Column() { Text(得分); Text(score) } .layoutWeight(2) Row() { Text( x${combo}) } .layoutWeight(1) Column() { Text(时间); Text(time) } .layoutWeight(2) } .width(100%)痛点屏宽得分栏连击栏时间栏视觉360vp宽屏144vp72vp144vp✅ 三栏舒服280vp窄屏112vp56vp112vp❌ 连击栏 56vp 文字溢出200vp超窄80vp40vp80vp❌ 连击栏 40vp 几乎看不见我们想要屏宽 300vp 时自动隐藏连击栏得分和时间平分宽度。displayPriority的解法Row() { Column() { /* 得分 */ }.layoutWeight(2).displayPriority(1) Row() { /* 连击 */ }.layoutWeight(1).displayPriority(2) // 优先级低先被隐藏 Column() { /* 时间 */ }.layoutWeight(2).displayPriority(1) } .width(100%)关键经验displayPriority值越大优先级越低容器空间不足时先隐藏低优先级高数值组件。二、displayPriority 优先级机制2.1 优先级数值含义.displayPriority(N) // N 是正整数N 值含义隐藏顺序1最高优先级最后被隐藏2次高优先级第 2 个被隐藏3中等优先级第 3 个被隐藏N优先级随 N 增大而降低—规则容器空间不足时按displayPriority从大到小依次隐藏同优先级的组件一起隐藏或一起显示。2.2 隐藏触发条件displayPriority不是「屏宽小于某个值就隐藏」而是更智能的自适应隐藏容器宽度 - 所有组件最小宽度之和 0 → 开始隐藏低优先级组件最小宽度来自组件的width、内容宽度、constraintSize.minWidth等。举例HUD 三栏组件最小宽度displayPriority得分栏100vp1连击栏60vp2时间栏100vp1容器宽度变化时的行为容器宽度最小宽度和是否够行为360vp260vp✅三栏全显示280vp260vp✅ 勉强三栏全显示各栏接近最小宽200vp260vp❌ 差 60vp隐藏连击栏省 60vp剩得分时间2.3 与 layoutWeight 的关系Row() { Column() { /* 得分 */ }.layoutWeight(2).displayPriority(1) Row() { /* 连击 */ }.layoutWeight(1).displayPriority(2) Column() { /* 时间 */ }.layoutWeight(2).displayPriority(1) } .width(100%)执行顺序先评估displayPriority——决定哪些组件显示、哪些隐藏。再算layoutWeight——对显示的组件按权重分宽。关键经验displayPriority决定「显示与否」layoutWeight决定「显示后分多少宽」——两者协同工作。三、用 displayPriority 改造 HUD3.1 改造为窄屏自适应隐藏Builder GameHUD() { Row() { // 左得分最高优先级永远显示 Column() { Text(得分) .fontSize(11) .fontColor(#95A5A6) Text(this.score.toString()) .fontSize(22) .fontWeight(FontWeight.Bold) .fontColor(#2C3E50) } .layoutWeight(2) .displayPriority(1) // 优先级 1最后被隐藏 .alignItems(HorizontalAlign.Start) // 中连击低优先级窄屏先隐藏 if (this.combo.count 1) { Row() { Text( x${this.combo.multiplier}) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#E74C3C) } .layoutWeight(1) .displayPriority(2) // 优先级 2窄屏先隐藏 .justifyContent(FlexAlign.Center) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .backgroundColor(rgba(231, 76, 60, 0.1)) .borderRadius(16) } // 右时间最高优先级永远显示 Column() { Text(时间) .fontSize(11) .fontColor(#95A5A6) Text(this.formatTime(this.gameTime)) .fontSize(18) .fontWeight(FontWeight.Medium) .fontColor(#2C3E50) } .layoutWeight(2) .displayPriority(1) // 优先级 1最后被隐藏 .alignItems(HorizontalAlign.End) } .width(100%) .padding({ left: 20, right: 20, top: 12, bottom: 8 }) }改造效果屏宽得分连击时间行为≥ 300vp2/51/52/5✅ 三栏全显示 300vp1/2❌隐藏1/2✅ 连击隐藏得分时间平分3.2 关键连击栏 displayPriority(2).displayPriority(2) // 数值大 优先级低 先被隐藏逻辑连击是「锦上添花」信息连击数 倍率得分和时间是「必须可见」的核心信息。窄屏时优先隐藏连击。3.3 隐藏后的宽度重分配连击栏隐藏后Row 重新计算layoutWeight// 隐藏前2 1 2 5得分 2/5、连击 1/5、时间 2/5 // 隐藏后2 2 4得分 2/41/2、时间 2/41/2得分和时间各占 50% 宽度布局自动重平衡。四、displayPriority 多组件场景4.1 场景游戏结束弹窗 4 个统计项// 来源entry/src/main/ets/pages/Index.ets GameOverOverlay() Row() { this.StatItem(时间, this.formatTime(this.gameTime)) this.StatItem(合并, ${this.mergeCount}次) this.StatItem(最高连击, x${this.maxCombo}) } .width(100%) .justifyContent(FlexAlign.SpaceEvenly)3 个统计项平铺窄屏时文字会重叠。用displayPriority让低优先级的「最高连击」先隐藏Row() { this.StatItem(时间, this.formatTime(this.gameTime)) .displayPriority(1) // 必须时间永远显示 this.StatItem(合并, ${this.mergeCount}次) .displayPriority(2) // 次要窄屏第 2 个隐藏 this.StatItem(最高连击, x${this.maxCombo}) .displayPriority(3) // 最次要窄屏第 1 个隐藏 } .width(100%) .justifyContent(FlexAlign.SpaceEvenly)窄屏隐藏顺序屏宽时间合并最高连击行为宽屏✅✅✅全显示中屏✅✅❌隐藏最高连击窄屏✅❌❌隐藏合并 最高连击4.2 同优先级组件Row() { Text(A).displayPriority(1) Text(B).displayPriority(1) // 与 A 同优先级 Text(C).displayPriority(2) // 低优先级 } // 窄屏时 C 先隐藏再窄时 A、B 一起隐藏关键经验同优先级组件「同生共死」——要么一起显示要么一起隐藏。五、displayPriority vs visibility vs if/elseArkUI 有三种「隐藏组件」的方式容易混淆5.1 三者对比方式触发占布局空间适合displayPriority容器空间不足自动触发隐藏后不占其他组件重分配自适应窄屏visibility(Visibility.Hidden)开发者手动设隐藏后仍占空间条件占位if/else条件渲染隐藏后不占但需重新渲染状态切换5.2 场景对照// 场景 1窄屏自动隐藏连击 → displayPriority Row() { Column().displayPriority(1) Row().displayPriority(2) // 窄屏自动隐藏 Column().displayPriority(1) } // 场景 2加载时占位但不显示 → visibility Text(加载中...).visibility(this.isLoading ? Visibility.Visible : Visibility.Hidden) // 场景 3登录态切换不同界面 → if/else if (this.isLoggedIn) { MainPage() } else { LoginPage() }关键经验displayPriority是唯一的「自适应」隐藏——其他两种都是开发者显式控制。5.3 displayPriority 的局限displayPriority只能「隐藏」不能「折叠样式」——比如窄屏时想把三栏改成纵向排列displayPriority做不到得用响应式布局GridRow/GridCol本系列第 88 篇会讲。六、完整代码displayPriority 版 HUD// 改造版用 displayPriority 让窄屏自动隐藏连击栏 Builder GameHUD() { Row() { // 左得分最高优先级永远显示 Column() { Text(得分) .fontSize(11) .fontColor(#95A5A6) Text(this.score.toString()) .fontSize(22) .fontWeight(FontWeight.Bold) .fontColor(#2C3E50) } .layoutWeight(2) .displayPriority(1) .alignItems(HorizontalAlign.Start) // 中连击低优先级窄屏先隐藏 if (this.combo.count 1) { Row() { Text( x${this.combo.multiplier}) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#E74C3C) } .layoutWeight(1) .displayPriority(2) .justifyContent(FlexAlign.Center) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .backgroundColor(rgba(231, 76, 60, 0.1)) .borderRadius(16) } // 右时间最高优先级永远显示 Column() { Text(时间) .fontSize(11) .fontColor(#95A5A6) Text(this.formatTime(this.gameTime)) .fontSize(18) .fontWeight(FontWeight.Medium) .fontColor(#2C3E50) } .layoutWeight(2) .displayPriority(1) .alignItems(HorizontalAlign.End) } .width(100%) .padding({ left: 20, right: 20, top: 12, bottom: 8 }) }七、踩坑提示7.1 displayPriority 与 width 冲突// ❌ 错误固定 width displayPrioritywidth 优先displayPriority 不触发 Text(A).width(80).displayPriority(2) // ✅ 正确displayPriority 配合 layoutWeight 或不设 width Text(A).layoutWeight(1).displayPriority(2)7.2 所有组件同 displayPriority// ⚠️ 全部 displayPriority(1)同优先级窄屏一起隐藏 Row() { Text(A).displayPriority(1) Text(B).displayPriority(1) Text(C).displayPriority(1) } // 窄屏时 A、B、C 一起消失HUD 变空白解法核心信息设displayPriority(1)次要信息设更高数值。7.3 displayPriority 不触发// 现象屏宽已经很窄但连击栏还在显示 // 排查连击栏最小宽度可能很小文字短容器空间够不触发隐藏 // 解法用 constraintSize 设最小宽度强制触发 Row().constraintSize({ minWidth: 80 }).displayPriority(2)八、调试技巧DevEco 多设备预览同时看手机/折叠屏/平板预览验证不同屏宽下的隐藏行为。临时加背景色给每个 displayPriority 组件加不同背景色看清隐藏顺序。console.info监屏宽window.on(windowSizeChange)打 log追屏宽变化与隐藏触发点。九、性能与最佳实践窄屏自适应用displayPriority——比手动 if/else 响应屏宽更优雅。核心信息 displayPriority(1)次要信息递增——保证核心永远可见。displayPriority 配 layoutWeight——隐藏后剩余组件按权重重新分配。同优先级组件同生共死——要么一起显示要么一起隐藏。需要重新排列横→竖用 GridRow——displayPriority 只能隐藏不能重排。总结本篇我们从 displayPriority 切入掌握了优先级数值含义大值低优先级先隐藏、隐藏触发条件容器空间不足时、与 layoutWeight/visibility/if-else 的取舍三大要点并给出了 displayPriority 版 HUD 完整代码。核心要点displayPriority 自适应窄屏隐藏核心信息优先级 1隐藏后 layoutWeight 重分配。下一篇我们将拆解 Scroller——长内容滚动容器。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源「猫猫大作战」项目源码本仓库entry/src/main/ets/pages/Index.etsdisplayPriority 优先级布局官方指南visibility 显隐控制官方指南多端布局自适应最佳实践开源鸿蒙跨平台社区HarmonyOS 开发者官方文档首页系列索引本仓库articles/INDEX.md