企业官网建设流程全解析

一、@State 核心作用

@State 用于定义当前组件私有响应式变量：

1.变量被修改后，所有绑定该变量的 UI 组件会自动刷新；

2.普通private变量修改后页面不会更新，仅内存数值变化;

3.作用域仅限当前@Component组件，属于页面本地临时状态。

二、三段代码对应场景拆解

案例 1：布尔类型

@State isShow: boolean = true

1.绑定 UI：Text(this.isShow ? "状态已开启" : "状态已关闭")，文字、文字颜色都依赖该状态；

2.修改时机：按钮onClick回调中this.isShow = !this.isShow；

3.效果：点击取反布尔值，页面文字、颜色立刻同步切换。

例：

案例 2：数字类型

@State num: number = 0

1.绑定 UI：Text(当前的数是:${this.num})展示数值；

2.修改逻辑：加减按钮点击时执行this.num++/this.num--，增加边界判断 0~10；

3.特性：number 属于基础类型，直接自增自减就能触发页面刷新。

例：

案例 3：字符串类型（当前截图 输入框双向联动）

@State inputText : string = ""

1.绑定展示：上方 Text 实时渲染输入内容；

2.输入框赋值：TextInput({text: this.inputText}) 把状态传给输入框；

3. 联动效果：一边输入，上方文字实时同步更新，完全依靠 @State 响应式

例：

三、统一语法规范

1.声明位置： 写在struct结构体内部、build()函数外面，不能写在 build 里。

2.必须赋初始值：@State isShow: boolean = true

@State num: number = 0

@State inputText : string = ""

3.读取状态：UI 中通过 this.变量名 插值绑定：Text(`${this.inputText}`) Text(`${this.num}`) Text(this.isShow ? "开" : "关")

4.修改状态（固定规则）

修改代码只能放在事件回调：onClick

修改格式统一：this.变量 = 新值

5.在按钮 / 输入框的事件回调里修改 this.变量；

页面自动同步最新数据，无需手动刷新。