鸿蒙界面有两个容器一个是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)} }