自适应缩放布局如何实现

自适应缩放布局如何实现

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
相关问题
自适应页面滚动如何实现
319浏览 • 1回复 待解决
Web组件如何实现高度自适应
882浏览 • 1回复 待解决
Grid组件如何实现高度自适应
2914浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
394浏览 • 1回复 待解决
HarmonyOS RelativeContainer无法自适应高度
147浏览 • 1回复 待解决
HarmonyOS webview如何设置自适应
417浏览 • 1回复 待解决
弹窗大小如何改为自适应
370浏览 • 1回复 待解决
HarmonyOS 高度自适应
68浏览 • 1回复 待解决
HarmonyOS RelativeContainer宽高自适应问题
195浏览 • 1回复 待解决