/**
- 计算器 */ @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%')
} }
