ArkTS-ArkUI组件-Column、Row容器组件

一.官方文档 

Column、Row 来看看官方文档吧！

二. 基本语法

Column(value?: {space?: string | number})——》沿垂直方向布局的容器。

Row(value?:{space?: number | string })——》沿水平方向布局容器。 

说白了就是在容器内部元素是竖着放还是横着放。 

 先来介绍两个概念：

主轴、交叉轴：

我们将容器内元素排列方向上的轴线称为主轴，与主轴垂直的轴线称之为交叉轴。

主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向 

交叉轴： 与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。

参数space:

参数名	参数类型	必填	参数描述
space	string | number	否	元素主轴方向上的间距。 从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。 默认值：0 说明： 可选值为大于等于0的数字，或者可以转换为数字的字符串。

 一起来看一下吧：

Column：垂直方向间距

Row:水平方向间距

了解了其基本参数，再让我们看看它的其他属性吧 

 三.属性

先来总体介绍一下吧：

属性名称	描述
justifyContent	设置子组件在主轴方向上的对齐格式。
alignItems	设置子组件在交叉轴方向上的对齐格式。

 justifyContent：

主轴方向对齐格式

名称	参数类型	描述
justifyContent	FlexAlign	设置子组件在主轴方向上的对齐格式。 默认值：FlexAlign.Start 从API version 9开始，该接口支持在ArkTS卡片中使用。

先看一下FlexAlign的枚举说明吧：

名称	描述
Start	元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
Center	元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
End	元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
SpaceEvenly	Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

start： 

Start

元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。

Center：

Center

元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

 

 End：

End	元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。

SpaceBetween：

SpaceBetween

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

SpaceAround：

SpaceAround

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

SpaceEvenly：

SpaceEvenly

Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

 

 来看一下效果吧：

该属性Column和Row使用的是一样的参数。 再来看一个特殊一点的吧！

alignItems：

名称	参数类型	描述
alignItems	Row容器使用VerticalAlign枚举 Column容器使用HorizontalAlign枚举	设置子组件在交叉轴方向上的对齐格式。 默认值：VerticalAlign.Center 从API version 9开始，该接口支持在ArkTS卡片中使用。

先来看一下VerticalAlign吧：

名称	描述
Top	顶部对齐。
Center	居中对齐，默认对齐方式。
Bottom	底部对齐。

 Top：

Top

顶部对齐。

 

Center：

Center

居中对齐，默认对齐方式。

 

Bottom：

Bottom

底部对齐。

 

 来看一下效果吧：

为Row容器增加了 .alignItems(VerticalAlign.Top)属性之后文字移至交叉轴（即竖直方向）顶部。

HorizontalAlign： 

 先看一下它的枚举说明——》

名称	描述
Start	按照语言方向起始端对齐。
Center	居中对齐，默认对齐方式。
End	按照语言方向末端对齐。

Start：

Start

按照语言方向起始端对齐。

Center：

Center

居中对齐，默认对齐方式。

End：

End	按照语言方向末端对齐。

 看看实际效果吧：

 为Column容器添加了.alignItems(HorizontalAlign.Start)属性后，元素移至交叉轴（即水平方向）最前端。

四.构建页面

案例来自华为文档

构建页面，我们需要对页面进行拆解，先确定页面的布局，再分析页面上的内容分别使用哪些组件来实现。

我们仔细分析这个登录页面。在静态布局中，组件整体是从上到下布局的，因此构建该页面可以使用Column来构建。在此基础上，我们可以看到有部分内容在水平方向上由几个基础组件构成，例如页面中间的短信验证码登录与忘记密码以及页面最下方的其他方式登录，那么构建这些内容的时候，可以在Column组件中嵌套Row组件，继而在Row组件中实现水平方向的布局。

接下来我们开始构建页面吧：

1.插入图片 

还记得图片资源放在哪里吗？

记得经常回顾复习哦！Image

 2.两行文字-文本框

 

3.输入框 

密码栏记得设置输入框的类型哦！

4. 验证与忘记密码——Row（Text）

没有达到想要的效果，加点属性修饰一下吧：

我们想让两个元素水平居于两侧，是在Row容器内部，那就是主轴——》

注意：需要让Row容器宽度占满，否则对其包裹内容宽度修饰是无用的。 

 5.登录按钮——Buton

6. 注册账号与其他方式登录——两个Text

7. 三个方式——Row（Button）

再次强调：记得设置宽度 

8.优化界面 

因为布局比较简单使用放在了最后优化，可以选择边构建边优化。 

代码： 

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Column({space:10}) {
      Image($r('app.media.huawei'))  //插入图片
        .width(200)           //设置宽度
        .interpolation(ImageInterpolation.High) //设置插值
        .margin({top:30})
      Text('登录界面')
        .fontSize(30)
        .margin({top:30})
        Text('登录账号以使用更多服务')
          .fontSize(20)
          .fontColor(Color.Gray)
      TextInput({placeholder:'账号'})
        .width('80%')
        .height(50)
      TextInput({placeholder:'密码'})
        .width('80%')
        .height(50)
        .type(InputType.Password)
      Row(){
        Text('短信验证码登录')
          .fontColor(Color.Blue)
          .fontSize(15)
        Text('忘记密码')
          .fontColor(Color.Blue)
          .fontSize(15)
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      Button('登录')
        .width('70%')
        .margin({top:50})
      Text('注册账号')
        .fontColor(Color.Blue)
        .margin(30)
      Text('其他方式登录')
        .fontColor(Color.Gray)
        .fontSize(12)
      Row(){
        Button('方式一',{type:ButtonType.Circle})
          .backgroundColor('#B8B8B8')
          .fontSize(8)
          .borderRadius(30)
        Button('方式二',{type:ButtonType.Circle})
          .backgroundColor('#B8B8B8')
          .fontSize(8)
          .borderRadius(30)
        Button('方式三',{type:ButtonType.Circle})
          .backgroundColor('#B8B8B8')
          .fontSize(8)
          .borderRadius(30)

      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)

    }
    .width('100%')

  }
}

五.语录

只要不停的走，回望总会有惊喜！

 夏天到了，不要总呆在空调房里哦！记得劳逸结合哦！！！