自适应布局-界面元素自适应变化-多设备界面开发-一次开发,多端部署 - 华为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) 数字越大级别越高 最后隐藏')