鸿蒙HarmonyOS 相对布局RelativeContainer

于 2025-06-27 20:19:36 发布
阅读量763 收藏 28
点赞数 15
CC 4.0 BY-SA版权
分类专栏： 鸿蒙harmonyos 鸿蒙开发 移动开发 文章标签： harmonyos 鸿蒙 鸿蒙开发 UI 组件化
原文链接：https://blog.csdn.net/ming_147/article/details/146103143

前言

代码案例基于Api13。

最新的DevEco Studio，在创建一个新项目的时候，官方已经默认把RelativeContainer组件做为根布局使用了，由此可见，RelativeContainer组件的重要性；相对于其它的容器组件，它的出现，解决了一个实际开发中的重要问题，那就是复杂场景中的元素对齐。

如下的组件之间的布局，如果没有RelativeContainer组件的情况下，我们该如何实现呢？显然需要嵌套很多容器组件，或者进行坐标定位才可以进行实现，有了RelativeContainer组件之后，我们就可以根据相对位置进行摆放就可以了。

相关代码实现：

RelativeContainer() {
      Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
 
      Text("组件2")
        .width(100)
        .height(100)
        .id("view_2")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Orange)
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })
 
      Text("组件3")
        .width(100)
        .height(100)
        .id("view_3")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Yellow)
        .alignRules({
          top: { anchor: "view_1", align: VerticalAlign.Bottom },
          left: { anchor: "view_1", align: HorizontalAlign.End },
          right: { anchor: "view_2", align: HorizontalAlign.Start }
        })
 
      Text("组件4")
        .width(100)
        .height(100)
        .id("view_4")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Blue)
        .alignRules({
          top: { anchor: "view_3", align: VerticalAlign.Bottom }
        })
 
      Text("组件5")
        .width(100)
        .height(100)
        .id("view_5")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Brown)
        .alignRules({
          top: { anchor: "view_3", align: VerticalAlign.Bottom },
          left: { anchor: "view_2", align: HorizontalAlign.Start }
        })
    }.width(300)

熟练运用RelativeContainer组件，也就是必须要知道相对位置的摆放，也就是相对谁，如何摆放。

使用规则

ID声明
B组件在A组件的右边，B组件如何知道A组件的位置呢？在相对布局中，通过给组件设置唯一标识id，来标记每一个组件，正如茫茫人海中，你的身份证就是你的唯一标识，设置id，非常重要，如果没有这个id，就会缺少对应的锚点组件，在相对布局中就无法实现位置的相对摆放。

Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
位置摆放

通过id我们确定了锚点组件，但是相对这个锚点组件，我们是在它的左边，右边，还是上边，下边，就需要控制其对应的位置。

通过alignRules属性来控制当前组件的位置，有左上右下，水平居中，垂直居中等属性，每个属性对应着有两个参数，一个是anchor参数，锚点组件，一个是align，也就是位置，代码格式如下：

 .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })

anchor设置为__container__，就是对应的是相对父组件，如果是确定的ID，那么就是ID对应的锚点组件。

align分为横向和纵向，水平方向为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End，分别代表的是，左中右，垂直方向为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom，代表着的是上中下。

居中案例

例举一个很简单的案例，让一个组件居中展示，那么就是相对于父容器设置，代码如下：

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
 
      Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })
 
    }
  }
}

效果如下图展示：

当然了，除了直接左上右下四个属性之外，我们有还可以直接设置水平居中和垂直居中属性，效果是一模一样的。

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
 
      Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center },
        })
    }
  }
}
锚点组件上边

在一个组件的上边，我们需要设置的是bottom属性，也就是底部在锚点组件的上边，然后结合锚点组件，在对应的设置其它属性，比如锚点组件是居中的，这里我们加了相对于父容器水平居中的属性middle。

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
 
      Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center },
        })
 
      Text("组件2")
        .width(100)
        .height(100)
        .id("view_2")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Orange)
        .alignRules({
          bottom: { anchor: "view_1", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
  }
}

效果如下，可以看到组件2已经设置在了组件1的上边。

锚点组件下边

组件的下边和上边其实是类似的，无非把bottom属性换成top属性，也就是顶部在锚点组件的下面。

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
 
      Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center },
        })
 
      Text("组件2")
        .width(100)
        .height(100)
        .id("view_2")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Orange)
        .alignRules({
          bottom: { anchor: "view_1", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
 
      Text("组件3")
        .width(100)
        .height(100)
        .id("view_3")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Yellow)
        .alignRules({
          top: { anchor: "view_1", align: VerticalAlign.Bottom },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
  }
}

效果如下，可以看到组件3已经在组件1的下边。

锚点组件左边

左边，这里使用的是right属性，也就是锚点组件在右边，相关代码如下：

Text("组件4")
        .width(100)
        .height(100)
        .id("view_4")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Pink)
        .alignRules({
          right: { anchor: "view_1", align: HorizontalAlign.Start },
          center: { anchor: "__container__", align: VerticalAlign.Center }
        })

我们看下效果，组件4在锚点组件1的左边。

锚点组件右边
右边，这里使用的是left属性，也就是锚点组件在左边，相关代码如下：

Text("组件5")
        .width(100)
        .height(100)
        .id("view_5")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Brown)
        .alignRules({
          left: { anchor: "view_1", align: HorizontalAlign.End },
          center: { anchor: "__container__", align: VerticalAlign.Center }
        })

