自适应布局-界面元素自适应变化-多设备界面开发-一次开发,多端部署 - 华为HarmonyOS开发者

FlexGrow 当屏幕的大小超出了元素的大小,将超出的内容分配给设置了FlexGrow的组件

FlexShrink 当屏幕的大小x小于了元素的大小,将设置了flexShrink属性的组件进行宽度压缩

 Text('拉伸能力->Flex布局')
          Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
            Row()
              .width(150)
              .height(400)
              .backgroundColor('#FFFFFF')
              .flexGrow(0)
              .flexShrink(1)
            Image($r('app.media.bg1_25612'))
              .width(300)
              .height(400)
              .objectFit(ImageFit.Contain)
              .backgroundColor('#66F1CCB8')
              .flexGrow(1)
              .flexShrink(0)
            Row()
              .width(150)
              .height(400)
              .backgroundColor('#FFFFFF')
              .flexGrow(0)
              .flexShrink(1)
          }
          .width(this.sliderWidth)

          this.slider()

          Text('均分能力->JustifyContent()')
          Text('占比能力->权重-layoutweight(1)')
          Text('缩放能力->aspect-ratio')
          Text('延伸能力->list  grid(  columnsTemplate(‘repeat(auto-fill, track-size)’) )')
          Text('隐藏能力->displayPriority(2) 数字越大级别越高 最后隐藏')

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