鸿蒙应用开发——计算器（3）

系列文章目录

鸿蒙应用开发——计算器（1）

鸿蒙应用开发——计算器（2）

---

文章目录

系列文章目录

前言

一、设置默认数字显示

二、添加点击事件

总结

---

前言

在之前的文章里项目的显示页面基本已经完成了，计算器的基础按键都可以在页面中显示出来了。所以，从此次开始我们就开始对计算器的逻辑运算功能进行设计。

一、设置默认数字显示

虽然计算器的按键基本都显示出来了，但是整个页面都是按键显得有些单调，于是决定在按键的上方加入一个默认的“0”，当计算器没有进行任何计算时就会在屏幕中央显示“0”，代码如下所示：

Column(){
       Text('0')
         .fontColor(Color.White)
         .fontSize(60)
     }

预览器的效果图：

 发现该数字处于中央部分，应该将其设置在右边，这是我们需要调整colum这个组件的对齐方式，以及适当的调整宽度大小和右边的填充距离，防止设置玩对齐方式后数字直接显示在了最右边显得整体不协调。

Column({space:10}){
     Blank()
     Column(){
       Text('0')
         .fontColor(Color.White)
         .fontSize(60)
     }
     .width('100%')
     .alignItems(HorizontalAlign.End)
     .padding({right:35})

 预览器的效果图：

这样就显得更像一个计算器了。

二、添加点击事件

在实现计算器的逻辑计算功能之前，我们要先为计算器中的每一个按键添加一个点击事件，点击相应的按键就会将按键上对应的字符显示在计算器上，要不然计算器上什么都不显示怎么实现计算功能。

 首先我们先声明一个string类型的变量value将其默认值设置为空字符，然后在通过colum组件显示在默认数字“0”的下面，并为其设置合适的属性。

 Column(){
       Text(`${this.value}`)
         .fontColor(Color.White)
         .fontSize(15)
         .fontWeight(FontWeight.Medium)
     }
     .alignItems(HorizontalAlign.End)
     .width('100%')
     .height(15)
     .padding({right:30})

 其次再dan根据按键的值添加相应的onclick事件

   Textstyle({str:'7'})
         .onClick(()=>{
           this.value+='7'
         })

 然后测试是否每个按键都能实现这个点击事件。

经过测试发现所有的按键都可以实现此点击功能，但是退格按键的功能还没有实现。由于我们是用一个字符串来记录数据的，所以无法像数组那样通过将数组中的最后一个元素删除来达到退格的效果，这是我们就需要用到substring()方法来实现退格功能，具体代码如下：

Image($r('app.media.delete'))
         .width(75)
         .height(75)
         .borderRadius(50)
         .onClick(()=>{
           this.value=this.value.substring(0,this.value.length-1)
         })

 substring()的作用是可以截取字符串中介于两个指定下标之间的字符，因此可以看到我们在上述代码中的substring()里传入了两个值，使其截取第0个字符和倒数第2个字符之间的字符串显示，这样就相当于删除了最后一个字符来实现了退格功能。

---

总结

在前两次实现计算器显示页面的基础上，进一步完善了显示页面使其与日常中的计算器更加的相符合。然后通过对每个按键添加点击事件实现了将按键上相应的字符显示到屏幕上的功能，为之后计算器逻辑运算功能的实现打下基础。