自适应缩放布局如何实现

自适应缩放布局如何实现

HarmonyOS
2024-07-31 10:29:01
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
开心的兔子

在父容器尺寸已明确界定的前提下,利用`layoutWeight`属性来配置子元素及其同级元素在主轴方向上的相对权重,此操作将忽略各元素自身的尺寸设定,从而确保这些元素能够在不同尺寸的设备环境中自动调整其占据的剩余空间,实现良好的自适应布局效果。

@Entry
@Component
struct layoutWeightExample {
  build() {
    Column() {
      Text('1:2:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(1)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')

      }.backgroundColor(0xffd306).height('30%')

      Text('2:5:3').width('100%')
      Row() {
        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(5)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(5).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(3)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
  }
}
分享
微博
QQ
微信
回复
2024-07-31 18:47:42
相关问题
自适应页面滚动如何实现
498浏览 • 1回复 待解决
Grid组件如何实现高度自适应
3261浏览 • 1回复 待解决
Web组件如何实现高度自适应
1055浏览 • 1回复 待解决