HarmonyOS布局容器组件

一个页面需要由若干组件组成，我们如何才能让这些组件有条不紊的在页面上布局，就需要借助容器组件来完成，比如布局容器Colum，Row等。

一般进行页面开发的流程中，当我们拿到页面设计图时，需要先对页面进行拆解，先确定页面的布局，再分析页面上的内容分别使用哪些组件来实现。在静态布局中，总得来说，组件是从上到下布局的。

 我们先学习布局容器的基础知识。

 了解了主轴和交叉轴，我们就可以更深刻和准确的理解相关属性，并正确使用。

比如在Column和Row组件中的相关参数的含义。

• space：代表的是子组件在主轴方向上的间距
• justifyContent:设置子组件在主轴方向上的对齐格式
• alignItems: 设置子组件在交叉轴方向上的对齐格式

使用上述属性的时候，前提是没有设置组件的sapce属性，否则justifyContent设置将会无效，看下面反例：

 这是正确的效果：

 alignItems属性的介绍

 示例代码：

@Entry@Componentstruct LoginPage {  @State message: string = 'Hello World'  build() {    Column({space:20}){      Text('其它登陆方式') .fontSize(12)      Row(){ Button('方式一') Button('方式二') Button('方式三')      }      .width('100%')      .height(300)      .backgroundColor(Color.Black)      .justifyContent(FlexAlign.SpaceEvenly)      .alignItems(VerticalAlign.Bottom)    }    .alignItems(HorizontalAlign.End)      .width('100%')  }}

实现效果：

 以上是关于HarmonyOS3.1中ArkTS里的布局容器组件 Colum和Row的学习。