使用场景

在很多场景都需要使用这种响应式的数据绑定，比如需要响应用户交互更新UI的场景、动态列表数据管理、表单状态管理、展开/收起等交互效果、实时数据显示等等

实现思路

第一步：使用@State装饰器声明组件内部状态变量

第二步：通过事件处理器更新状态值

第三步：利用计算属性优化复杂逻辑

第四步：实现动态列表和条件渲染

实现效果

完整实现代码

@Entry
@Component
struct ResponsiveDataBindingDemo {
  [@State](/user/State) counter: number = 0
  [@State](/user/State) message: string = "鸿蒙OS5"
  [@State](/user/State) items: Array<string> = ["Item 1", "Item 2", "Item 3"]
  [@State](/user/State) isExpanded: boolean = false

  // 计算属性
  private processedMessage(): string {
    return this.message.toUpperCase() + ` - Count: ${this.counter}`
  }

  build() {
    Column({ space: 20 }) {
      // 响应式文本显示
      Text(this.processedMessage())
        .fontSize(20)
        .fontColor(Color.Blue)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })

      // 计数器按钮
      Row({ space: 15 }) {
        Button('Increment')
          .onClick(() => {
            this.counter += 1
          })

        Button('Decrement')
          .onClick(() => {
            this.counter -= 1
          })

        Button('Reset')
          .onClick(() => {
            this.counter = 0
          })
      }

      // 动态列表展示
      Column({ space: 10 }) {
        Text('Dynamic List:')
          .fontSize(18)
          .fontWeight(FontWeight.Medium)

        ForEach(this.items, (item: string, index: number) => {
          ListItem1(item,index)
        }, (item: string) => item)

        Button('Add Item')
          .onClick(() => {
            this.items.push(`Item ${this.items.length + 1}`)
          })
      }

      // 展开/收起面板
      Column({ space: 10 }) {
        Button(this.isExpanded ? 'Collapse' : 'Expand')
          .onClick(() => {
            this.isExpanded = !this.isExpanded
          })

        if (this.isExpanded) {
          Column({ space: 10 }) {
            Text('Expanded Content')
              .fontSize(16)
              .padding({ left: 20, right: 20 })
            Text('This content appears only when expanded')
              .fontSize(14)
              .fontColor('#666666')
              .padding({ left: 20, right: 20 })
          }
          .backgroundColor('#f0f0f0')
          .borderRadius(8)
          .padding({ top: 15, bottom: 15 })
        }
      }

      // 性能优化提示 - 使用[@State](/user/State)时的注意事项
      Text('Performance Tips:')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .margin({ top: 20 })

      Text('• [@State](/user/State)装饰器用于组件内部状态管理\n• 状态变更会自动触发UI更新\n• 避免在build方法中直接修改[@State](/user/State)变量\n• 使用计算属性优化复杂逻辑')
        .fontSize(14)
        .fontColor('#888888')
        .padding({ left: 15, right: 15 })
    }
    .width('100%')
    .height('100%')
    .padding({ top: 20, bottom: 20 })
  }
}

@Component
struct ListItem1 {
  private item: string = ""
  private index: number = 0

  constructor(item:string,index:number) {
    super()
    this.item = item;
    this.index = index;
  }

  build() {
    Row() {
      Text(`${this.index + 1}. ${this.item}`)
        .fontSize(16)
        .padding({ left: 15, right: 15, top: 10, bottom: 10 })
    }
    .borderRadius(6)
    .backgroundColor('#f8f8f8')
    .margin({ left: 10, right: 10 })
  }
}