『牛角书』鸿蒙基础计算器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了『牛角书』鸿蒙基础计算器相关的知识，希望对你有一定的参考价值。
简介
这是我自己的鸿蒙期末考查大作业，通过一学期课程的学习，研究出来的一些成果，代码还有很多需要优化的地方，本文内容仅为利用组件简单的计算器页面。
成果展示
开发思路
计算器一般由三个组成部分，分别是计算，答案，键盘。由于本次只是利用组件进行效果展示因此计算和答案部分利用文本组件，键盘利用按钮组件来实现。
主要代码
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)
总结
虽然这个计算器比较简单，但是能够进行简单的加减乘除运算，做的不够好。也认识到了自己的不足，以后要更加努力加强自己的技术。
以上是关于『牛角书』鸿蒙基础计算器的主要内容，如果未能解决你的问题，请参考以下文章