HarmonyOS 鸿蒙Next ArkTS怎么通过点击事件控制组件显隐

发布于 1周前 作者 h691938207 来自 鸿蒙OS

HarmonyOS 鸿蒙Next ArkTS怎么通过点击事件控制组件显隐

Stack(){ Column(){ Image().height(“60%”) } .height(“100%”).justifyContent(FlexAlign.End) Column(){ Image().height(“50%”) } .height(“100%”).justifyContent(FlexAlign.Start) } .height(“100%”)

如上代码怎么通过点击事件控制下方Column组件显隐，初始状态是隐形占位

6 回复

@Entry @Componentstruct Index { @State message: string = ‘Hello World’ @State view: Visibility[] = [Visibility.Hidden, Visibility.Visible, Visibility.None] @State index: number = 0

build() { Column() { Column() { // 隐藏不参与占位 Text(‘None’).fontSize(9).width(‘90%’).fontColor(0xCCCCCC) Row() .visibility(this.index) .width(‘90%’) .height(80) .backgroundColor(0xAFEEEE) .onClick(() => { this.index = this.view[0] }) Row() { Text(“Hidden”).onClick(() => { this.index = this.view[0] }) Text(“Visible”).onClick(() => { this.index = this.view[1] }) Text(“None”).onClick(() => { this.index = this.view[2] }) }.margin(10).padding(10) } } } }

更多关于HarmonyOS 鸿蒙Next ArkTS怎么通过点击事件控制组件显隐的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


666，

基本信息

  • 深色代码主题
  • 复制

主要涉及到状态管理，建立多看看文档

开发者你好，可以通过visibility属性控制组件显隐，可以参考以下文档：https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-universal-attributes-visibility-0000001281480742

额，我知道这个东西，但是怎么通过点击事件切换呢，

额，我知道这个东西，但是怎么通过点击事件切换呢，

在HarmonyOS鸿蒙Next中，ArkTS（Ark TypeScript）提供了简洁的语法来实现UI组件的交互逻辑。要通过点击事件控制组件的显隐，你可以使用ArkTS中的事件绑定和条件渲染功能。

具体来说，你可以为某个组件绑定一个点击事件处理函数，在这个函数中改变控制目标组件显隐的状态变量。然后，在目标组件的渲染条件中引用这个状态变量。

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

@Entry
@Component
struct MyComponent {
  @State isVisible: boolean = true; // 控制组件显隐的状态变量

  @Builder
  build() {
    Column() {
      // 绑定点击事件的按钮
      Button('Toggle Visibility')
        .onClick(() => {
          this.isVisible = !this.isVisible; // 切换显隐状态
        });

      // 条件渲染的目标组件
      if (this.isVisible) {
        Text('This text is conditionally visible.')
          .fontSize(20)
          .color(Color.Red);
      }
    }
  }
}

在这个示例中，点击按钮会切换isVisible的值，从而控制Text组件的显隐。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部