乐趣区

关于harmonyos:鸿蒙应用开发之容器组件

jiezi

一、概述

一个丰盛的页面通常是由很多根底组件组成的，那么咱们如何能力让这些组件井井有条地在页面上布局呢？这就须要借助容器组件来实现。

容器组件是一种比拟非凡的组件，它能够蕴含其余的组件，而且依照肯定的法则布局，帮忙开发者生成精美的页面。容器组件除了搁置根底组件外，也能够搁置容器组件，通过多层布局的嵌套，能够布局出更丰盛的页面。

ArkTS 为咱们提供了丰盛的容器组件来布局页面，本文将以构建登录页面为例，介绍 Column 和 Row 组件的属性与应用。

 

二、组件介绍

2.1 布局容器概念

线性布局容器示意依照垂直方向或者程度方向排列子组件的容器，ArkTS 提供了 Column 和 Row 容器来实现线性布局。

  • Column 示意沿垂直方向布局的容器。
  • Row 示意沿程度方向布局的容器。

 

2.2 主轴和穿插轴概念

在布局容器中，默认存在两根轴，别离是主轴和穿插轴，这两个轴始终是互相垂直的。不同的容器中主轴的方向不一样的。

  • 主轴：在 Column 容器中的子组件是依照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在 Row 容器中的组件是依照从左到右的程度方向布局的，其主轴的方向是程度方向。
  • 穿插轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则穿插轴就是程度方向；如果主轴是程度方向，则穿插轴是垂直方向。

2.3 属性介绍

理解布局容器的主轴和穿插轴，次要是为了让大家更好地了解子组件在主轴和穿插轴的排列形式。接下来，咱们将具体解说 Column 和 Row 容器的两个属性 justifyContent 和 alignItems。

属性名称 形容
justifyContent 设置子组件在主轴方向上的对齐格局。
alignItems 设置子组件在穿插轴方向上的对齐格局。

子组件在主轴方向上的对齐应用 justifyContent 属性来设置，其参数类型是 FlexAlign。FlexAlign 定义了以下几种类型：

主轴方向的对齐（justifyContent）

子组件在主轴方向上的对齐应用 justifyContent 属性来设置，其参数类型是 FlexAlign。FlexAlign 定义了以下几种类型：

  • Start：元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
  • Center：元素在主轴方向核心对齐，第一个元素与行首的间隔以及最初一个元素与行尾间隔雷同。
  • End：元素在主轴方向尾部对齐，最初一个元素与行尾对齐，其余元素与后一个对齐。
  • SpaceBetween：元素在主轴方向平均调配弹性元素，相邻元素之间间隔雷同。第一个元素与行首对齐，最初一个元素与行尾对齐。
  • SpaceAround：元素在主轴方向平均调配弹性元素，相邻元素之间间隔雷同。第一个元素到行首的间隔和最初一个元素到行尾的间隔是相邻元素之间间隔的一半。
  • SpaceEvenly：元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。
穿插轴方向的对齐（alignItems）

子组件在穿插轴方向上的对齐形式应用 alignItems 属性来设置。Column 容器的主轴是垂直方向，穿插轴是程度方向，其参数类型为 HorizontalAlign（程度对齐），HorizontalAlign 定义了以下几种类型：

  • Start：设置子组件在程度方向上依照起始端对齐。
  • Center（默认值）：设置子组件在程度方向上居中对齐。
  • End：设置子组件在程度方向上依照末端对齐。

Row 容器的主轴是程度方向，穿插轴是垂直方向，其参数类型为 VerticalAlign（垂直对齐），VerticalAlign 定义了以下几种类型：

  • Top：设置子组件在垂直方向上居顶部对齐。
  • Center（默认值）：设置子组件在竖直方向上居中对齐。
  • Bottom：设置子组件在竖直方向上居底部对齐。

2.4 接口介绍

接下来，咱们介绍 Column 和 Row 容器的接口。

容器组件 接口
Column Column(value?:{space?: string number})
Row Row(value?:{space?: string number})

Column 和 Row 容器的接口都有一个可选参数 space，示意子组件在主轴方向上的间距。

三、根本应用

咱们来具体解说如何高效的应用 Column 和 Row 容器组件来构建这个登录页面。

当咱们从设计同学那拿到一个页面设计图时，咱们须要对页面进行拆解，先确定页面的布局，再剖析页面上的内容别离应用哪些组件来实现。

咱们仔细分析这个登录页面。在动态布局中，组件整体是从上到下布局的，因而构建该页面能够应用 Column 来构建。在此基础上，咱们能够看到有局部内容在程度方向上由几个根底组件形成，例如页面两头的短信验证码登录与遗记明码以及页面最下方的其余形式登录，那么构建这些内容的时候，能够在 Column 组件中嵌套 Row 组件，继而在 Row 组件中实现程度方向的布局。

根据上述页面拆解，在 Column 容器里，顺次是 Image、Text、TextInput、Button 等根底组件，还有两组组件是应用 Row 容器组件来实现的，次要代码如下：

@Entry
@Component
export struct LoginPage {build() {Column() {Image($r('app.media.logo'))
        ...
      Text($r('app.string.login_page'))
        ...
      Text($r('app.string.login_more'))
        ...
      TextInput({placeholder: $r('app.string.account') })
        ...
      TextInput({placeholder: $r('app.string.password') })
        ...
      Row() {Text($r(…)) 
        Text($r(…)) 
      }
      Button($r('app.string.login'), {type: ButtonType.Capsule, stateEffect: true})
        ...
      Row() {this.imageButton($r(…))
        this.imageButton($r(…))
        this.imageButton($r(…))
      }
      ...
    }
    ...
  }
}

咱们具体看一下应用 Row 容器的两组组件。两个文本组件展现的内容是按程度方向布局的，应用两端对齐的形式。这里咱们应用 Row 容器组件，并且须要配置主轴上（程度方向）的对齐格局 justifyContent 为 FlexAlign.SpaceBetween（两端对齐）。

Row() {Text($r(…)) 
  Text($r(…)) 
  }
  .justifyContent(FlexAlign.SpaceBetween)
  .width('100%')

其余登录形式的三个按钮也是按程度方向布局的，同样应用 Row 容器组件。这里按钮的间距是统一的，咱们能够通过配置可选参数 space 来设置按钮间距，使子组件间距统一。

Row({space: CommonConstants.LOGIN_METHODS_SPACE}) {this.imageButton($r(…))
  this.imageButton($r(…))
  this.imageButton($r(…))
}

至此，你曾经实现这个登录页面的简略布局实现了。

退出移动版