HarmonyOS鸿蒙Next中如何使用RelativeContainer实现图片中的效果？

HarmonyOS鸿蒙Next中如何使用RelativeContainer实现图片中的效果？ 如何使用RelativeContainer实现图片中的效果？

cke_302.png


更多关于HarmonyOS鸿蒙Next中如何使用RelativeContainer实现图片中的效果？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

参考示例：

@Entry @Component struct ProgressWithLayoutWeight { build() { Column() { // 水平布局容器，使用layoutWeight分配比例 Row() { // 进度标签（占1份） Text(“进度:”) .fontSize(16) .borderWidth({right:0,left:2,bottom:2,top:2}) .padding({bottom:5,top:5 }) .borderColor(Color.Gray) .textAlign(TextAlign.Center) .layoutWeight(1) // 权重1 // 设计阶段（占1份） Text(“设计”) .fontSize(16) .borderWidth(2) .padding(5) .borderColor(Color.Gray) .textAlign(TextAlign.Center) .layoutWeight(1) // 权重1 // 分隔线1（占0.5份） Divider() .direction(Direction.Auto) .strokeWidth(2) .color("#CCCCCC") .layoutWeight(0.5) // 权重0.5 .padding({right:4,left:4}) // 研发阶段（占1份） Text(“研发”) .fontSize(16) .borderWidth(2) .padding(5) .borderColor(Color.Gray) .textAlign(TextAlign.Center) .layoutWeight(1) // 权重1 // 分隔线2（占0.5份） Divider() .direction(Direction.Auto) .strokeWidth(2) .color("#CCCCCC") .layoutWeight(0.5) // 权重0.5 .padding({right:4,left:4}) // 测试阶段（占1份） Text(“测试”) .fontSize(16) .borderWidth(2) .padding(5) .borderColor(Color.Gray) .textAlign(TextAlign.Center) .layoutWeight(1) // 权重1 // 分隔线3（占0.5份） Divider() .direction(Direction.Auto) .strokeWidth(2) .color("#CCCCCC") .layoutWeight(0.5) // 权重0.5 .padding({right:4,left:4}) // 上线阶段（占1份） Text(“上线”) .fontSize(16) .borderWidth(2) .padding(5) .borderColor(Color.Gray) .textAlign(TextAlign.Center) .layoutWeight(1) // 权重1 } .alignItems(VerticalAlign.Center) // 垂直居中对齐 .width(‘100%’) .height(60) .padding({ left: 15, right: 15 }) } .padding(20) .backgroundColor(’#FFFFFF’) .width(‘100%’) .height(‘100%’) } }

cke_645.png

更多关于HarmonyOS鸿蒙Next中如何使用RelativeContainer实现图片中的效果？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用RelativeContainer实现图片效果需遵循以下步骤：

  1. 在RelativeContainer内添加子组件，通过ID标识。
  2. 使用锚点规则（如alignRules）设置组件相对位置，例如：
    • alignRules: { left: { anchor: 'componentA', align: HorizontalAlign.End } }
  3. 结合position属性进行绝对定位调整。
  4. 使用zIndex控制层级关系。

关键是通过ID引用和锚点规则定义组件间的相对位置关系，无需依赖Java或C语言。

在HarmonyOS Next中，使用RelativeContainer实现图片中的布局效果，关键在于正确设置容器内各个子组件的锚点规则（alignRules）。

根据图片描述，这是一个典型的“上-中-下”垂直分块布局，中间区域又可能包含左右分栏。核心实现步骤如下：

1. 整体结构

将整个页面视为一个RelativeContainer，其内部主要子组件按垂直位置关系进行锚定。

2. 关键锚点属性

每个子组件需在alignRules中定义其与父容器或其他兄弟组件的相对位置关系。主要使用的属性是：

  • top、bottom、left、right： 分别表示组件某一边锚定到目标ID组件的某一边。
  • middle、center： 用于水平或垂直居中。

3. 实现示例代码框架

假设布局分为顶部栏（TopBar）、中间内容区（Content，内部可能再嵌套水平布局）、底部栏（BottomBar）。

RelativeContainer() {
  // 1. 顶部栏：锚定在父容器顶部
  TopBar()
    .id('topBar')
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      left: { anchor: '__container__', align: HorizontalAlign.Start },
      right: { anchor: '__container__', align: HorizontalAlign.End }
    })
    .height(60)

  // 2. 底部栏：锚定在父容器底部
  BottomBar()
    .id('bottomBar')
    .alignRules({
      bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
      left: { anchor: '__container__', align: HorizontalAlign.Start },
      right: { anchor: '__container__', align: HorizontalAlign.End }
    })
    .height(60)

  // 3. 中间内容区：锚定在顶部栏下方、底部栏上方
  RelativeContainer() {
    // 此处可进一步实现中间区域的左右分栏
    // 左侧组件
    LeftColumn()
      .id('leftColumn')
      .alignRules({
        top: { anchor: '__container__', align: VerticalAlign.Top },
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
      })
      .width('40%')

    // 右侧组件
    RightColumn()
      .id('rightColumn')
      .alignRules({
        top: { anchor: '__container__', align: VerticalAlign.Top },
        left: { anchor: 'leftColumn', align: HorizontalAlign.End },
        right: { anchor: '__container__', align: HorizontalAlign.End },
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
      })
  }
  .id('content')
  .alignRules({
    top: { anchor: 'topBar', align: VerticalAlign.Bottom },
    bottom: { anchor: 'bottomBar', align: VerticalAlign.Top },
    left: { anchor: '__container__', align: HorizontalAlign.Start },
    right: { anchor: '__container__', align: HorizontalAlign.End }
  })
}
.width('100%')
.height('100%')

4. 要点说明

  • 锚点目标：__container__指父级RelativeContainer。
  • 顺序无关：组件在代码中的声明顺序不影响最终布局，布局完全由alignRules决定。
  • 尺寸设置：必须为组件明确设置宽度或高度，或在规则中通过锚定到容器或兄弟组件来隐式确定尺寸。
  • 嵌套使用：复杂的中间区域可以再次嵌套RelativeContainer或使用Row/Column等实现。

通过以上方式，可以灵活实现图片中展示的各类相对布局效果。实际开发中需根据具体UI细节调整锚点规则和尺寸。

回到顶部