HarmonyOS 鸿蒙Next 如何设置一个组件位于另一个组件的中间位置

HarmonyOS 鸿蒙Next 如何设置一个组件位于另一个组件的中间位置


如代码中的设置，并不能居中显示，而是对齐目标组件的顶部。安卓的ConstraintLayout设置对齐顶部和底部会把控件位于中间，请问如何实现这样的效果
build() {
  RelativeContainer() {
    Image(this.avatarImage)
      .alt($r('app.media.ic_avatar_default_in_profile'))
      .width(60)
      .aspectRatio(1)
      .borderRadius(50)
      .objectFit(ImageFit.Cover)
      .id('user_avatar');

    Image($r('app.media.followed_noborder'))
      .width(68)
      .aspectRatio(2.2)
      .alignRules({
        top: { anchor: "user_avatar", align: VerticalAlign.Top },
        bottom: { anchor: "user_avatar", align: VerticalAlign.Bottom },
        right: { anchor: "__container__", align: HorizontalAlign.End }
      });
  }
}

更多关于HarmonyOS 鸿蒙Next 如何设置一个组件位于另一个组件的中间位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

[@Component](/user/Component)

struct Index {

  alignItems : number = 0;

  build() {

    Flex({ alignItems: this.alignItems,justifyContent: FlexAlign.SpaceBetween }) {

      Image($r('app.media.background')).width('60').aspectRatio(1)   // 头像

      Image($r('app.media.foreground')).width('60').aspectRatio(2.2) //订阅图片

    }

    .size({width: '90%', height: 80})

    .padding(10)

    .backgroundColor(0xAFEEEE)

  }

}

[@Entry](/user/Entry)

[@Component](/user/Component)

struct FlexExample4 {

  build() {

    Column() {

      Column({ space: 5 }) {

        Text('').fontSize(9).fontColor(0xCCCCCC).width('90%')

        AlignItemsFlex({ alignItems: ItemAlign.Center ,}) // 子组件在容器交叉轴上居中对齐

      }.width('100%').margin({ top: 5 })

    }.width('100%')

  }

}

更多关于HarmonyOS 鸿蒙Next 如何设置一个组件位于另一个组件的中间位置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


.alignRules({
  center: { anchor: 'user_avatar', align: VerticalAlign.Center },
  middle: { anchor: 'user_avatar', align: HorizontalAlign.Center }
你这个是相对定位布局的方式,如果这种不是必须的话,可以使用column和row相互嵌套的布局使用,使用主轴侧轴对齐的方式事件居中定位

在HarmonyOS鸿蒙Next中，要设置一个组件位于另一个组件的中间位置，可以通过以下几种方法实现：

  1. 使用Flex布局：

    • 给包含这两个组件的父视图设置Flex布局。
    • 使目标组件（即需要居中的组件）的flex属性为0 0 auto，确保其在宽度和高度上占据固定的尺寸。
    • 使用align-self: center和justify-content: center（后者需作用于父容器）来使目标组件在水平和垂直方向上居中。

  2. 使用Position属性：

    • 给父组件设置position: relative。
    • 给目标组件设置position: absolute，然后通过调整top、left（或right，根据需求选择）的值以及transform: translate属性来精确控制其位置，使其位于父组件的中心。

  3. 使用ArkTS布局和对齐接口：

    • 利用ArkTS提供的布局和对齐接口，如align、offset等，来设置目标组件相对于父组件的位置和对齐方式。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部