HarmonyOS api RelativeContainer chainMode 垂直方向不行

ABC 三个组件 , 进行水平 chainMode , 是可以显示的, 但是换成 AB 两个控件 , 垂直进行 chainMode 反而不行。

HarmonyOS

fox280

2天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

换成垂直的，chainMode中链的方向要改为Axis.Vertical，另外首尾要关联父容器同时中间要保证链路也是首尾相连的。详情可以查看规则中的链路依赖：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-relativecontainer-V5

可以参考以下代码：

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Stack(){
          Image("随便放个图片").width(80).aspectRatio(1).objectFit(ImageFit.Cover)
            .alt($r('app.media.background'))
        }.borderRadius('11vp').clip(true)
        .id('image')
        .alignRules({
          top: {anchor: "__container__", align: VerticalAlign.Top},
          bottom:{ anchor: 'a', align: VerticalAlign.Top},
          middle: {anchor: "__container__", align: HorizontalAlign.Center}
        })
        .id("row1")
        .chainMode(Axis.Vertical, ChainStyle.SPREAD)
        Row().width(80).height(80)
          .backgroundColor("#FFCC00")
          .alignRules({
            top: {anchor: "row1", align: VerticalAlign.Bottom},
            bottom: {anchor: "b", align: VerticalAlign.Top},
            left: {anchor: "row1", align: HorizontalAlign.Start}
          })
          .id("a")
        Row().width(80).height(80)
          .backgroundColor("#FF6633")
          .alignRules({
            top: {anchor: "a", align: VerticalAlign.Bottom},
            bottom: {anchor: "__container__", align : VerticalAlign.Bottom},
            left: {anchor: "row1", align: HorizontalAlign.Start}
          })
          .id("b")
      }
      .id('test')
      .width(300).height(300)
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
  }
}