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

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

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

一、 按钮组件 (Button)

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

1. 按钮的属性

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

2. 创建简单按钮

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

     @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%')
       }
     }
     

预览效果：

3. 添加点击事件

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

     @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%')
       }
     }
     

预览效果：

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

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

1. 文本输入框的属性

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

2. 创建简单文本输入框

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

     @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%')
       }
     }
     

预览效果：

3. 处理用户输入

   • 你还可以处理用户输入，并根据输入内容进行验证或动态更新 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%')
       }
     }
     

预览效果：

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

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

1. 文本显示框的属性

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

2. 创建简单文本显示框

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

     @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%')
       }
     }
     

预览效果：

总结

通过本文的学习，你已经掌握了按钮、文本输入框和文本显示框这些基础组件的使用方法。你还学会了如何处理用户输入和点击事件，为你的应用界面增添了互动性。