1.主轴对齐方式.justifyContent
build() {
Column(){
Text()
.width(200).height(100)
.backgroundColor(Color.Yellow)
.border({
width:2
})
Text()
.width(200).height(100)
.backgroundColor(Color.Yellow)
.border({
width:2
})
.margin(10)
Text()
.width(200).height(100)
.backgroundColor(Color.Yellow)
.border({
width:2
})
}
.width('100%').height('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
}
2.交叉轴对齐方式.alignItems()
交叉轴水平方向:HorizontalAlign
交叉轴垂直方向:VerticalAlign
build() {
Column(){
Text()
.width(200).height(100)
.backgroundColor(Color.Yellow)
.border({
width:2
})
Text()
.width(200).height(100)
.backgroundColor(Color.Yellow)
.border({
width:2
})
.margin({top:10,bottom:10})
Text()
.width(200).height(100)
.backgroundColor(Color.Yellow)
.border({
width:2
})
}
.width('100%').height('100%')
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(HorizontalAlign.End)
}
3.自适应伸缩.layoutWeight()
按照份数权重,分配剩余空间
build() {
Row(){
Text('老大')
.backgroundColor(Color.Blue)
.layoutWeight(1) //占剩余空间权重
Text('老二')
.backgroundColor(Color.Yellow)
.layoutWeight(2)
Text('老三')
.backgroundColor(Color.Red)
.layoutWeight(1)
}
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
}
4.Blank() 填充空白区域,像弹簧
5.Checkbox()复选框
6.Text(){Span('1')Span('2')}
7.弹性布局Flex
build() {
Flex({
direction:FlexDirection.Row, //主轴方向
justifyContent:FlexAlign.SpaceBetween, //主轴方式
alignItems:ItemAlign.Center //交叉轴方式
}){
Text()
.width(100).height(100)
.backgroundColor(Color.Yellow)
.border({
width:2
})
Text()
.width(100).height(100)
.backgroundColor(Color.Yellow)
.border({
width:2
})
Text()
.width(100).height(100)
.backgroundColor(Color.Yellow)
.border({
width:2
})
}
.width('100%').height('90%')
.backgroundColor(Color.Green)
}
弹性布局Flex 多行
Column(){
Flex({
wrap:FlexWrap.Wrap //设置多行
}){
Text('我是他').backgroundColor(Color.Gray).margin({right:5,bottom:5}).padding(4)
Text('他不是我').backgroundColor(Color.Gray).margin({right:5}).padding(4)
Text('我到底是谁').backgroundColor(Color.Gray).margin({right:5}).padding(4)
Text('你是?').backgroundColor(Color.Gray).margin({right:5}).padding(4)
Text('到底是什么').backgroundColor(Color.Gray).margin({right:5}).padding(4)
}
}
.width('100%')
.height('100%')
}
8.绝对定位:控制组件位置,实现层叠效果
build() {
Column(){
Text()
.width(200).height(100)
.backgroundColor(Color.Yellow)
.border({
width:2
})
Text()
.width(200).height(100)
.backgroundColor(Color.Blue)
.border({
width:2
})
//绝对定位 控制位置,层叠效果
.position({
x:0,
y:0
})
//zindex设置层级
.zIndex(-1)
Text()
.width(200).height(100)
.backgroundColor(Color.Red)
.border({
width:2
})
}
.width('100%').height('100%')
}
9.层叠布局Stack(){}
build() {
//层叠方位
Stack({alignContent:Alignment.TopEnd}){
Text('黄药师').width(250).height(500).backgroundColor(Color.Yellow)
Text('黄蓉').width(200).height(400).backgroundColor(Color.Red)
Text('郭襄').width(150).height(300).backgroundColor(Color.Blue)
}
.width(300).height(600)
.backgroundColor(Color.Pink)
}