HarmonyOS 鸿蒙Next 两个子组件分别居左居右 应该怎么布局

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 两个子组件分别居左居右 应该怎么布局

我想要实现下面的一个效果, 有人说用 Box, 有人说用 Row, 但是我都有点不太满意, 有什么更好的推荐吗?


更多关于HarmonyOS 鸿蒙Next 两个子组件分别居左居右 应该怎么布局的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
blank()就好了,你这个用Row包含两个子组件，给个宽度，然后两个子组件之间加个Blank
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  build() {
    Row() {
      Text('Drop Off')
      Blank()
      Image($r('app.media.app_icon')).size({ width: 33, height: 33 })
    }.width('100%').margin({ top: 100 }).padding({ left: 10, right: 10 })
  }
}

更多关于HarmonyOS 鸿蒙Next 两个子组件分别居左居右 应该怎么布局的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，要实现两个子组件分别居左和居右的布局，可以使用RelativeContainer布局容器，并结合alignRules属性来设置对齐规则。

具体来说，可以如下操作：

  1. 使用RelativeContainer作为外层容器。
  2. 在RelativeContainer中放置两个子组件，分别代表居左和居右的组件。
  3. 为居左的组件设置alignRules，使其相对于容器左对齐。例如：.alignRules({start:{anchor:'__container__',align:HorizontalAlign.Start}})。
  4. 为居右的组件设置alignRules，使其相对于容器右对齐。例如：.alignRules({end:{anchor:'__container__',align:HorizontalAlign.End}})。

这样就可以实现两个子组件在RelativeContainer中分别居左和居右的布局。

请注意，这里提供的代码片段是基于鸿蒙开发语言的示例，实际开发中可能需要根据具体情况进行调整。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部