「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text和Button组件详解 原创

本篇将详细介绍鸿蒙应用开发中的 Text 和 Button 组件。通过本篇内容，你将学习如何使用 Text 组件显示文本、格式化文本样式，以及如何使用 Button 组件处理点击事件并自定义样式。掌握这些基本组件的用法将为后续的 UI 开发奠定基础。

关键词

• Text 组件
• Button 组件
• 样式设置
• 事件响应
• 状态管理

一、Text 组件基础

Text 组件用于显示文本，支持字体大小、颜色、对齐等样式设置，方便开发者根据需求展示不同的文本信息。

1.1 基本用法

• 直接在 Text 组件中插入字符串或变量来显示文本：

  // 创建一个 Text 组件，显示简单的文本内容
  Text('Hello, HarmonyOS!')
  1.
  2.

  复制

1.2 设置文本样式

• 通过链式调用设置字体大小、粗细和颜色等样式：

  // 设置字体大小、粗细和颜色
  Text('Hello, HarmonyOS!')
    .fontSize(24) // 字体大小为 24
    .fontWeight(FontWeight.Bold) // 加粗显示
    .fontColor(Color.Blue) // 文本颜色为蓝色
  1.
  2.
  3.
  4.
  5.

  复制

1.3 文本对齐方式

• 使用 alignSelf 设置 Text 的对齐方式，例如居中对齐：

  // 设置文本在容器中居中对齐
  Text('Welcome to HarmonyOS')
    .alignSelf(ItemAlign.Center)
    .fontSize(20) // 字体大小为 20
  1.
  2.
  3.
  4.

  复制

1.4 多行显示

• 使用 maxLines 属性限制最大行数，或通过 textOverflow 设置溢出显示方式：

  // 设置最多显示 2 行，溢出时显示省略号
  Text('这是一个非常长的文本，超过一定行数会显示省略号。')
    .maxLines(2) // 最多显示 2 行
    .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出显示省略号
  1.
  2.
  3.
  4.

  复制

运行效果图

二、Button 组件基础

Button 组件用于创建按钮，通常用于捕获用户点击事件。支持自定义样式、圆角和事件响应。

2.1 基本用法

• 在 Button 组件中直接设置按钮文本：

  // 创建一个按钮，显示 “点击我” 文本
  Button('点击我')
  1.
  2.

  复制

2.2 添加点击事件

• 使用 onClick 函数监听点击事件，并在按钮点击时触发回调函数：

  // 创建一个按钮，点击时执行 onClick 回调
  Button('点击增加计数')
    .onClick(() => { // 添加点击事件处理函数
      this.count += 1; // 每次点击时，count 值加 1
    })
  1.
  2.
  3.
  4.
  5.

  复制

2.3 按钮样式设置

• 通过 fontSize、fontColor 等设置按钮文本样式：

  // 设置按钮字体大小、颜色和背景颜色
  Button('提交')
    .fontSize(18) // 字体大小为 18
    .fontColor(Color.White) // 字体颜色为白色
    .backgroundColor(Color.Green) // 背景颜色为绿色
  1.
  2.
  3.
  4.
  5.

  复制

2.4 设置按钮圆角和边框

• 使用 borderRadius 和 borderColor 实现圆角和边框样式：

  // 设置按钮圆角和边框样式
  Button('圆角按钮')
    .borderRadius(10) // 圆角半径为 10
    .borderColor(Color.Gray) // 边框颜色为灰色
    .backgroundColor(Color.Grey) // 背景颜色为灰色
    .fontColor(Color.Black) // 字体颜色为黑色
  1.
  2.
  3.
  4.
  5.
  6.

  复制

运行效果图

三、Text 与 Button 组件结合实例

在实际开发中，Text 和 Button 组件经常结合使用。下面是一个简单的计数器实例，点击按钮时，Text 显示的计数值更新。

3.1 完整示例代码

@Entry
@Component
struct CounterApp {
  @State count: number = 0; // 定义一个状态变量 count，用 @State 修饰管理状态

