#HarmonyOS NEXT体验官# 玩转 HarmonyOS UI 设计：基础组件入门原创

SoraLuna

发布于 2024-8-9 19:05

浏览

1收藏

玩转 HarmonyOS UI 设计：基础组件入门

本文将探讨如何利用 HarmonyOS 的基础 UI 组件设计出丰富且动态的用户界面。通过以下三个部分的学习，你将掌握按钮（Button）、文本输入框（TextInput）、文本显示框（Text）等关键组件的使用技巧，并了解如何处理用户输入和组件的交互事件。

一、按钮组件 (Button)

按钮是用户与应用程序进行交互的主要方式之一。在 HarmonyOS 中，按钮组件非常灵活，支持多种样式和事件处理。

按钮的属性
- HarmonyOS 提供了丰富的属性来定制按钮，例如 type、fontSize、fontColor 等，允许开发者根据需求调整按钮的外观和行为。

创建简单按钮

你可以通过设置按钮的文本和样式，快速创建一个符合设计要求的按钮：

@Component
export struct ButtonDemo {
  build() {
    Column() {
      Button('Click Me')
        .width('50%')
        .height('50%')
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

预览效果：

#HarmonyOS NEXT体验官# 玩转 HarmonyOS UI 设计：基础组件入门-鸿蒙开发者社区

添加点击事件

通过为按钮添加点击事件，你可以使应用程序响应用户操作，改变按钮的状态或执行其他逻辑：

@Component
export struct ButtonDemo {
  @State clicked: boolean = false

  build() {
    Column() {
      Button(this.clicked ? 'Clicked!' : 'Click Me')
        .width('50%')
        .height('50%')
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .fontSize(20)
        .onClick(() => this.clicked = !this.clicked)
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

预览效果：

#HarmonyOS NEXT体验官# 玩转 HarmonyOS UI 设计：基础组件入门-鸿蒙开发者社区

二、文本输入框组件 (TextInput)

文本输入框是用户输入信息的主要方式。HarmonyOS 的 TextInput 组件提供了多种属性，允许你定制输入框的外观和行为。

文本输入框的属性
- 你可以通过属性设置输入类型、占位符文本、最大长度等，确保输入框满足应用的需求。

创建简单文本输入框

使用以下代码创建一个带有占位符的文本输入框：

@Component
export struct TextInputDemo {
  @State inputText: string = ''

  build() {
    Column() {
      TextInput({ placeholder: 'Enter text here' })
        .onChange((value) => this.inputText = value)
        .backgroundColor(Color.Pink)
        .fontColor(Color.Black)
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

预览效果：

#HarmonyOS NEXT体验官# 玩转 HarmonyOS UI 设计：基础组件入门-鸿蒙开发者社区

处理用户输入

你还可以处理用户输入，并根据输入内容进行验证或动态更新 UI：

@Component
export struct TextInputDemo {
  @State inputText: string = ''
  @State isValid: boolean = true

  build() {
    Column() {
      TextInput({ placeholder: 'Enter text here' })
        .onChange((value) => {
          this.inputText = value
          this.isValid = this.inputText.length > 0
        })
        .backgroundColor(Color.Pink)
        .fontColor(Color.Black)
        .fontSize(20)

      if (!this.isValid) {
        Text('Input cannot be empty')
          .fontColor(Color.Red)
      }
    }
    .width('100%')
    .height('100%')
  }
}
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.

预览效果：

#HarmonyOS NEXT体验官# 玩转 HarmonyOS UI 设计：基础组件入门-鸿蒙开发者社区

三、文本显示框组件 (Text)

文本显示框是用来展示静态文本的常用组件。在 HarmonyOS 中，Text 组件支持多种样式设置，如字体大小、颜色、对齐方式等。

文本显示框的属性
- 你可以通过属性设置文本对齐、字体大小、颜色等，来定制文本的显示效果。

创建简单文本显示框

以下代码展示了如何创建一个带有自定义样式的文本显示框：

@Component
export struct TextDemo {
  build() {
    Column() {
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Orange)
      Text($r('app.string.app_name'))
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Green)
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.