HarmonyOS RelativeContainer子组件margin属性问题

RelativeContainer中有一个Image和一个Text，Image在左边，Text在Image右边顶部与Image对齐。给Text的右边设置了margin，但当Text宽度到达RelativeContainer边界时右边间距没有生效，定到了RelativeContainer的边缘。

HarmonyOS

FengTianYa

2024-12-25 11:52:40

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

子组件的margin含义解释参考规则说明：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-relativecontainer-V5#规则说明

相对布局容器内的子组件的margin含义不同于通用属性的margin，其含义为到该方向上的锚点的距离。若该方向上没有锚点，则该方向的margin不生效，参考示例如下：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Image("")
        .id('sku_image')
        .width('96vp')
        .height('96vp')
        .borderRadius('4vp')
        .alignRules({
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .margin({
          left: '12vp',
          right: '8vp',
          top: '28vp',
          bottom: '12vp'
        })
        .backgroundColor('#888888')
      Text('TextTextTextTextTextTextTextTextTextTextTextTextTextTextText')// .id('sku_name')
        .height('auto')
        .fontSize('14fp')
        .fontColor('#FFFFFFFF')
        .fontWeight(FontWeight.Bold)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .ellipsisMode(EllipsisMode.END)
        .padding({
          left: '8vp',
          right: '12vp'
        })
        .alignRules({
          left: { anchor: 'sku_image', align: HorizontalAlign.End },
          top: { anchor: 'sku_image', align: VerticalAlign.Top },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })
    }
    .width('100%')
    .height('auto')
    .backgroundColor('#333333')
    .backgroundImagePosition({ x: '972', y: '324' })
    .backgroundImageSize({ width: '0.00px', height: '0.00px' })
  }
}