当前位置：首页 > wzjs >正文

聊城网站建设的地方中国城乡住房和城乡建设部网站首页

wzjs 2025/9/18 15:39:14

聊城网站建设的地方,中国城乡住房和城乡建设部网站首页,网站做服务端,龙华区做网站前言代码案例基于Api13。最新的DevEco Studio，在创建一个新项目的时候，官方已经默认把RelativeContainer组件做为根布局使用了，由此可见，RelativeContainer组件的重要性；相对于其它的容器组件，它的出现&a…

前言

代码案例基于Api13。

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

如下的组件之间的布局，如果没有RelativeContainer组件的情况下，我们该如何实现呢？显然需要嵌套很多容器组件，或者进行坐标定位才可以进行实现，有了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。