首页 > 其他分享 >『牛角书』鸿蒙基础计算器

『牛角书』鸿蒙基础计算器

时间：2022-12-17 14:40:40浏览次数：44  
标签：牛角 鸿蒙 32 numeric height width 64 backgroundColor 计算器

简介

这是我自己的鸿蒙期末考查大作业，通过一学期课程的学习，研究出来的一些成果，代码还有很多需要优化的地方，本文内容仅为利用组件简单的计算器页面。

成果展示

『牛角书』鸿蒙基础计算器_Text

『牛角书』鸿蒙基础计算器_Text_02

开发思路

计算器一般由三个组成部分，分别是计算，答案，键盘。由于本次只是利用组件进行效果展示因此计算和答案部分利用文本组件，键盘利用按钮组件来实现。

主要代码
import { Calculator } from '../cal/calculator';
import router from '@system.router';

@Entry
@Component
struct Index {
  @State numeric: string = '';
  @State total: string = '0';
 build() {
"    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {"
      // 顶部功能按钮
"      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {"
"        Button({ type: ButtonType.Normal, stateEffect: false }) {"
          Row() {
            Image($r("app.media.more")).width(32).height(32).margin({ left: 12 })
"            Text('计算器').fontSize(24).fontColor('#515151').margin({ left: 5, right: 12 })"
          }
        }
        .height(64)
        .backgroundColor('#f5f5f5')

"        Button({ type: ButtonType.Normal, stateEffect: false }) {"
          Image($r("app.media.history")).width(32).height(32).margin({ right: 12 })
            .onClick(() => {
              router.push({ uri: 'pages/history' })
            })
        }
        .height(64)
        .backgroundColor('#f5f5f5')
      }
      .flexGrow(1)
      .width('100%')
      .backgroundColor('#f2f2f2')
      
      // 回显及结果显示区
      Flex({ direction: FlexDirection.Column }) {
        Text(this.numeric)
          .fontSize(24)
          .fontColor('#999999')
          .textAlign(TextAlign.End)
          .width('100%')
          .height(120)
          .alignSelf(ItemAlign.Center)
"          .padding({ top: 20, left: 10, right: 10 })"
        Text(this.total).fontSize(32).fontColor('#444444')
        .textAlign(TextAlign.End)
          .width('100%')
          .height(120)
          .alignSelf(ItemAlign.Center)
"          .padding({ left: 10, right: 10 })"
      }
      .width('100%')
      .height(200)
      .backgroundColor('#ffffff')
      
      // 功能按钮、符号按钮、数字按钮
"      Flex({direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {"
        Column({space: 20}) {
          Row({space: 20}) {
"            Button('C', {type: ButtonType.Circle})"
              .width(64).height(64)
              .fontSize(20).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
"              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
              .onClick(() => {
                this.numeric = '';
                this.total = '0';
              })
"            Button('÷', {type: ButtonType.Circle})"
              .width(64).height(64)
              .fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
"              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
              .onClick(() => {
                this.numeric += '÷';
              })
              "            Button('×', {type: ButtonType.Circle})"
              .width(64).height(64)
              .fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
"              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
              .onClick(() => {
                this.numeric += '×';
              })
"            Button('⇐', {type: ButtonType.Circle})"
              .width(64).height(64)
              .fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
"              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
              .onClick(() => {
                if (this.numeric.length > 0) {
"                  this.numeric = this.numeric.substring(0, this.numeric.length - 1)"
                }
              })
          }
          Row({space: 20}) {
"            Button('7', {type: ButtonType.Circle})"
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
"              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
              .onClick(() => {
                this.numeric += '7';
              })
"            Button('8', {type: ButtonType.Circle})"
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
"              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
              .onClick(() => {
                this.numeric += '8';
              })
"            Button('9', {type: ButtonType.Circle})"
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
"              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
              .onClick(() => {
                this.numeric += '9';
              })
"            Button('-', {type: ButtonType.Circle})"
              .width(64).height(64)
              .fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
"              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
              .onClick(() => {
                this.numeric += '-';
              })
          }
          Row({space: 20}) {
"            Button('4', {type: ButtonType.Circle})"
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
"              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
              .onClick(() => {
                this.numeric += '4';
              })
"            Button('5', {type: ButtonType.Circle})"
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
"              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
              .onClick(() => {
                this.numeric += '5';
              })
"            Button('6', {type: ButtonType.Circle})"
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
"              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
              .onClick(() => {
                this.numeric += '6';
              })
"            Button('+', {type: ButtonType.Circle})"
              .width(64).height(64)
              .fontSize(32).fontColor('#1296DB').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
"              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
              .onClick(() => {
                this.numeric += '+';
              })
          }
          Row({space: 20}) {
            Column({space: 20}) {
              Row({space: 20}) {
"                Button('1', {type: ButtonType.Circle})"
                  .width(64).height(64)
                  .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
                  .backgroundColor('#FFFDFD')
                  .borderRadius(32)
"                  .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
                  .onClick(() => {
                    this.numeric += '1';
                  })
"                Button('2', {type: ButtonType.Circle})"
                  .width(64).height(64)
                  .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
                  .backgroundColor('#FFFDFD')
                  .borderRadius(32)
"                  .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
                  .onClick(() => {
                    this.numeric += '2';
                  })
"                Button('3', {type: ButtonType.Circle})"
                  .width(64).height(64)
                  .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
                  .backgroundColor('#FFFDFD')
                  .borderRadius(32)
"                  .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
                  .onClick(() => {
                    this.numeric += '3';
                  })
              }
              Row({space: 20}) {
"                Button('%', {type: ButtonType.Circle})"
                  .width(64).height(64)
                  .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
                  .backgroundColor('#FFFDFD')
                  .borderRadius(32)
"                  .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
                  .onClick(() => {
                    this.numeric += '%';
                  })
"                Button('0', {type: ButtonType.Circle})"
                  .width(64).height(64)
                  .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
                  .backgroundColor('#FFFDFD')
                  .borderRadius(32)
"                  .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
                  .onClick(() => {
                    this.numeric += '0';
                  })
"                Button('.', {type: ButtonType.Circle})"
                  .width(64).height(64)
                  .fontSize(32).fontColor('#000').fontWeight(FontWeight.Bold)
                  .backgroundColor('#FFFDFD')
                  .borderRadius(32)
"                  .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
                  .onClick(() => {
                    this.numeric += '.';
                  })
              }
            }
            Column({space: 20}) {
"              Button('=', {type: ButtonType.Capsule})"
                .width(64).height(148)
                .fontSize(32).fontColor(0xf5f5f5).fontWeight(FontWeight.Bold)
                .backgroundColor(Color.Blue)
                .borderRadius(32)
"                .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})"
                .onClick(() => {
                  if (this.numeric === '') {
                    this.total = '0';
                    return false;
                  }
                  this.total = Calculator.calculate(this.numeric);
                })
            }
          }
        }
        .padding({left: 20})
      }
      .width('100%')
      .borderRadius(8)
      .backgroundColor('#F2F2F2')

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f5f5')
  }
}
import router from '@system.router';
@Entry
@Component
struct History {
  build() {
    Column(){
      // 顶部功能按钮
"      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {"
"        Button({ type: ButtonType.Normal, stateEffect: false }) {"
          Row() {
            Image($r("app.media.ic_public_back")).width(32).height(32).margin({ left: 12 })
"            Text('返回').fontSize(24).fontColor('#515151').margin({ left: 5, right: 12 })"
          }
          .onClick(() => {
            router.back();
          })
        }
        .height(64)
        .backgroundColor('#f5f5f5')

      }
      .width('100%')
      .backgroundColor('#f2f2f2')
      .alignSelf(ItemAlign.Start)

