弹性布局(Flex)
Flex官方文档:文档中心
线性布局比弹性布局优化更好,单行/单列的场景下,还是优先使用线性布局(线性布局底层是基于Flex实现的)当涉及到布局换行的情况下就可以考虑使用弹性布局
Flex默认主轴水平往右,交叉轴垂直于主轴往下
弹性布局通过属性进行布局
主轴方向:direction
可以选择的参数:
eg:
import { window } from '@kit.ArkUI'
@Entry
@Component
struct Index {
build() {
Flex({
direction:FlexDirection.Row //主轴方向为行方向
}){
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
}
.width("100%")
.height(600)
.backgroundColor(Color.Green)
}
}
import { window } from '@kit.ArkUI'
@Entry
@Component
struct Index {
build() {
Flex({
direction:FlexDirection.Column //主轴方向为列方向
}){
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
}
.width("100%")
.height(600)
.backgroundColor(Color.Green)
}
}
主轴对齐方式:justifyContent
可以选择的参数:
@Entry
@Component
struct Index {
build() {
Flex({
direction:FlexDirection.Row, //主轴方向为行方向
justifyContent:FlexAlign.Center //主轴对齐方式 居中
}){
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
}
.width("100%")
.height(600)
.backgroundColor(Color.Green)
}
}
交叉轴对齐方式:alignItems
可以选择的参数:
@Entry
@Component
struct Index {
build() {
Flex({
direction:FlexDirection.Row, //主轴方向为行方向
justifyContent:FlexAlign.Center, //主轴对齐方式 居中
alignItems:ItemAlign.Stretch //交叉轴对齐方式 拉伸铺满 相当于width/weight("100%")
}){
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
}
.width("100%")
.height(600)
.backgroundColor(Color.Green)
}
}
布局换行:warp
观察以下代码可以发现:
每个子盒子的宽度为80,但父盒子的大小被设定在了300,但是为什么还是能正常显示在同一行?
Flex布局又被叫做伸缩布局,当 子盒子的总和溢出父盒子,默认会进行压缩显示
@Entry
@Component
struct Index {
build() {
Flex({
direction:FlexDirection.Row, //主轴方向为行方向
justifyContent:FlexAlign.Center, //主轴对齐方式 居中
alignItems:ItemAlign.Center, //交叉轴对齐方式 拉伸填充 相当于width/weight("100%")
// wrap:FlexWrap.
}){
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
}
.width(300)
.height(300)
.backgroundColor(Color.Green)
}
}
可选参数:
@Entry
@Component
struct Index {
build() {
Flex({
direction:FlexDirection.Row, //主轴方向为行方向
justifyContent:FlexAlign.Center, //主轴对齐方式 居中
alignItems:ItemAlign.Center, //交叉轴对齐方式 拉伸填充 相当于width/weight("100%")
wrap:FlexWrap.Wrap //Wrap:换行 NoWarp:不换行
}){
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
Text()
.width(80).height(80)
.backgroundColor(Color.Blue)
.border({width:1,color:Color.Black})
}
.width(300)
.height(300)
.backgroundColor(Color.Green)
}
}