HarmonyOS鸿蒙Next中如何让Row里的两个图片一个靠左，一个靠右

HarmonyOS鸿蒙Next中如何让Row里的两个图片一个靠左，一个靠右

Row() {

  Image($r('app.media.img1'))
    .width(50)
    .height(50)
    
  Image($r('app.media.img2'))
    .width(50)
    .height(50)
    
}

如以上代码，如何让这两个Image，一个靠左，一个靠右？

8 回复

可以在Row组件添加justifyContent(FlexAlign.SpaceBetween):Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

示例代码如下：

@Entry
@Component
struct Index {
  build() {
    Row() {

      Image($r('app.media.background'))
        .width(50)
        .height(50)

      Image($r('app.media.startIcon'))
        .width(50)
        .height(50)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

更多关于HarmonyOS鸿蒙Next中如何让Row里的两个图片一个靠左，一个靠右的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


好像使用

Blank()

也是可以的。

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

用justifyContent可以实现，优势在于多个组件可以自适应间距

但是如果不需要自适应间距，目的是定位，我提供一个更自由的方式，用position+translate覆盖容器原本的布局方式，用不同容器时，默认位置有区别，但只要用position和translate覆盖之后，就按照自定义了。

//四角
Text('左上').position({ left: 0, top: 0 })
Text('左下').position({ left: 0, bottom: 0 })
Text('右上').position({ right: 0, top: 0 })
Text('右下').position({ right: 0, bottom: 0 })
// 中心
Text('中心') //默认位置
// 四边
Text('中上').translate({ x: '-50%' }).position({ left: '50%', top: 0 })
Text('中下').translate({ x: '-50%' }).position({ left: '50%', bottom: 0 })
Text('左中').translate({ y: '-50%' }).position({ top: '50%', left: 0 })
Text('右中').translate({ y: '-50%' }).position({ top: '50%', right: 0 })

思路细节：

// 思路：
//position({x:y:})
// 坐标0点：父组件左上，
// 百分比基数：父组件的宽高

//translate({x:y:})
// 坐标0点：自身左上，
// 百分比基数：自身的宽高

//位置数据类型：
// Position：横纵坐标，相对于0点
// Edges：相对于四条边界的偏移距离

// 中下：
// x：左端相对于0点向右偏移父组件宽度的一半.position({ left: '50%', bottom: 0 })
// 然后向左偏移自身宽度的一半.translate({ x: '-50%' })
// y：相对于下边界偏移0（Edges类型），

// xy启用时，上下左右失效，
// 上下同时开，只生效上（top），左右同时启用，只生效左
// 启用但传入undefined，可以避免相应失效

这个position+translate是直接修改被布局的子组件，相当于alignSelf的增强，他可以跟原本的对齐方式结合使用。

比如在Row里面有10个子组件，我只想让其中1个组件堆叠在其他组件上，就可以用position+translate代替额外的Stack容器。

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

Row() {

  Image($r('app.media.img1'))
    .width(50)
    .height(50)
    
  Image($r('app.media.img2'))
    .width(50)
    .height(50)
    
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)

在HarmonyOS Next中，使用Row容器配合justifyContent属性实现图片左右对齐。将Row的justifyContent设置为FlexAlign.SpaceBetween，两个图片组件会自动一个靠左、一个靠右。

在 HarmonyOS Next 的 ArkUI 中，要让 Row 容器内的两个 Image 组件分别左右对齐，核心方法是使用 Flex 布局的 justifyContent 属性，并配合 Blank 组件或 Flex 的 flexGrow 属性来占据中间空间。

这里提供两种最直接、最常用的实现方案：

方案一：使用 justifyContent: SpaceBetween（推荐）

这是最简洁、语义最清晰的方法。将 Row 的 justifyContent 设置为 FlexAlign.SpaceBetween，它会使子组件在主轴（这里是水平方向）上两端对齐，剩余空间均匀分布在子组件之间。对于只有两个子组件的情况，效果就是一个在左，一个在右。

Row() {
  Image($r('app.media.img1'))
    .width(50)
    .height(50)

  Image($r('app.media.img2'))
    .width(50)
    .height(50)
}
.justifyContent(FlexAlign.SpaceBetween) // 关键设置
.width('100%') // 通常需要设置宽度，对齐才有效果

方案二：使用 Blank() 组件占据中间空间

如果两个组件之间需要固定的间距，或者有更复杂的布局需求，可以使用 Blank 组件来填充剩余空间。

Row() {
  Image($r('app.media.img1'))
    .width(50)
    .height(50)

  Blank() // 这个空白组件会占据所有剩余空间，将后面的组件推到右边

  Image($r('app.media.img2'))
    .width(50)
    .height(50)
}
.width('100%')

总结

  • 首选方案一 (justifyContent: SpaceBetween)，代码简洁，意图明确，是处理这种对齐需求的标准方式。
  • 方案二 (Blank) 在需要精确控制间隔或布局更复杂时非常灵活。

你的代码只需要添加一行 .justifyContent(FlexAlign.SpaceBetween) 并确保 Row 有宽度（例如 .width('100%')），即可实现左右对齐的效果。

回到顶部