> 文档中心 > HarmonyOS建立一个漂亮的页面

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:网格容器,由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局。

化妆学校