鸿蒙UI开发快速入门 —— part11: 鸿蒙计算器开发实践

1、前言

经过我们前面10章的学习，我们基本上可以开发出一个简单的APP了，为了巩固学习的内容，我们先开发一个计算器APP来连个手（文末有源代码），界面如下：

image.png

  • 包含基本的计算器运算功能

  • 支持一键清空，支持逐个删除数字

  • 支持将上次计算的过程保存下来，下次打开app继续；

  • 支持清理之前保存的记录

这里面我们会用到知识如下：

  1. 开发UI界面（基本控件的使用以及基本布局的使用）；

  2. 监听用户点击事件，在输入栏中及时反馈（动态交互）；

  3. 支持将过程持久化到本地，下次打开后自动恢复；

let's go!💪🏻💪🏻💪🏻

2、创建项目 & 初始化

打开开发工具 DevEco-Studio，按照以下顺序创建项目，过程不再详述，看截图。

图片图片

图片

3、UI描述

我们的布局比较简单，分三个大块从上到下，分别是：

  1. 用户输入与计算结果显示部分；

  2. 核心数字键盘部分；

  3. 一个大的=按钮

示意图如下：

image.png

我们可以注意到，数字按钮的样式是一样的（蓝色），操作符按钮的样式也是一样的（绿色），三个功能按钮的样式也是一样的（红色），因此，我们可以使用鸿蒙的样式复用只是来减少重复代码量。

我们三部分复用的样式代码如下：

// 数字键盘的公共样式
@Extend(Button) function numberBtn(num: number, click: (num: number) => void) {
  .type(ButtonType.Capsule)
  .width(60)
  .height(60)
  .onClick(() => click(num))
}
// 运算符公共样式
@Extend(Button) function operatorBtn() {
  .type(ButtonType.Capsule)
  .backgroundColor(Color.Green)
  .width(60)
  .height(60)
}

// 额外功能公共样式
@Extend(Button) function extraBtn() {
  .type(ButtonType.Capsule)
  .width(60)
  .height(60)
  .backgroundColor(Color.Red)
}

紧接着就是我们的UI描述部分代码，如下：

  build() {
    Column() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .width('100%')
          .textAlign(TextAlign.End)
      }
      .padding(10)
      .backgroundColor('gray')
      .borderWidth(1)
      .borderRadius(10)
      .margin(10)


      Row() {
        Button('7').numberBtn(7, this.onNumberClick)
        Button('8').numberBtn(8, this.onNumberClick)
        Button('9').numberBtn(9, this.onNumberClick)
        Button('重置').extraBtn().onClick(this.onResetClick)
      }
      .justifyContent(FlexAlign.SpaceAround)
      .numberRow()

      Row() {
        Button('4').numberBtn(4, this.onNumberClick)
        Button('5').numberBtn(5, this.onNumberClick)
        Button('6').numberBtn(6, this.onNumberClick)
        Button('删除').extraBtn().onClick(this.onDeleteClick)

      }
      .numberRow()
      .justifyContent(FlexAlign.SpaceAround)

      Row() {
        Button('1').numberBtn(1, this.onNumberClick)
        Button('2').numberBtn(2, this.onNumberClick)
        Button('3').numberBtn(3, this.onNumberClick)
        Button('清理').extraBtn().onClick(this.onClearClick)
      }
      .numberRow()
      .justifyContent(FlexAlign.SpaceAround)

      Row() {
        Button('%')
          .type(ButtonType.Capsule)
          .width(60)
          .height(60)
        Button('0').numberBtn(0, this.onNumberClick)
        Button('.')
          .type(ButtonType.Capsule)
          .width(60)
          .height(60)
          .onClick(this.onDotClick)
        Button('保存').operatorBtn().onClick(this.onSaveClick)
      }
      .numberRow()
      .justifyContent(FlexAlign.SpaceAround)

      Row() {
        Button('x')
          .operatorBtn()
          .onClick(() => this.onOperatorClick('x'))
        Button('÷')
          .operatorBtn()
          .onClick(() => this.onOperatorClick('÷'))
        Button('+')
          .operatorBtn()
          .onClick(() => this.onOperatorClick('+'))
        Button('-')
          .operatorBtn()
          .onClick(() => this.onOperatorClick('-'))
      }
      .numberRow()
      .justifyContent(FlexAlign.SpaceAround)

      Row() {
        Button('=')
          .width('100%')
          .backgroundColor(Color.Pink)
          .onClick(this.onCalcClick)
      }
      .margin(10)
    }
    .height('100%')
  }

4、用户交互

紧接着，我们来实现用户的功能交互

  • 用户点击数字按钮时，监听器事件
  onNumberClick = (num: number) => {
    if (this.message === '0') {
      this.message = `${num}`;
    } else {
      this.message += `${num}`
    }
  }
  • 用户点击运算符按钮时的监听器事件
  onOperatorClick = (_opt: string) => {
    this.message += _opt;
    this.calcFinished = false;
  }
  • 数据持久化和清空持久化数据
  onSaveClick = () => {
    AppStorage.SetOrCreate('lastResult', this.message);
  }
  onClearClick = () => {
    PersistentStorage.DeleteProp('lastResult')
    this.message = '0';
  }

其他的功能感兴趣可以在文末看详细的源代码。演示如下（包含了数据持久化，现场恢复的演示）

图片

5、源代码

代码仓库地址：

https://gitee.com/lantingshuxu/harmony-calculator

