HarmonyOS应用开发-常用组件与布局

基础组件

Text

• 功能：用于显示文本内容。
• 属性：可以设置文本颜色、字体大小、字体样式、字体粗细和字体族。

• 示例代码：

Text()
  .fontColor(Color.Blue)
  .fontSize(20)
  .fontStyle(FontStyle.Italic)
  .fontWeight(FontWeight.Bold)
  .fontFamily('Arial')
1
2
3
4
5
6

Image

• 功能：用于显示图像。
• 属性：包括图像的缩放类型、背景颜色、宽度和高度。
  示例代码：

• 示例代码：

Image($r("app.media.image1"))
  .objectFit(ImageFit.Cover)
  .backgroundColor(0xCCCCCC)
  .width(100)
  .height(100)
1
2
3
4
5

TextInput

• 功能：用于接收用户输入的单行文本。
• 属性：可以设置文本样式、提示文本、输入类型、光标位置等。

• 示例代码

TextInput()
  .fontColor(Color.Blue)
  .fontSize(20)
  .fontStyle(FontStyle.Italic)
  .fontWeight(FontWeight.Bold)
  .fontFamily('Arial')

1
2
3
4
5
6
7

Button

• 功能：用于响应点击操作，通常用于实现按钮。
• 属性：可以设置按钮样式、点击事件和包含子组件。

• 示例代码：

Button('登录', { type: ButtonType.Capsule, stateEffect: true })
  .width('90%')
  .height(40)
  .fontSize(16)
  .fontWeight(FontWeight.Medium)
  .backgroundColor('#007DFF')
1
2
3
4
5
6

LoadingProgress

• 功能：用于显示加载进度。
• 属性：可以设置加载进度的颜色、高度和宽度。

• 示例代码：

LoadingProgress()
  .color(Color.Blue)
  .height(60)
  .width(60)
1
2
3
4

基础容器

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

基本属性

容器组件中存在两根轴：主轴和交叉轴。它们始终相互垂直，但它们的方向取决于容器的类型。

• 主轴：在Column容器中，子组件按垂直方向从上到下排列，主轴方向是垂直的。在Row容器中，子组件按水平方向从左到右排列，主轴方向是水平的。
• 交叉轴：交叉轴与主轴垂直相交，如果主轴是垂直的，交叉轴就是水平的，反之亦然。

主轴方向

Column

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(…))
      }
      ...
    }
    ...
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

列表容器

ArkUI提供了List组件和Grid组件，开发者使用List和Grid组件能够很轻松的完成一些列表页面。

List组件

Grid组件

Tabs组件

结语

无论是创建简单的文本标签还是实现复杂的按钮操作，HarmonyOS提供了强大的组件，以帮助您构建出色的用户界面。希望这些组件介绍能帮助您更好地理解和利用HarmonyOS的界面开发能力。