「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用-阿里云开发者社区

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

2024-12-10 33

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

关键词

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);
  }
}