HarmonyOS鸿蒙Next中@Component切换按钮替换数据，应该怎么实现

HarmonyOS鸿蒙Next中@Component切换按钮替换数据，应该怎么实现 @Component切换按钮替换数据，应该怎么实现

有一个@Component，里面有一个bean类，这里面有3个QuoteUiEntity，是3个变量。
里面又嵌套了一个@Component，接收3个变量中的一个QuoteUiEntity。

有3个按钮，点击后希望里面的@Component可以接收到对应的3个QuoteUiEntity中的某一个，这种应该怎么写？

bupafengyu 1楼•1 个月前作者

@Entry @ComponentV2 struct Index { private bean: Bean = new Bean() @Local e: QuoteUiEntity = this.bean.e0

build() { Column() { Row() { Button(‘0’).onClick(() => { this.e = this.bean.e0 }) Button(‘1’).onClick(() => { this.e = this.bean.e1 }) Button(‘2’).onClick(() => { this.e = this.bean.e2 }) }

  QuoteComponent({ e: this.e })
}.size({ width: '100%', height: '100%' })

} }

@ComponentV2 struct QuoteComponent { @Param e: QuoteUiEntity = new QuoteUiEntity(-1, ‘’)

build() { Column() { Text(this.e.index.toString()) Text(this.e.word.toString()) } } }

class Bean { e0: QuoteUiEntity = new QuoteUiEntity(0, ‘a’) e1: QuoteUiEntity = new QuoteUiEntity(1, ‘bb’) e2: QuoteUiEntity = new QuoteUiEntity(2, ‘ccc’) }

class QuoteUiEntity { index: number word: string

constructor(index: number, word: string) { this.index = index this.word = word } }

更多关于HarmonyOS鸿蒙Next中@Component切换按钮替换数据，应该怎么实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼•1 个月前

参考：

class Model {
  public value: string
  constructor(value: string) {
    this.value = value
  }
}
@Component
struct EntryComponent {
  build() {
    Column() {
      MyComponent({ count: 1, increaseBy: 2 })
        .width(300)
      MyComponent({ title: new Model('Hello World 2'), count: 7 })
    }
  }
}
@Component
struct MyComponent {
  @State title: Model = new Model('Hello World')
  @State count: number = 0
  private increaseBy: number = 1
  build() {
    Column() {
      Text(`${this.title.value}`)
        .margin(10)
      Button(`Click to change title`)
        .onClick(() => {
          this.title.value = this.title.value === 'Hello ArkUI' ? 'Hello World' : 'Hello ArkUI'
        })
        .width(300)
        .margin(10)
      Button(`Click to increase count = ${this.count}`)
        .onClick(() => {
          this.count += this.increaseBy
        })
        .width(300)
        .margin(10)
    }
  }
}

h691938207 3楼•1 个月前

在HarmonyOS鸿蒙Next中，@Component切换按钮替换数据的实现可以通过以下几个步骤完成：

定义状态变量：在@Component中，首先需要定义一个状态变量来存储按钮的状态或数据。例如，可以使用@State装饰器来定义一个布尔类型的变量，表示按钮的开关状态。
绑定状态变量：将状态变量与按钮的UI组件进行绑定。可以使用@Builder装饰器来构建按钮的UI，并将状态变量作为参数传递给UI组件。
处理按钮点击事件：在按钮的点击事件处理函数中，更新状态变量的值。可以使用@Watch装饰器来监听状态变量的变化，并在变化时触发相应的UI更新。
更新数据：当状态变量发生变化时，可以通过调用相应的函数来替换或更新数据。例如，可以在状态变量变化时，调用一个函数来更新与按钮相关联的数据。

以下是一个简单的示例代码：

@Component
struct ToggleButton {
  @State isOn: boolean = false;

  @Builder
  ButtonUI() {
    Button(this.isOn ? 'ON' : 'OFF')
      .onClick(() => {
        this.isOn = !this.isOn;
        this.updateData();
      });
  }

  updateData() {
    // 在这里实现数据替换逻辑
  }

  build() {
    Column() {
      this.ButtonUI();
    }
  }
}

在这个示例中，ToggleButton组件包含一个状态变量isOn，用于表示按钮的开关状态。ButtonUI函数构建了按钮的UI，并在点击事件中切换isOn的值。updateData函数用于在状态变化时更新数据。

通过这种方式，可以在HarmonyOS鸿蒙Next中实现@Component切换按钮替换数据的功能。

sinazl 4楼•1 个月前

在HarmonyOS鸿蒙Next中，使用@Component切换按钮并替换数据，可以通过以下步骤实现：

定义状态变量：在组件中定义一个状态变量来存储按钮状态或数据。
绑定事件：为按钮绑定点击事件，通过事件处理函数更新状态变量。
更新UI：使用状态变量动态更新按钮的显示内容或样式。

示例代码如下：

@Entry
@Component
struct MyComponent {
  @State isToggled: boolean = false;

  build() {
    Column() {
      Button(this.isToggled ? 'On' : 'Off')
        .onClick(() => {
          this.isToggled = !this.isToggled;
        });
    }
  }
}

通过点击按钮，isToggled状态会切换，按钮文本也会相应更新。