一、效果图
在正式介绍ArkUI计算器应用之前，我们先来一睹其风采。效果图上的计算器界面简洁大方，每个按钮都经过精心设计，颜色搭配恰到好处，使得整体界面既美观又实用。数字、运算符等按钮排列整齐，用户可以一目了然地找到所需的按钮，快速完成计算操作。同时，显示屏部分清晰显示输入的表达式和计算结果，方便用户随时查看。
二、按钮的实现
要实现计算器中的按钮，我们首先需要使用ArkUI中的Text组件来表示按钮上的文字。每个按钮都是一个独立的个体，因此我们使用Column布局来包裹每个按钮，以便进行统一的样式设置。
按钮的实现代码已经给出，通过这段代码，我们可以看到如何设置按钮的文字颜色、背景颜色、圆角大小等属性。这些属性的设置对于打造出美观的按钮至关重要。例如，我们选择了合适的颜色搭配，使得按钮在视觉上更加吸引人；同时，设置了较大的圆角，使得按钮呈现出圆润的外观，更加符合现代审美趋势。
代码如下：
// 使用@Preview装饰器，这通常用于在开发环境中预览组件
@Preview
// 使用@Component装饰器，表示这是一个ArkUI组件
@Component
export struct CalButton {
// 定义按钮上显示的数字，默认为'1'
num: string = '1'
// 定义按钮的背景颜色，使用十六进制表示，默认为深灰色
buttonColor: number = 0x333333
// 定义按钮上文字的颜色，这里使用了Color.White，表示白色
textColor: number = Color.White
// 定义文字的大小，默认为40
textSize: number = 40
// 定义按钮的宽度，默认为75
mWidth: number = 75
build() {
Column() {
// 创建一个Text组件，显示按钮上的数字
Text(`${this.num}`)
// 设置文字颜色
.fontColor(this.textColor)
// 设置文字大小
.fontSize(this.textSize)
// 设置文字字体为中等粗细
.fontWeight(FontWeight.Medium)
}
// 设置Column的宽度和高度
.width(this.mWidth)
.height(75)
// 设置背景颜色
.backgroundColor(this.buttonColor)
// 设置内容在主轴方向（这里是垂直方向）上居中
.justifyContent(FlexAlign.Center)
// 设置边框圆角，使按钮呈现圆形
.borderRadius(50)
}
}三、计算器页面
计算器页面的主要组成结构是一行一行的按钮和文本显示区域。这些按钮和文本显示区域都是通过ArkUI中的组件来实现的。我们使用了Row布局来组织每一行的按钮，使得它们能够水平排列；同时，使用了Text组件来显示文本内容，如表达式和计算结果等。
在构建计算器页面时，我们需要注意以下几点：
- 布局的合理性：按钮和文本显示区域应该布局合理，方便用户操作。例如，数字按钮应该集中在一起，方便用户快速输入；运算符按钮应该放在数字按钮的周围，方便用户进行运算操作。
- 样式的统一性：按钮和文本显示区域的样式应该保持统一，使得整体界面更加协调。我们可以通过设置相同的背景颜色、边框样式等属性来实现样式的统一性。
- 响应的及时性：当用户点击按钮或输入文本时，应用应该及时响应并给出反馈。例如，当用户点击数字按钮时，文本显示区域应该及时更新显示的内容；当用户进行运算操作时，应用应该快速计算出结果并显示在文本显示区域中。
import { ExpressionEvaluator } from '../help/CalculateHelper'
import { CalButton } from './CalButton'
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Index {
@State result: string = '0' // 最终的结果
@State cal: string = '' // 计算时的信息 88*88
build() {
Column({ space: 10 }) { //主轴方向间隙
Blank() // 把空隙撑开
Column() {
Text(this.result)
.fontColor(Color.White)
.fontSize(60)
}
.width('100%')
.alignItems(HorizontalAlign.End)
.padding({ right: 36 })
Column() {
Text(this.cal)
.fontColor(Color.White)
}
.width('100%')
.alignItems(HorizontalAlign.End)
.height(15)
.padding({ right: 36 })
Row({ space: 10 }) {
CalButton({
num: 'AC',
buttonColor: 0xA5A5A5,
textColor: Color.Black,
textSize: 30
}).onClick(() => {
this.result = '0' // 归零
this.cal = '' // 清除用户输入的值
})
CalButton({
num: '+/-',
buttonColor: 0xA5A5A5,
textColor: Color.Black,
textSize: 30
}).onClick(() => {
})
CalButton({
num: '%',
buttonColor: 0xA5A5A5,
textColor: Color.Black,
textSize: 30
})
CalButton({
num: '÷',
buttonColor: 0xFF9F0B,
}).onClick(() => {
if (this.cal == '' && this.result != '') {
this.cal = this.result + '/'
} else {
this.cal += '/'
}
})
}
// TODO 7 8 9 ...
Row({ space: 10 }) {
CalButton({
num: '7'
}).onClick(() => {
this.cal += '7'
})
CalButton({
num: '8',
}).onClick(() => {
this.cal += '8'
})
CalButton({
num: '9',
}).onClick(() => {
this.cal += '9'
})
CalButton({
num: 'x',
buttonColor: 0xFF9F0B,
}).onClick(() => {
if (this.cal == '' && this.result != '') {
this.cal = this.result + '*'
} else {
this.cal += '*'
}
})
}
// TODO 4 5 6 ...
Row({ space: 10 }) {
CalButton({
num: '4'
}).onClick(() => {
this.cal += '4'
})
CalButton({
num: '5',
}).onClick(() => {
this.cal += '5'
})
CalButton({
num: '6',
}).onClick(() => {
this.cal += '6'
})
CalButton({
num: '-',
buttonColor: 0xFF9F0B,
}).onClick(() => {
if (this.cal == '' && this.result != '') {
this.cal = this.result + '-'
} else {
this.cal += '-'
}
})
}
// TODO 7 8 9 ...
Row({ space: 10 }) {
CalButton({
num: '1'
}).onClick(() => {
this.cal += '1'
})
CalButton({
num: '2',
}).onClick(() => {
this.cal += '2'
})
CalButton({
num: '3',
}).onClick(() => {
this.cal += '3'
})
CalButton({
num: '+',
buttonColor: 0xFF9F0B,
}).onClick(() => {
if (this.cal == '' && this.result != '') {
this.cal = this.result + '+'
} else {
this.cal += '+'
}
})
}
// TODO 0 . = ...
Row({ space: 10 }) {
CalButton({
num: '0',
mWidth: 160
}).onClick(() => {
this.cal += '0'
})
CalButton({
num: '.',
}).onClick(() => {
this.cal += '.'
})
CalButton({
num: '=',
buttonColor: 0xFF9F0B,
}).onClick(() => {
let calHelp = new ExpressionEvaluator()
let tempResult = `${calHelp.evaluate(this.cal)}`
this.result = tempResult
this.cal = ''
})
}
.margin({ bottom: 50 })
} // 最外层的
.width('100%')
.height('100%')
.backgroundColor(Color.Black)
}
}
