HarmonyOS建立一个漂亮的页面

1.常用基础组件

基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button、LoadingProgress等。

（1）Text组件用于在界面上展示一段文本信息，可以包含子组件Span。

（2）Image组件用来渲染展示图片，它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高，图片就能加载出来，

（3）TextInput组件用于输入单行文本，响应输入事件。TextInput的使用也非常广泛，例如应用登录账号密码、发送消息等。和Text组件一样，TextInput组件也支持文本样式设置，下面的示例代码实现了一个简单的输入框：

（4）Button组件主要用来响应点击操作，可以包含子组件。

2.构建简单的页面

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

• Column表示沿垂直方向布局的容器。

• Row表示沿水平方向布局的容器。

主轴和交叉轴的概念

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

主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在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(…))

}

3.常用组件与布局

• Text：显示一段文本的组件。

• Image：图片组件，支持本地图片和网络图片的渲染展示。

• TextInput：可以输入单行文本并支持响应输入事件的组件。

• Button：按钮组件，可快速创建不同样式的按钮。

• LoadingProgress：用于显示加载动效的组件。

• Flex：应用弹性方式布局子组件的容器组件。

• Column：沿垂直方向布局的容器。

• Row：沿水平方向布局容器。

• List：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

• Swiper：滑动容器，提供切换子组件显示的能力。

• Grid：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。