在HarmonyOS NEXT开发中组件尺寸显示异常？

Question

在HarmonyOS NEXT开发中组件尺寸显示异常？如下代码，宽度设置了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-refere...