HarmonyOS鸿蒙Next中ArkUI Row布局如何实现一个组件居中，一个组件靠上的问题？（非局限Row）

HarmonyOS鸿蒙Next中ArkUI Row布局如何实现一个组件居中，一个组件靠上的问题？（非局限Row） cke_254.png

整体item 如上图，此item需要放在ListItem中使用，如果在后面的组件上套个Col  设置这个col的高度为“100%” 会导致单个item撑满整个屏幕

  1. 整体item高度不固定，
  2. 两个绿色的是图片，第一个需要居中显示，第二个需要靠上显示有10pv的间距
  3. 蓝色部分是文本数据，决定整体item高度

问：如何能在不固定高度的情况下实现两个图标一个居中  一个靠上的需求？


更多关于HarmonyOS鸿蒙Next中ArkUI Row布局如何实现一个组件居中，一个组件靠上的问题？（非局限Row）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

这还不简单，后面那个组件外面套一个column，然后让它距离上面差10px

更多关于HarmonyOS鸿蒙Next中ArkUI Row布局如何实现一个组件居中，一个组件靠上的问题？（非局限Row）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


按照你的思路应该是需要把这个col高度做限制吧，我这个是要放在listitem中的如果设置高度“100%”会出现单个item撑满屏幕的情况，

.layoutwight(1)行不行？不行的话就改用相对布局，实在不济那就用stack组件堆叠一下。

.layoutwight(1) 也不行 这样也会导致单个item撑满屏幕的情况，stack堆叠 是个好方案，

在ArkUI中，Row组件默认主轴为水平方向。要实现一个组件居中，另一个组件靠上（垂直方向），需使用alignItems属性。

将Row的alignItems设置为VerticalAlign.Top，使所有子项在垂直方向顶部对齐。然后，对需要居中的子组件单独设置alignSelf属性为VerticalAlign.Center，使其在垂直方向居中。

示例代码：

Row({ space: 20 }) {
  Text('居中')
    .alignSelf(VerticalAlign.Center)
  Text('靠上')
}
.width('100%')
.height(200)
.alignItems(VerticalAlign.Top)

在HarmonyOS Next的ArkUI中，可以通过Row容器结合Flex布局和对齐方式实现该需求。核心思路是使用Row作为主容器，左侧图标区域用Column嵌套实现垂直方向的对齐控制。

具体方案如下：

  1. 整体结构：使用Row作为根布局，设置width('100%')，高度由内容撑开（不设置固定高度）。
  2. 左侧图标区域：用一个Column容器包裹两个图标，并为该Column设置：
    .justifyContent(FlexAlign.Center) // 使Column内子组件在垂直方向上居中布局
.alignItems(HorizontalAlign.Start) // 子组件水平方向左对齐
.height('100%') // 关键：高度跟随父容器Row，但不会撑开Row，因为Row高度由右侧文本内容决定
    此时，该Column的高度会与右侧文本区域保持一致，并在垂直方向居中。然后：
    • 第一个图标（需居中）放在Column内即可自动垂直居中。
    • 第二个图标（需靠上）通过设置margin({ top: 10 })实现间距，并利用Column的默认垂直排列（从上到下）自然靠上。
  3. 右侧文本区域：直接放在Row中，作为弹性内容撑开高度。

示例代码结构：

Row() {
  // 左侧图标容器
  Column() {
    Image($r('app.media.centerIcon')) // 居中图标
      .width(40)
      .height(40)

    Image($r('app.media.topIcon')) // 靠上图标
      .margin({ top: 10 })
      .width(40)
      .height(40)
  }
  .justifyContent(FlexAlign.Center)
  .height('100%') // 随右侧文本高度变化

  // 右侧文本区域
  Column() {
    Text(...)
      .fontSize(16)
    Text(...)
      .fontSize(14)
  }
  .layoutWeight(1) // 占满剩余横向空间
}
.width('100%')

关键点：

  • 左侧Column的height('100%')会参照父容器Row的高度，而Row的高度由右侧文本内容动态决定，因此左侧图标区域总能与右侧保持同高，并实现第一个图标垂直居中。
  • 第二个图标的margin({ top: 10 })会在Column内部使其向下偏移，实现“靠上间距”效果。
  • 此方案未使用固定高度值，且不会因height('100%')导致屏幕撑满，因为父容器Row的高度由内容（文本）决定。

如果右侧文本内容高度较小，导致左侧图标区域高度不足，第二个图标可能被压缩或溢出，可考虑为左侧Column设置minHeight或使用aspectRatio约束图标比例。

回到顶部