      Row(){
        Text('历史记录')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .layoutWeight(1)
      .align(Alignment.Center)
      .alignSelf(ItemAlign.Center)
    }
    .width('100%')
    .height('100%')
    .align(Alignment.Top)
    .alignSelf(ItemAlign.Auto)
  }
}

总结

虽然这个计算器比较简单，但是能够进行简单的加减乘除运算，做的不够好。也认识到了自己的不足，以后要更加努力加强自己的技术。

标签：牛角,鸿蒙,32,numeric,height,width,64,backgroundColor,计算器
From： https://blog.51cto.com/u_15915417/5949770

相关文章

  • 小游戏：基于鸿蒙的24点纸牌游戏
    开发设计实现文档 一、编写目的 灵感来源于二十四点纸牌游戏，将生活中的纸牌游戏在电脑网页上实现。学会以后在空闲时可以玩一玩，锻炼一下速算能力。 二、项目目......
  • 『牛角书』基于HarmonyOS的计算器页面
    @​​toc​简介这里分享的是我自己的鸿蒙期末考查大作业，通过一学期课程的学习，研究出来的一些成果，代码还有很多需要优化的地方，本文内容仅为利用组件形成的计算器页面。成果展......
  • 【FAQ】在华为鸿蒙车机上集成华为帐号的常见问题总结
    随着新一代信息技术与汽车产业的深度融合，智能网联汽车正逐渐成为汽车产业发展的战略制高点，无论是传统车企还是新势力都瞄准了“智能座舱”这种新一代人机交互方式。面对竞......
  • 【FAQ】在华为鸿蒙车机上集成华为帐号的常见问题总结
    随着新一代信息技术与汽车产业的深度融合，智能网联汽车正逐渐成为汽车产业发展的战略制高点，无论是传统车企还是新势力都瞄准了“智能座舱”这种新一代人机交互方式。面对竞......
  • 鸿蒙小游戏2048
    DevEcoStudioProjects鸿蒙2048小游戏2048大家应该都玩过，今天我们就来实现一个可以在鸿蒙系统上运行的2048小游戏，大概长下面这样： ​​​​ 在开始写代码之前，我们来分析下，要......
  • 实现一个会动的鸿蒙 LOGO
    本文将带大家简单实现一个会动的鸿蒙LOGO。emmm，写本文的动机是之前在掘金看到一篇实现鸿蒙LOGO的文章--​​产品经理：鸿蒙那个开场动画挺帅的给咱们页面也整一个呗​​......
  • 『牛角书』基于HarmonyOS分布式小游戏之你画我猜
    一、游戏逻辑游戏分为单双人模式单人模式：自画自猜，只需要一个设备即可双人模式：需要两台设备，主设备根据关键字进行绘图，从设备根据主设备的绘图描述猜关键字。从设备猜对则从......
  • [AHOI2014/JSOI2014]奇怪的计算器
    链接:https://www.luogu.com.cn/problem/P4041题目描述：给定一个数列\(a\)，与常数\(L\),\(R\),实现下列四个操作：1.将所有数加\(d\)。2.将所有数减\(d\)。3.将所有数乘\(d......
  • [AHOI2014/JSOI2014]奇怪的计算器
    链接:https://www.luogu.com.cn/problem/P4041题目描述：给定一个数列$a$，与常数$L$,$R$,实现下列四个操作：1.将所有数加$d$。2.将所有数减$d$。3.将所有数乘$d$。4.......
  • #盲盒+码# #跟着小白一起学鸿蒙#HAP应用调用so库方法
    作者：王石概述在《[#跟着小白一起学鸿蒙#七]写个NAPI子系统》的文章里我们熟悉了如何用NAPI框架实现一个HAP应用的业务接口，但是这只是OpenHarmony提供的一种实现方式。在......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99