自适应布局
1. 拉伸能力
拉伸能力通过flexGrow和flexShrink属性实现,flexGrow拉伸,flexShrink收缩,通过给定份数,实现收或缩所占相对父容器的大小
Row(){
Row()
.width(200)
.height(200)
.backgroundColor(Color.Red)
.border({ width: 4, color: Color.Grey })
.flexGrow(2)
.flexShrink(1)
Row()
.width(200)
.height(200)
.backgroundColor(Color.Pink)
.border({ width: 4, color: Color.Grey })
.flexShrink(2)
.flexGrow(1)
}
2. 均分能力
均分能力通过容器组件的justifyContent属性实现,其属性参数的FlexAlign枚举,实现三种不同的均分能力
●SpaceBetween:父组件的首尾子组件与父组件首尾对齐,其他子组件平均分配剩余空间
●SpaceAround:每个子组件左右各有间隙,导致相邻间隙是头部或尾部间隙的2倍
●SpaceEvenly:子组件在父组件中均匀分布,子组件间隔相等
@Builder
aroundBox() {
Column({ space: 10 }) {
Text('around')
.fontSize(26)
Row() {
Row()
.width(100)
.height(100)
.backgroundColor(Color.Brown)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Blue)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Green)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Orange)
}
.width("100%")
.justifyContent(FlexAlign.SpaceAround)
}
}
@Builder
bewteenBox() {
Column({ space: 10 }) {
Text('bewteen')
.fontSize(26)
Row() {
Row()
.width(100)
.height(100)
.backgroundColor(Color.Brown)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Blue)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Green)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Orange)
}
.width("100%