HarmonyOS布局容器组件_harmonyos 下面哪些组件是容器组件?

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

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

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

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

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

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

 

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

 这是正确的效果：

 alignItems属性的介绍

 示例代码：

@Entry
@Component
struct 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的学习。