HarmonyOS 组件尺寸显示异常？

Question

如下代码，宽度设置了100%，但实际宽度如截图所示并没有撑满

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

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('AlignRuleTestPageHelloWorld')
        .fontSize(30)
        .width("100%")
        .aspectRatio(6)
        .margin({
          top: "14%"
        })
        .backgroundColor(Color.Red)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start },
          right: { anchor: '__container__', align: HorizontalAlign.End },
        })
    }
    .height('100%')
    .width('100%')
  }
}

Answer 1

请参考以下demo:

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

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('AlignRuleTestPageHelloWorld')
        .fontSize(30)//.aspectRatio(0)  去掉
        .margin({
          top: "14%"
        })
        .backgroundColor(Color.Red)
        .fontWeight(FontWeight.Bold)
        .width("100%")
        .height('100%')
    }
    .height('100%')
    .width('100%')
  }
}

aspectRatio的使用参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-layout-constraints-V5