我们看下效果，组件5在锚点组件1的右边。

对齐位置

对齐位置，主要是相对于锚点的组件的位置，我们用官方的解释图，如下：

在水平方向上，对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。

在竖直方向上，对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。

看到这如果还有不知道从哪里开始入手了解鸿蒙开发技术、想要更深的掌握鸿蒙开发技术知识点的朋友们，或者是转行求职人员还在为面试问题而犯难的，可以动动手指进来参考一下针对‌鸿蒙开发学习‌而设计的系统性学习方案，涵盖基础入门到进阶实战项目相关学习文档：【鸿蒙开发学习指南】https://docs.qq.com/doc/DSk9ZeU9RTUhETm53

相关总结

当然了，RelativeContainer组件还有着其它的属性，但是最重要的也就是位置的摆放，其实也就是相对于锚点组件的摆放；通过上述的案例，我们不难发现，所谓的左上右下，反着来就是对的，比如在锚点上边，我用bottom，在锚点下面，我用top，在实际的开发中，可极大节约我们的开发时间。

【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设置
Byyyi耀的博客
09-13 4151
【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设置
鸿蒙开发（20）Stack布局 和 RelativeContainer相对布局实现叠加居中
weixin_45299895的博客
12-25 590
堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。类似于以前我们前端布局的绝对定位，默认情况所有元素都叠在一起渲染。
鸿蒙开发：相对布局RelativeContainer
知足常乐
03-07 773
当然了，RelativeContainer组件还有着其它的属性，但是最重要的也就是位置的摆放，其实也就是相对于锚点组件的摆放；通过上述的案例，我们不难发现，所谓的左上右下，反着来就是对的，比如在锚点上边，我用bottom，在锚点下面，我用top，在实际的开发中，可极大节约我们的开发时间。
HarmonyOS鸿蒙学习笔记（25）相对布局 RelativeContainer详细说明
菜鸟博客
05-30 3173
RelativeContainer相对布局使用指南
鸿蒙NEXT版实战开发：UI框架-相对布局RelativeContainer，当子组件设置了margin时居中效果不符合预期？
qq_39652397的博客
11-10 526
相对布局RelativeContainer，当子组件设置了margin时居中效果不符合预期......
HarmonyOS 相对布局（RelativeContainer）
qq_36158551的博客
10-24 1242
RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依赖关系。
HarmonyOS Next开发学习手册——相对布局 (RelativeContainer)
maniuT的博客
07-09 1284
在应用的开发过程中，经常需要设计复杂界面，此时涉及到多个相同或不同组件之间的嵌套。如果布局组件嵌套深度过深，或者嵌套组件数过多，会带来额外的开销。如果在布局的方式上进行优化，就可以有效的提升性能，减少时间开销。RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系，适用于界面复杂场景的情况，对多个子组件进行对齐和排列。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。
华为仓颉鸿蒙HarmonyOS NEXT仓颉容器组件相对布局RelativeContainer
BinShaosir的专栏
12-25 809
barrier参数，用于定义一条barrier的id、方向和生成时所依赖的组件。guideLine参数，用于定义一条guideline的id、方向和位置。guideLine位置参数，用于定义guideline的位置。设置RelativeContaine容器内的辅助线。设置RelativeContaine容器内的屏障。创建一个RelativeContainer组件。创建一个RelativeContainer组件。相对布局组件，用于复杂场景中元素对齐的布局。👇🏻👇🏻👇🏻求关注👇🏻👇🏻👇🏻。技术交流群可加wx“
HarmonyOS相对布局
weixin_58881409的博客
01-21 1309
相对布局容器内部一定要有子组件才能显示，如果没子组件，该容器不占空间 容器内子组件区分水平方法和垂直方向
鸿蒙开发笔记(十六): 相对布局 RelativeContainer,栅格布局 GridRow/GridCol,媒体查询 mediaquery
Waruler的博客
01-19 2077
相对布局 RelativeContainer,栅格布局 GridRow/GridCol,媒体查询 mediaquery
鸿蒙（HarmonyOS）相对布局（RelativeContainer）使用详解
梦想不只是梦与想的博客
05-08 1084
相对布局（RelativeContainer）是鸿蒙开发中用于处理复杂界面布局的核心容器，支持基于锚点（Anchor）的动态位置关系设定。
鸿蒙ArkTS容器组件：【RelativeContainer】
2401_82772199的博客
07-11 528
相对布局组件，用于复杂场景中元素对齐的布局。点击或者复制转到。该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
鸿蒙开发系统的初步学习
m0_61673669的博客
06-19 976
鸿蒙的简单入门学习
Android视角看鸿蒙第十二课-鸿蒙的布局之相对布局RelativeContainer
weixin_44656996的博客
04-23 1141
RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依赖关系。看起来和Android没什么差别，可以依赖兄弟组件，也可以依赖父布局，同样不可以依赖兄弟的儿子。哈哈和Android差不多吧，语法熟悉下就可以了。
【HarmonyOS NEXT】相对布局：RelativeContainer
weixin_71403100的博客
09-05 885
Entry@Componentbuild() {Row() {Row()top: { anchor: '__container__', align: VerticalAlign.Top }, //以父容器为锚点，竖直方向顶头对齐middle: { anchor: '__container__', align: HorizontalAlign.Center } //以父容器为锚点，水平方向居中对齐}).id('row1') //设置锚点为row1Row() {
HarmonyOS鸿蒙学习笔记（10）Flex中Text组件文字居中问题
菜鸟博客
09-20 2691
HarmonyOS Flex Text文字居中
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：RelativeContainer）
m0_64420071的博客
03-15 2329
ArkTS声明式开发（容器组件：RelativeContainer）
【鸿蒙实战开发】线性布局 Column 和 Row详解
HarmonyOS007的博客
08-06 2340
●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
鸿蒙基础笔记
2301_79555864的博客
07-25 313
【代码】鸿蒙基础笔记。
harmonyos北京景点推荐
最新发布
06-10
### HarmonyOS 北京景点推荐应用设计与实现 HarmonyOS作为新一代的操作系统，为开发者提供了丰富的组件和功能支持，使得构建复杂且交互性强的应用成为可能。以下将结合提供的引用内容[^1]、[^2]、[^3]，详细探讨如何基于HarmonyOS开发一个北京景点推荐应用。 #### 1. 应用架构设计 应用的核心功能是向用户推荐北京的热门景点，并提供相关的评分、地址和上榜理由等信息。为了实现这一目标，可以参考携程旅行口碑榜的设计思路[^1]。具体来说，应用的主要模块包括： - **Banner区域**：展示当前热门景点或活动。 - **城市选择**：允许用户切换到其他城市，但默认显示北京的景点信息[^1]。 - **热门景点列表**：以卡片形式展示每个景点的关键信息，如图片、标题、评分和地址等。 - **地图定位功能**：利用HarmonyOS的地图组件和AGC签名证书，实现用户的当前位置定位功能[^3]。 #### 2. 界面布局实现 界面布局可以采用相对布局（`RelativeContainer`）和栅格布局（`GridRow`、`GridCol`）相结合的方式[^2]。例如： - **Banner区域**：使用`RelativeContainer`实现动态图片轮播效果[^2]。 - **热门景点列表**：通过`GridRow`和`GridCol`实现多列布局，确保每个景点卡片整齐排列[^2]。 以下是实现热门景点列表的代码示例： ```typescript Column() { GridRow(columnsTemplate: "1fr 1fr", gap: 8) { ForEach(sights, (sight) => { Card(width: "100%", height: "auto", backgroundColor: Color.White) { Column() { Image($r("app.media." + sight.image)) .objectFit(ImageObjectFit.Cover) .height(150) Text(sight.title) .fontSize(16) .fontWeight(FontWeight.Bold) Text("评分: " + sight.rating) .fontSize(14) .color(Color.Gray) Text("地址: " + sight.address) .fontSize(14) .color(Color.Gray) } } }) } } ``` #### 3. 数据获取与处理 应用需要从服务器获取北京景点的相关数据。可以使用HarmonyOS的网络请求API完成数据拉取，并将结果解析后绑定到UI上。如果需要语音播报功能，可以集成文本转语音（TTS）服务[^3]。 #### 4. 页面跳转与交互 用户点击某个景点卡片时，可以跳转到详情页面，展示更详细的信息。跳转逻辑可以通过`startAbility`方法实现[^3]。以下是一个简单的跳转示例： ```typescript onClick(() => { const context = getContext() as common.UIAbilityContext; context.startAbility({ bundleName: 'com.example.sight_recommendation', moduleName: 'entry', abilityName: 'SightDetailAbility', params: { sightId: sight.id } }); }) ``` #### 5. 地图定位功能 为了增强用户体验，应用还可以集成地图定位功能，帮助用户找到景点的具体位置。这需要使用HarmonyOS的地图组件，并通过AGC签名证书完成相关配置[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值