DevEco Studio：状态管理与事件处理原创

The旺

发布于 2024-11-29 21:03

浏览

0收藏

DevEco Studio：状态管理与事件处理

引言

在现代前端开发中，状态管理和事件处理是构建交互式应用的核心。DevEco Studio，作为华为推出的开发环境，支持开发者使用TypeScript构建HarmonyOS应用。本文将通过三个示例代码，深入探讨如何在DevEco Studio中管理状态和处理事件。

第一节：状态变量与界面刷新

1.1 状态变量的重要性

在DevEco Studio中，状态变量（使用[@State](https://my.oschina.net/states) 装饰器修饰的变量）的变化会自动触发界面的刷新。这与普通变量不同，普通变量的变化不会引起界面的更新。

示例代码一

@Entry
@Component
struct Index {
   
  @State message: string = 'Hello World';

  build() {
   
    Row() {
   
      Column() {
   
        Button('这是一个对话框')
          .onClick(() => {
   
            console.log('log:', '对话框')
            AlertDialog.show({
   
              message: '这是一个对话框框'
            })
          })
        Text('这是一个文本')
          .onClick(() => {
   
            console.log('log:', '文本')
            AlertDialog.show({
   
              message: '这是一个文本组件'
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行结果

点击事件运行结果

1.2 普通变量与状态变量的区别

普通变量：只能在初始化时渲染，后续变化了，也不会引起更新。
状态变量：被装饰器修饰，值的改变会[自动]引起界面的刷新。

示例代码二

let myname: string = 'thewang'
@Entry
@Component
struct Index {
   
  myage: number = 19
  @State mymsg: string = 'hello thewang'

  build() {
   
    Column() {
   
      Text(myname).onClick(() => {
   
        myname = 'thetwo'
        console.log('myname', myname)
      })
      Text(this.myage.toString()).onClick(() => {
   
        this.myage = 18
        console.log('age', this.myage)
      })
      Text(this.mymsg).onClick(() => {
   
        this.mymsg = 'hello'
      })
    }
  }
}

运行结果

HarmonyOS Next点击事件2

第二节：事件处理与界面更新

2.1 事件处理基础

在DevEco Studio中，事件处理是通过.onClick()方法实现的，它允许我们在用户交互时执行特定的函数。

示例代码三

计数器案例

@Entry
@Component
struct Index {
   
  @State count: number = 1

  build() {
   
    Row() {
   
      Button('-')
        .onClick(() => {
   
          this.count = this.count - 1
        })
      Text(this.count.toString()).margin(10)
      Button('+')
        .onClick(() => {
   
          this.count = this.count + 1
        })
    }
    .padding(20)
  }
}

运行结果

HarmonyOS Next计数器案例

2.2 状态变量与界面更新

在上述代码中，count是一个状态变量。当按钮被点击时，count的值会改变，这会自动触发界面的更新，显示最新的计数。

2.3 界面布局与样式

Row 和 Column：用于创建行和列的布局。
Text 和 Button：用于显示文本和按钮。
margin 和 padding：用于设置组件的边距。

第三节：算术运算符的使用

3.1 基本算术运算符

在TypeScript中，基本的算术运算符包括加（+）、减（-）、乘（*）、除（/）和取余（%）。

示例代码

console.log('result', 1 + 1);
console.log('result', 2 - 1);
console.log('result', 2 * 3);
console.log('result', 6 / 3);
console.log('remainder', 7 % 2); // 3余1

3.2 赋值运算符

赋值运算符允许我们将一个值赋给变量，或者对变量进行计算后重新赋值。

示例代码

let num2: number = 77;
num2 %= 10; 
console.log('num2', num2);

运行结果

第四节：组件布局的构建

4.1 组件布局基础

在DevEco Studio中，我们可以使用Column和Row组件来构建布局。

示例代码二

@Entry
@Component
struct Index {
   
  build() {
   
    Column() {
   
      // 外层Column，设置间距为8
      Column({
    space: 8 }) {
   
        // 用颜色填充代替图片，使用Stack组件
        Stack()
          .width('100%')
          .height(200) // 设置高度，根据实际情况调整
          .backgroundColor('gray') // 设置背景颜色，这里用灰色示例
          .borderRadius({
    topLeft: 6, topRight: 6 }) // 设置圆角

        // 标题文字
        Text('这是标题，颜色填充部分可以换成图片')
          .fontSize(14)
          .lineHeight(18)
          .padding({
    left: 5, right: 5 })

        // 来源和点赞
        Row() {
   
          // 来源
          Row() {
   
            Stack()
              .width(16)
              .height(16) // 设置高度，根据实际情况调整
              .backgroundColor('blue') // 设置背景颜色，这里用蓝色示例
              .margin({
    right: 3 })
            Text('用户名称')
              .fontSize(12)
              .fontColor('#7e7e7e')
          }

          // 点赞
          Row() {
   
            Stack()
              .width(14)
              .height(14) // 设置高度，根据实际情况调整
              .backgroundColor('red') // 设置背景颜色，这里用红色示例
              .margin({
    right: 3 })
            Text('8888')
              .fontSize(12)
              .fontColor('#7e7e7e')
          }
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({
    left: 5, right: 5 })
      }
      .width('50%')
    }
    .padding(20)
  }
}