速览核心的UI代码：

// 数字键盘的公共样式
@Extend(Button) function numberBtn(num: number, click: (num: number) => void) {
  .type(ButtonType.Capsule)
  .width(60)
  .height(60)
  .onClick(() => click(num))
}
// 运算符公共样式
@Extend(Button) function operatorBtn() {
  .type(ButtonType.Capsule)
  .backgroundColor(Color.Green)
  .width(60)
  .height(60)
}
// 额外功能公共样式
@Extend(Button) function extraBtn() {
  .type(ButtonType.Capsule)
  .width(60)
  .height(60)
  .backgroundColor(Color.Red)
}

PersistentStorage.PersistProp('lastResult', '0');

type Operator = '+' | '-' | '*' | '/' | '(' | ')';
// 传入字符串，运算其结果（可以跳过）
function calculate(expression: string): number {
    //.. 这部分代码是计算用户输入结果d的，不重要，省略
}

@Entry
@Component
struct Index {
  @StorageProp('lastResult') message: string = '0'
  calcFinished: boolean = true;

  @Styles numberRow() {
    .width('100%')
    .margin({ bottom: 10 })
  }

  build() {
    Column() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .width('100%')
          .textAlign(TextAlign.End)
      }
      .padding(10)
      .backgroundColor('gray')
      .borderWidth(1)
      .borderRadius(10)
      .margin(10)


      Row() {
        Button('7').numberBtn(7, this.onNumberClick)
        Button('8').numberBtn(8, this.onNumberClick)
        Button('9').numberBtn(9, this.onNumberClick)
        Button('重置').extraBtn().onClick(this.onResetClick)
      }
      .justifyContent(FlexAlign.SpaceAround)
      .numberRow()

      Row() {
        Button('4').numberBtn(4, this.onNumberClick)
        Button('5').numberBtn(5, this.onNumberClick)
        Button('6').numberBtn(6, this.onNumberClick)
        Button('删除').extraBtn().onClick(this.onDeleteClick)

      }
      .numberRow()
      .justifyContent(FlexAlign.SpaceAround)

      Row() {
        Button('1').numberBtn(1, this.onNumberClick)
        Button('2').numberBtn(2, this.onNumberClick)
        Button('3').numberBtn(3, this.onNumberClick)
        Button('清理').extraBtn().onClick(this.onClearClick)
      }
      .numberRow()
      .justifyContent(FlexAlign.SpaceAround)

      Row() {
        Button('%')
          .type(ButtonType.Capsule)
          .width(60)
          .height(60)
        Button('0').numberBtn(0, this.onNumberClick)
        Button('.')
          .type(ButtonType.Capsule)
          .width(60)
          .height(60)
          .onClick(this.onDotClick)
        Button('保存').operatorBtn().onClick(this.onSaveClick)
      }
      .numberRow()
      .justifyContent(FlexAlign.SpaceAround)

      Row() {
        Button('x')
          .operatorBtn()
          .onClick(() => this.onOperatorClick('x'))
        Button('÷')
          .operatorBtn()
          .onClick(() => this.onOperatorClick('÷'))
        Button('+')
          .operatorBtn()
          .onClick(() => this.onOperatorClick('+'))
        Button('-')
          .operatorBtn()
          .onClick(() => this.onOperatorClick('-'))
      }
      .numberRow()
      .justifyContent(FlexAlign.SpaceAround)

      Row() {
        Button('=')
          .width('100%')
          .backgroundColor(Color.Pink)
          .onClick(this.onCalcClick)
      }
      .margin(10)
    }
    .height('100%')
  }

  resetCheck() {
    if (this.calcFinished) {
      this.message = '0';
      this.calcFinished = false;
    }
  }

  onNumberClick = (num: number) => {
    this.resetCheck();
    if (this.message === '0') {
      this.message = `${num}`;
    } else {
      this.message += `${num}`
    }
  }
  onOperatorClick = (_opt: string) => {
    this.message += _opt;
    this.calcFinished = false;
  }
  onDotClick = () => {
    this.resetCheck();
    this.message += '.';
  }
  onResetClick = () => {
    this.message = '0';
    this.calcFinished = true;
  }
  onDeleteClick = () => {
    this.resetCheck();
    if (this.message.length > 1) {
      this.message = this.message.substr(0, this.message.length - 1);
    } else {
      this.message = '0'
    }
  }
  onSaveClick = () => {
    AppStorage.SetOrCreate('lastResult', this.message);
  }
  onClearClick = () => {
    PersistentStorage.DeleteProp('lastResult')
    this.message = '0';
  }
  onCalcClick = () => {
    this.message = calculate(this.message.replace(/x/g, '*').replace(/÷/g, '/')) + '';
    this.calcFinished = true;
  }
}

6、结语

从代码我们可以看到，依旧存在很多相似的重复代码，我们还可以优化下吗？

答案是可以的，使用条件渲染。

请持续关注 "鸿蒙UI开发快速入门 —— part11"

posted @   鸿蒙自习室  阅读(122)  评论(0)  编辑  收藏  举报
相关博文：
· 鸿蒙UI开发快速入门 —— part05:组件的样式复用
· 鸿蒙UI开发快速入门 —— part01: 装饰器&UI描述
· 鸿蒙NEXT开发案例：计数器
· 鸿蒙OS开发教学：【编程之重器-装饰器】
· 鸿蒙应用开发从入门到入行 - 篇3:ArkUI布局基础与制作可交互页面
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示