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

文章目录

前言

        一、DevEco Studio是什么？

   二、开发过程

1.新建项目

2.创建按键组件

总结

---

前言

本次将会以DevEco Studio为编辑器开发了一个全新的计算器项目，这个计算器项目不仅具有基本的加减乘除功能，在项目后期还会加入一些有趣、特别的功能来体验出该项目的创新性。同时，还会结合了鸿蒙操作系统的特性，进行了界面优化和用户体验的提升，使得整个计算器应用更加便捷、美观、易用。

---

一、DevEco Studio是什么？

HUAWEI DevEco Studio 基于IntelliJ IDEA Community开源版本深度定制开发，是面向全场景多设备的一站式分布式应用开发平台，支持HarmonyOS和OpenHarmony应用及服务开发。

二、开发过程

1.新建项目

打开DevEco Studio，在新建项目对话框中选择第一个然后单击右下角的Next。

为该项目命名为computer，再点击右下角的Finish即可完成该项目的创建。

2.创建按键组件

先实现最基础的功能，将计算器上的数字、符号等通过Button组件来设计出来，完成计算机的显示页面。

创建一个Button组件，在组件中添加数字1。代码如下所示：

Text('1')
        .fontColor(Color.White)
        .fontSize(50)
        .backgroundColor(Color.Gray)
        .width(80)
        .height(80)
        .textAlign(TextAlign.Center)

预览器的效果图如下所示：

    

 发现该按键显示为方形，不是理想中的圆形按键。于是我们可以通过.border Radius()来为该按键设置圆角，使其显示为圆形按键。

Text('1')
        .fontColor(Color.White)
        .fontSize(50)
        .backgroundColor(Color.Gray)
        .width(80)
        .height(80)
        .textAlign(TextAlign.Center)
        .borderRadius(40)

预览器效果如下：

 按照类似的方法先将其它的数字按键也设置出来，在这里要注意的是需要为其添加Row()来达到每4个按键在同一行的效果，这样更加符合计算器的页面显示。

    Column(){
      Row(){
        Text('7')
          .fontColor(Color.White)
          .fontSize(50)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Gray)
          .width(80)
          .height(80)
          .borderRadius(40)
        Text('8')
          .fontColor(Color.White)
          .fontSize(50)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Gray)
          .width(80)
          .height(80)
          .borderRadius(40)
        Text('9')
          .fontColor(Color.White)
          .fontSize(50)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Gray)
          .width(80)
          .height(80)
          .borderRadius(40)
      }
      Row(){
        Text('4')
          .fontColor(Color.White)
          .fontSize(50)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Gray)
          .width(80)
          .height(80)
          .borderRadius(40)
        Text('5')
          .fontColor(Color.White)
          .fontSize(50)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Gray)
          .width(80)
          .height(80)
          .borderRadius(40)
        Text('6')
          .fontColor(Color.White)
          .fontSize(50)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Gray)
          .width(80)
          .height(80)
          .borderRadius(40)
      }
      Row(){
        Text('1')
          .fontColor(Color.White)
          .fontSize(50)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Gray)
          .width(80)
          .height(80)
          .borderRadius(40)
        Text('2')
          .fontColor(Color.White)
          .fontSize(50)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Gray)
          .width(80)
          .height(80)
          .borderRadius(40)
        Text('3')
          .fontColor(Color.White)
          .fontSize(50)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Gray)
          .width(80)
          .height(80)
          .borderRadius(40)
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Black)

预览器效果如下所示：

于是到此就完成了计算器大体数字键的显示。 

---

总结

本次实验因为是项目前期的一些准备工作，因此主要介绍了如何使用DevEco Studio新建项目以及完成了计算器主要数字键的创建，剩下显示页面的内容也将会在以后的文章中完成。