DevEco Studio：状态管理与事件处理-编程知识

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

news/2024/11/29 21:07:51/文章来源:https://www.cnblogs.com/Thewang/p/18577544

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 = 18console.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 = 1build() {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，设置间距为8Column({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)}
}