/**
* 计算器
*/
@Entry
@Component
struct Calculator{
/*创建数组，用来设置计算器按钮上显示的内容*/
private buttonTexts = [
'AC' , 'Del' , '+/-' , '/' ,
'7' , '8' , '9' , '*' ,
'4' , '5' , '6' , '-' ,
'1' , '2' , '3' , '+' ,
'%' , '0' , '.' , '='
]
@State displayText: string = '0'
@State firstOperand: number | null = null
@State operator: string | null = null
@State waitingForSecondOperand: boolean = false
/*构件界面*/
build() {
/*添加列*/
Column(){
/*--------------------------添加第一列 上面空白的部分*/
Column(){
}/*设置列的样式*/
.width('100%')
.height('10%')
/*-------------------------------添加第二列 输入框*/
Column(){
/*添加文本框用来输入计算*/
TextInput()
.fontSize(70)
.height('80%')/*设置文本框的高度*/
.textAlign(TextAlign.End)/*设置文本框的对齐方式 输入显示在右边*/
.backgroundColor(Color.White)
.fontColor(Color.Black)
.padding({right:20})
}/*设置列的样式*/
.width('100%')
.height('35%')
.backgroundColor(Color.White)
/*------------------------------------添加第三列 按钮框*/
Column(){
/*添加网格组件*/
Grid(){
/*循环创建计算器的按钮 同时设置按钮上显示的内容*/
ForEach(this.buttonTexts, (item: string , index) => {
/*添加网格项*/
GridItem(){
/*添加按钮*/
Button(item)
.width('100%')/*设置按钮的宽度*/
.height('100%')/*设置按钮的高度*/
.fontSize(30)/*设置按钮的字体大小*/
.borderRadius(50)/*设置按钮的圆角*/
.backgroundColor(this.setButtonBackgroundColor(item))/*设置按钮的背景颜色*/
.fontColor(this.setButtonFontColor( item))/*设置按钮的字体颜色*/
.onClick(()=>{
//this.handleButonClick(item)
})
}
})
}/*设置网格的样式*/
.columnsTemplate('1fr 1fr 1fr 1fr')/*设置4列的模板*/
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')/*设置5行的模板*/
.columnsGap(10)
.rowsGap(10)
}/*设置列的样式*/
.width('95%')
.height('55%')
.margin(10)/*设置列的边距*/
}/*设置列的样式*/
.width('100%')
.height('100%')
}
/*创建函数用来处理按钮点击事件*//*
handleButonClick(item: string) {
switch (item) {
case 'AC':
this.displayText = '0'
this.firstOperand = null
this.Operand = null
this.waitingForSecondOperand = false
break
case 'Del':
if (this.displayText.length > 1 ) {
this.displayText = this.displayText.slice(0, -1)
} else {
this.displayText = '0';
}
break
case '+/-':
const currentValue = parseFloat(this.displayText);
this.displayText = String(currentValue * -1)
break
case '%':
const currentValue = parseFloat(this.displayText);
this.displayText = String(percentValue);
break
case '.':
if (!this.displayText.includes('.')) {
this.displayText += '.'
}
break
case '=':
if (this.operator && this.firstOperand !== null) {
const secondOperand = parseFloat(this.displayText)
let result = 0
switch (this.operator) {
case '+':
result = this.firstOperand + secondOperand
break
case '-':
result = this.firstOperand - secondOperand
break
case '*':
result = this.firstOperand * secondOperand
break
case '/':
result = secondOperand !== 0 ? this.firstOperand / secondOperand : 0
break
}
this.displayText = String(result)
this.firstOperand = result
this.operator = null
this.waitingForSecondOperand = false
}
break
default:
if (this.waitingForSecondOperand) {
this.displayText = item
this.waitingForSecondOperand = false
} else {
this.displayText = this.displayText === '0' ? item : this.displayText + item
}
break
}
}*/
/***
* 设置按钮背景颜色
*/
setButtonBackgroundColor(item: string) {
/*分支判断*/
switch (item) {
case '/':
case '*':
case '-':
case '+':
return '#ffef8282';
case '=':
return '#ffdd4637';
default:
return '#ededed';
}
}
/**
* 创建函数用来设置按钮上显示的内容的颜色
*/
setButtonFontColor(item: string){
switch( item){
case 'AC':
case 'Del':
case '+/-':
case '/':
case '*':
case '-':
case '+':
return '#ffef3c3c';
case '=':
return '#ffffffff';
default:
return '#ff000000';
}
}
}
WWechat
import { window } from '@kit.ArkUI'
import { MyPage } from '../component/Mypage'
import { WechatPage } from '../component/WechatPage'
/**
* @Description: 微信主页面
* @Author: khc
* @Date: 2026/3/30 9:15
* @Version: 1.0
*/
@Entry
@Component
struct Home{
/*创建变量，用来获取点击选项时选项的索引值*/
@State selectedIndex: number = 0
aboutToAppear(): void {
/*设置全铺整个屏幕*/
window.getLastWindow(getContext(),(error,win)=>{
win.setWindowLayoutFullScreen(true)
})
}
/*构造界面*/
build() {
/*添加列*/
Column(){
/*添加选项卡组件 1: barPosition: BarPosition.End在底部显示 index:指定默认选中的选项 指定选项的索引*/
Tabs({barPosition: BarPosition.End,index: this.selectedIndex}){
/*-----------------------------------微信*/
TabContent(){
/*调用微信页面*/
//WechatPage()
/*添加列*/
Column(){
}/*设置列的样式*/
.width('100%')
.height('100%')
.backgroundColor(Color.Red)
}/*设置选项的标题*/
//.tabBar('微信')
.tabBar(this.buildTabBar(0,'微信',$r('app.media.wechat1'),$r('app.media.wechat2')))
/*------------------------------------通讯录*/
TabContent(){
/*添加列*/
Column(){
}/*设置列的样式*/
.width('100%')
.height('100%')
.backgroundColor(Color.Green)
}/*设置选项的标题*/
//.tabBar('通讯录')
.tabBar(this.buildTabBar(1,'通讯录',$r('app.media.contacts1'),$r('app.media.contacts2')))
/*------------------------------------------发现*/
TabContent(){
/*添加列*/
Column(){
}/*设置列的样式*/
.width('100%')
.height('100%')
.backgroundColor(Color.Blue)
}/*设置选项的标题*/
//.tabBar('发现')
.tabBar(this.buildTabBar(2,'发现',$r('app.media.find1'),$r('app.media.find2')))
/*------------------------------------------我*/
TabContent(){
/*调用MyPage主页面*/
//MyPage()
/*添加列*/
Column(){
}/*设置列的样式*/
.width('100%')
.height('100%')
.backgroundColor(Color.White)
}/*设置选项的标题*/
//.tabBar('我')
.tabBar(this.buildTabBar(3,'我',$r('app.media.me1'),$r('app.media.me2')))
}/*设置Tabs的样式*/
.onChange((index: number)=>{/*index就是选中的选项的索引*/
/*把选中的索引保存到selectedIndex中*/
this.selectedIndex = index
})
}/*设置列的样式*/
.width('100%')/*设置列的宽度*/
.height('100%')/*设置列的高度*/
}
/**
* 创建选项中的内容
* index 选项的索引
* title 标题
* icon 默认的图标
* selection 选中时的图标
* */
@Builder
buildTabBar(index: number,title: string,icon: Resource,selection: Resource ){
/*添加列*/
Column(){
/*添加图标*/
Image(this.selectedIndex == index ? selection:icon)
.width(30)
.height(30)
/*添加标题*/
Text(title)
.fontColor(this.selectedIndex == index ? Color.Green:'')
}/*设置列的样式*/
.width('100%')
.height('65%')
}
}
