当width设置auto时,如果水平方向上子组件以容器作为锚点,则auto不生效,垂直方向上同理。参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-relativecontainer-V5@Builder heatmapExampleLayout() { RelativeContainer() { Image($r('app.media.startIcon')) .fitOriginalSize(true) .margin({ bottom: 10 }) .id('example_img') // .alignRules({ // left: { anchor: '__container__', align: HorizontalAlign.Start }, // top: { anchor: '__container__', align: VerticalAlign.Top } // }) Text(`事实上`) .fontColor(Color.Red) .fontSize(12) .id('example_less') // .alignRules({ // left: { anchor: '__container__', align: HorizontalAlign.Start }, // bottom: { anchor: '__container__', align: VerticalAlign.Bottom } // }) Text(`测试`) .fontColor(Color.Blue) .fontSize(12) .id('example_more') // .alignRules({ // right: { anchor: 'example_img', align: HorizontalAlign.End }, // bottom: { anchor: '__container__', align: VerticalAlign.Bottom } // }) } .padding({ left: 8, right: 8, top: 5, bottom: 5 }) .margin({ left: 8, bottom: 12 }) .border({ width: 2, color: Color.White, radius: 8 }) .backgroundColor(Color.Gray) // .alignRules({ // left: { anchor: '__container__', align: HorizontalAlign.Start }, // bottom: { anchor: 'bottom_layout', align: VerticalAlign.Top } // }) .width(`auto`) .height(`auto`) }
当width设置auto时,如果水平方向上子组件以容器作为锚点,则auto不生效,垂直方向上同理。参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-relativecontainer-V5