HarmonyOS api RelativeContainer chainMode 垂直方向不行

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

HarmonyOS
2024-12-20 16:11:01
浏览
收藏 0
回答 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%')
  }
}
分享
微博
QQ
微信
回复
2024-12-20 19:16:22
相关问题
HarmonyOS RelativeContainer组件
172浏览 • 1回复 待解决
HarmonyOS RelativeContainer相关问题
349浏览 • 1回复 待解决
HarmonyOS 文字标题没有垂直居中对齐
231浏览 • 1回复 待解决
相对布局(RelativeContainer
1676浏览 • 1回复 待解决
HarmonyOS RelativeContainer 组件咨询
681浏览 • 1回复 待解决
HarmonyOS relativeContainer设置guideLine属性
296浏览 • 1回复 待解决
HarmonyOS Scroll嵌套RelativeContainer 问题
674浏览 • 1回复 待解决
画布绘制文字,垂直居中
572浏览 • 1回复 待解决
HarmonyOS使用canvas如何使文字垂直居中
940浏览 • 1回复 待解决
HarmonyOS RelativeContainer自适应高度相关
386浏览 • 1回复 待解决