自适应缩放布局如何实现

自适应缩放布局如何实现

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
相关问题
自适应页面滚动如何实现
159浏览 • 1回复 待解决
Web组件如何实现高度自适应
718浏览 • 1回复 待解决
Grid组件如何实现高度自适应
2700浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
163浏览 • 1回复 待解决
弹窗大小如何改为自适应
128浏览 • 1回复 待解决
HarmonyOS webview如何设置自适应
183浏览 • 1回复 待解决
软键盘弹出时,页面的自适应
857浏览 • 1回复 待解决
自定义弹窗大小如何自适应内容
1984浏览 • 1回复 待解决
HarmonyOS如何实现动态缩放动画
188浏览 • 1回复 待解决
HarmonyOS web组件自适应高度问题
279浏览 • 1回复 待解决
arktsUI组件的自适应要怎么?
226浏览 • 1回复 待解决
HarmonyOS 自适应父组件高度问题
371浏览 • 1回复 待解决