5️⃣标准计算器学习组件完结篇 原创 精华

Tuer白晓明
发布于 2022-4-9 01:07
浏览
1收藏

【本文正在参与优质创作者激励】

$\color{FF0000}{有兴趣的可以通过社区群加我一起探索ArkUI应用开发😁😁😁}$


$\color{#ff9a3c}{往期推荐}$

这道菜我称为“ArkUI荟萃”—序
了解一些ArkUI概念并熟悉应用的结构
1️⃣通过编写计算器学习ArkUI组件
2️⃣通过编写计算器学习ArkUI组件
3️⃣通过编写计算器学习ArkUI组件
4️⃣通过编写计算器学习ArkUI组件

3.11 @State注解

@State装饰的变量是组件内部的状态数据,当这些状态数据被修改时,将会调用所在组件的build方法进行UI刷新。
@State状态数据具有以下特征:

  • 支持多种类型:允许classnumberbooleanstring强类型的按值和按引用类型。允许这些强类型构成的数组,即Array<class>Array<string>Array<boolean>Array<number>。不允许objectany
  • 支持多实例:组件不同实例的内部状态数据独立。
  • 内部私有:标记为@State的属性时私有变量,只能在组件内访问。
  • 需要本地初始化:必须为所有@State变量分配初始值,将变量保持未初始化可能导致框架行为未定义。
  • 创建自定义组件时支持通过状态变量名设置初始值:在创建组件实例时,可以通过变量名显式指定@State状态属性的初始值。
// 实现点击按钮更改文本内容,显示点击次数
@Entry
@Component
struct StateExample {
  @State clickNum: number = 0;

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button(`这是第${this.clickNum}次点击按钮`)
        .fontSize(25)
        .fontWeight(FontWeight.Bold)
        .height(64)
        .onClick(() => {
          this.clickNum++;
        })
    }
    .width('100%')
    .height('100%')
  }
}

5️⃣标准计算器学习组件完结篇-鸿蒙开发者社区

3.12 实现标准计算器的简单计算

首先定义两个变量:numeric用于显示运算表达式;total用于显示计算结果。
接着定义计算方法:calc(numeric: string){}
然后在数字按钮以及运算符号按钮添加点击事件:

// 如数字 7 
            Button('7', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(20).fontColor('#000').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
              .onClick(() => {
                this.numeric += "7";
              })
// 如运算符号 +
            Button('+', {type: ButtonType.Circle})
              .width(64).height(64)
              .fontSize(32).fontColor('#1296DB').fontWeight(FontWeight.Bold)
              .backgroundColor('#FFFDFD')
              .borderRadius(32)
              .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
              .onClick(() => {
                this.numeric += "+";
              })

最后在等号事件中调用运算方法:

              Button('=', {type: ButtonType.Capsule})
                .width(64).height(148)
                .fontSize(32).fontColor(0x1296DB).fontWeight(FontWeight.Bold)
                .backgroundColor('#FFFDFD')
                .borderRadius(32)
                .shadow({radius: 16, color: 0x7D7B7B, offsetX: 0, offsetY: 2})
                .onClick(() => {
                  if (this.numeric === '') {
                    return false;
                  }
                  this.numeric += "=";
                  this.total = this.calc(this.numeric).toString();
                })

5️⃣标准计算器学习组件完结篇-鸿蒙开发者社区

小结

通过一个标准计算器的功能实现,从中学习了FlexColumnRow容器组件,以及TextButtonImage组件的属性和方法,并结合Demo进行说明。数据的状态管理,我们使用了@State装饰器,同时也对@Entry@Component装饰器做了说明。

对于计算器的其他能力,后续会继续完善,但不会再以文章的形式做说明,如果你感兴趣,可以到这儿下载:
OpenHarmony计算器-ETS版

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-4-9 01:07:48修改
6
收藏 1
回复
举报
3条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

一步步追更白老师的计算器,终于大成了!

回复
2022-4-11 11:31:30
mb5f8826abcab1f
mb5f8826abcab1f

赞一个!

回复
2022-4-13 17:25:35
wx6245597465b5f
wx6245597465b5f

期待大佬多多分享

回复
2022-5-27 11:42:44
回复
    相关推荐