「Mac畅玩鸿蒙与硬件42」UI互动应用篇19

「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用

本篇将带你实现一个数字键盘应用，支持用户通过点击数字键输入数字并实时更新显示内容。我们将展示如何使用按钮组件和状态管理来实现一个简洁且实用的数字键盘。

关键词

UI互动应用
数字键盘
按钮组件
状态管理
用户交互

一、功能说明

数字键盘应用将实现以下功能：

用户可以点击数字键进行输入。
输入的数字将实时显示在屏幕上。
用户可以清除输入的内容或删除最后一个数字。
每个数字按钮将触发相应的事件，更新显示内容。

二、所需组件

@Entry 和 @Component 装饰器
Column 和 Row 布局组件
Button 组件用于实现数字键
Text 组件用于显示输入的内容
@State 修饰符用于状态管理

三、项目结构

项目名称：NumberKeyboardApp
自定义组件名称：NumberKeyboardPage 、NumberButton
代码文件：NumberKeyboardPage.ets、Index.ets、NumberButton.ets

四、代码实现

// 文件名：NumberKeyboardPage.ets
import { NumberButton } from "./NumberButton";

@Component
export struct NumberKeyboardPage {
  @State input: string = '';  // 显式指定类型为 string

  // 定义数字按钮内容
  private buttonRows: string[][] = [
    ['1', '2', '3'],
    ['4', '5', '6'],
    ['7', '8', '9'],
    ['0']
  ];

  build() {
    Column({ space: 20 }) {
      // 显示当前输入
      Text(`输入: ${this.input}`)
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .alignSelf(ItemAlign.Center);

      // 使用 ForEach 遍历每一行按钮
      ForEach(this.buttonRows, (row: string[]) => {
        Row({ space: 10 }) {
          // 遍历当前行的按钮
          ForEach(row, (label: string) => {
            // 使用双向绑定
            NumberButton({ label: label }).onClick(() => this.input += label);
          });
        }
      });

      // 清除和删除按钮
      Row({ space: 10 }) {
        Button('清空')
          .onClick(() => this.clearInput())
          .backgroundColor(Color.Red)
          .fontColor(Color.White)
          .width('45%')
          .alignSelf(ItemAlign.Center);

        Button('删除')
          .onClick(() => this.deleteLastCharacter())
          .backgroundColor(Color.Gray)
          .fontColor(Color.White)
          .width('45%')
          .alignSelf(ItemAlign.Center);
      }
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center);
  }

  // 清空输入
  private clearInput() {
    this.input = '';
  }

  // 删除最后一个字符
  private deleteLastCharacter() {
    this.input = this.input.slice(0, -1);
  }
}

// 文件名：Index.ets
import { NumberKeyboardPage } from "./NumberKeyboardPage";  // 引入 NumberKeyboardPage

@Entry
@Component
export struct Index {
  build() {
    Column({ space: 20 }) {
      // 渲染 NumberKeyboardPage 组件
      NumberKeyboardPage();
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center);
  }
}

// 文件名：NumberButton.ets
@Component
export struct NumberButton {
  @Prop label: string = '';  // 按钮标签

  build() {
    Button(this.label)
      .backgroundColor(Color.Blue)
      .fontColor(Color.White)
      .width('30%')
      .alignSelf(ItemAlign.Center)
      .height(60);
  }
}