其语法格式是:
Flex(参数对象){
字组件1,
字组件2,
字组件3,
字组件4
}
这里你会发现,其实和Row容器,Colum容器的语法格式差不多,核心的关键是Colum、Row是不支持换行,实现FlexInterface接口,对外提供的属性是FlexOptions提供的,方向是FlexDirection的值提供,默认是从左往右,主轴对其方式仍然是justifyContent,交叉轴对其方式alignItems,换行wrap。核心代码如下,如果需求变,适当调整就行
实现下面效果:
,
垂直方向,外层容器是Colum,上面是Text,下面是Flex+Text,代码如下:
@Entry @Component struct Index {build() {Column(){Text('学习选择').fontSize(30).fontWeight(777).padding(15).width('100%')Flex({// direction:FlexDirection.Row,// justifyContent:FlexAlign.Start,//主轴方向// alignItems:ItemAlign.Center, //交叉轴方向wrap:FlexWrap.Wrap}){Text('ArKUI').fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)Text('ArKTS').fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)Text('界面开发').fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)Text('系统能力').fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)Text('权限控制').fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)Text('元服务').fontSize(25).padding(15).backgroundColor('#f1f1f1').margin(5)}.width('100%')} } }总结:Flex组件的特点是可以换行,也可以指定方向,垂直方向或者是水平方向,默认是水平方向,指定方向是FlexDirection,对其方式也分为主轴对其和交叉轴对其方式,也可以指定还不换行,不换行的效果就是垂直布局或者是线性布局