鸿蒙开发之ArkUI 界面篇二十四计数器案例

最新推荐文章于 2024-11-22 17:21:55 发布

codes23457789

最新推荐文章于 2024-11-22 17:21:55 发布

阅读量857

点赞数 23

CC 4.0 BY-SA版权

文章标签：鸿蒙this关键字鸿蒙state关键字鸿蒙struct内部的变量调用鸿蒙计数器鸿蒙ui更细鸿蒙number显示鸿蒙点击事件匿名函数

本文链接：https://blog.csdn.net/renfujiang/article/details/142783357

计数器案例，点击’-‘按钮，数字减少1，点击啊‘+’按钮，数字加一

分析：这里需要三个组件，外层容器是Row，从左往右的组件分别是Button+Text+Button，涉及到修改更新界面，变量需要用State修饰，代码如下:

@Entry
@Component
struct Index {
  @State textNum:number = 13
  build() {
    Row(){
      Row(){
        Button('-').onClick(() =>{
          this.textNum-=1;
        })
        Text(this.textNum.toString()).margin({
          left:15,
          right:15
        })
        Button('+').onClick(()=>{
          this.textNum+=1
        })
      }.margin(20)

    }.width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
    .alignItems(VerticalAlign.Top)

}
}

总结：鸿蒙界面数据的更新需要用到在变量前加@State，修饰的变量改变后界面就能自动更新，在Struct里面的变量使用的时候需要使用this.变量名字。