鸿蒙开发之ArkUI 界面篇 十五 交叉轴对其方式

鸿蒙界面有两个容器一个是Colum、一个是Row，Colum主轴是垂直方向，交叉轴是水平方向，Row的主轴是水平方向，交叉轴是垂直方向，对应方向调整子控件的话，justifyContent调整的是主轴方向的子控件距离，alignItems调整的是交叉轴方向的子控件距离，下面三个Text，主轴方向和交叉轴的方向没有设置任何值，默认居中

加上.alignItems(HorizontalAlign.End)，交叉轴方向水平居右，如图效果：

改为.alignItems(HorizontalAlign.Start)后就是居左显示，如下图

 

加上.alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceEvenly)这两句的显示效果如下图：

完整代码如下：

@Entry
@Component
struct IndexTest {@State message: string = 'IndexTest';build() {Column(){Text('第一个Text').width("50%").fontColor(Color.Red).fontSize(25).backgroundColor(Color.Green).height(100)Text('第二个Text').width("50%").fontColor(Color.Red).fontSize(25).backgroundColor(Color.Green).height(100)Text('第三个Text').width("50%").fontColor(Color.Red).fontSize(25).backgroundColor(Color.Green).height(100)}.width('100%').height('100%').backgroundColor('#ccc').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceEvenly)// .justifyContent(FlexAlign.SpaceBetween)}
}