  build() {
    Column() {
      // 显示应用标题
      Text('计数器应用')
        .fontSize(24) // 标题字体大小为 24
        .fontWeight(FontWeight.Bold) // 标题字体加粗
        .margin({ top: 20 }) // 顶部边距为 20
        .alignSelf(ItemAlign.Center) // 水平居中对齐

      // 显示当前计数值
      Text(this.count.toString())
        .fontSize(50) // 字体大小为 50
        .fontWeight(FontWeight.Bold) // 字体加粗
        .margin({ top: 20, bottom: 20 }) // 上下边距分别为 20
        .alignSelf(ItemAlign.Center) // 水平居中对齐

      // 增加计数的按钮
      Button('增加')
        .onClick(() => { // 添加点击事件处理函数
          this.count += 1; // 每次点击，count 值增加 1
        })
        .fontSize(18) // 字体大小为 18
        .fontColor(Color.White) // 按钮字体颜色为白色
        .backgroundColor(Color.Blue) // 按钮背景颜色为蓝色
        .width(100) // 按钮宽度为 100
        .height(50) // 按钮高度为 50
        .alignSelf(ItemAlign.Center) // 水平居中对齐
        .borderRadius(10) // 圆角半径为 10
    }
    .width('100%') // Column 容器宽度为 100%
    .height('100%') // Column 容器高度为 100%
    .padding(20) // 设置内边距为 20
  }
}
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.
32.
33.
34.
35.
36.
37.
38.
39.

3.2 说明

• 该实例使用 @State 修饰的 count 变量保存计数值。
• 点击按钮时，触发 onClick 事件使 count 值递增。
• Text 组件实时更新 count 值，实现简单的计数显示。

四、Text 与 Button 组件进阶技巧

4.1 动态样式

• 使用条件表达式动态改变组件的样式。例如，当计数值为偶数时按钮背景为蓝色，为奇数时为红色：

  // 动态设置按钮颜色，根据 count 是奇数或偶数显示不同颜色
  Button('增加')
    .onClick(() => {
      this.count += 1;
    })
    .backgroundColor(this.count % 2 === 0 ? Color.Blue : Color.Red) // 偶数蓝色，奇数红色
  1.
  2.
  3.
  4.
  5.
  6.

  复制

4.2 多语言支持

• 使用资源文件实现 Text 内容的多语言适配。在 string.json 文件中定义键值，然后引用：

  • 默认语言：src/main/resources/base/element/string.json
  • 中文（中国）：src/main/resources/zh_CN/element/string.json

  // string.json
  {
  	"name": "app_title",
  	"value": "计数器应用"
  }
  
  // 使用
  Text($r('app.string.app_title'))
    .fontSize(24)
    .alignSelf(ItemAlign.Center)
  1.
  2.
  3.
  4.
  5.
  6.
  7.
  8.
  9.
  10.

  复制

4.3 按钮点击反馈

• 使用 backgroundColor 动态变更按钮颜色，或添加 opacity 设置按下反馈效果：

  // 添加按钮点击反馈效果，使用 opacity 动态调整透明度
  Button('提交')
    .onClick(() => {
      // 提交事件
      this.count += 1;
      this.isPressed = !this.isPressed; // 改变 isPressed 状态
    })
    .backgroundColor(Color.Green) // 背景颜色为绿色
    .opacity(this.isPressed ? 0.8 : 1) // 按下时透明度变为 0.8
  1.
  2.
  3.
  4.
  5.
  6.
  7.
  8.
  9.

  复制

小结

本篇介绍了 Text 和 Button 组件的基础用法及其常见样式、事件响应的实现方法。通过学习这些基础组件的用法，开发者可以熟练创建简单的 UI 元素并结合事件实现交互功能，为鸿蒙应用的 UI 开发打下基础。

下一篇预告

下一篇将深入介绍 Image 组件的使用，展示如何在鸿蒙应用中加载和显示图片。

上一篇： 「Mac畅玩鸿蒙与硬件10」鸿蒙开发环境配置篇10 - 项目实战：计数器应用

下一篇： 「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用

作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=225
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。