Flex是一个容器组件,它里面的内容是Flex布局,这个内容是横向的还是纵向的,取决的是flask本身的一个
布局的方向,主要还是看往里面传的参数,传参的方法就是Flex({再这里传如键值对}),比如说我们想让这个布局变成横向的布局就是传入 direction:FlexDirection.Row这个属性
Flex容器里面的参数 | 与下面表关联的外键 | |
direction【地rui可神:方向】 | 关于它布局方向的键 | 1 |
justifyContent【夹死听fai康ten特:主轴方向的对齐方式】 | 关于它主轴对齐方式的键 | 2 |
alignItems【额len 爱特们斯:一种对齐方式】 | 一种对齐方式关于侧轴的对齐方式 | 3 |
wrap【外普:换行】 |
参数对应的属性 | 与上面表关联的外键 | |
FlexDirection【弗莱克斯地rui可神:flask布局的方向】 | row【肉:横向】 | 1 |
FlexAlign | Start【开始】 Center【中心】 End【结尾】 SpaceBetween【平均往两边对齐 】 SpaceAround【平均居中】 SpaceEvenly【平均分布】 | 2 |
ItemAlign[这个一定要主要提示的参数是不是这个纵向的侧轴不长这样】 | Auto Start Center End Baseline Stretch | 3 |
FlexWrap【弗莱克斯外朴:wrap对应的一个属性它里面集成了一些关于换行的方法】 | NoWrap Wrap WrapReverse |
下面我们来做一个实战案例来展示一下
效果图如下
实现代码
@Entry
@Component
struct FlexCase {
@State message: string = 'Hello World';
build() {
Flex({direction:FlexDirection.Row,
justifyContent:FlexAlign.SpaceAround,
alignItems:ItemAlign.Center,
wrap:FlexWrap.Wrap
}){
//Flex布局
Row()
.width(100)
.height(100)
.backgroundColor(Color.Blue)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Blue)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Blue)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Blue)
Row()
.width(100)
.height(100)
.backgroundColor(Color.Blue)
}
.backgroundColor(Color.Pink)
.width('100%')
}
}
在arkUI中,我们的内容如果超过了屏幕显示,则不会显示滚动条,需要使用Scroll来包裹
需要注意的是: 该组件滚动的前提是主轴方向大小小于内容大小。子组件不要设置高度,否则不能滚动