HarmonyOS 组件尺寸显示异常

如下代码,宽度设置了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%')
  }
}
HarmonyOS
2024-12-18 16:55:40
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

请参考以下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

分享
微博
QQ
微信
回复
2024-12-18 18:55:26
相关问题
Grid组件显示异常该怎么处理?
801浏览 • 1回复 待解决
HarmonyOS Text显示异常
157浏览 • 1回复 待解决
HarmonyOS 弹窗显示异常
431浏览 • 1回复 待解决
HarmonyOS web页面显示异常
231浏览 • 1回复 待解决
HarmonyOS shortcuts图标显示异常
157浏览 • 1回复 待解决
HarmonyOS 字符串显示异常
774浏览 • 1回复 待解决
如何处理webview显示元素尺寸过小
2366浏览 • 1回复 待解决
import Sample 里异常显示
6986浏览 • 1回复 待解决
Rect设置渐变显示异常
618浏览 • 0回复 待解决
HarmonyOS Text加载藏文时,显示异常
255浏览 • 1回复 待解决
HarmonyOS 如何监听组件自身尺寸变化
440浏览 • 1回复 待解决
HarmonyOS web加载链接显示效果异常
245浏览 • 1回复 待解决
HarmonyOS list左滑 字体显示异常
272浏览 • 1回复 待解决
H5中的图片在Web组件显示异常
624浏览 • 1回复 待解决
如何设置组件尺寸范围?
639浏览 • 1回复 待解决
HarmonyOS Text.textOverflow超长时显示异常
769浏览 • 1回复 待解决
HarmonyOS 如何获取某个组件尺寸
400浏览 • 1回复 待解决