HarmonyOS 鸿蒙Next panel组件，使用@state变量控制显示，隐藏，好像有问题。

HarmonyOS 鸿蒙Next panel组件，使用@state变量控制显示，隐藏，好像有问题。

运行官网的例子，遇到点问题：当手动滑动panel的DragBar到底部，panel消失，然后再点击Text组件，即使状态变量@State show为True时，panel也不会再显示。

只有手动上滑DragBar后，panel才会出现。我想只用Text控制panel的显示、隐藏，但一直没试出来。

官网代码：

@Entry
@Component
struct PanelExample {
  [@State](/user/State) show: boolean = false
  build() {
    Column() {
      Text('2021-09-30    Today Calendar: 1.afternoon......Click for details')
        .width('90%').height(50).borderRadius(10)
        .backgroundColor(0xFFFFFF).padding({ left: 20 })
        .onClick(( ) => {
          this.show = !this.show
        })
      Panel(this.show) { // 展示日程
        Column() {
          Text('Today Calendar')
          Divider()
          Text('1. afternoon 4:00 The project meeting')
        }
      }
      .type(PanelType.Foldable).mode(PanelMode.Half)
      .dragBar(true) // 默认开启
      .halfHeight(500) // 默认一半
      .onChange((width: number, height: number, mode: PanelMode) => {
        console.info(`width:${width},height:${height},mode:${mode}`)
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

更多关于HarmonyOS 鸿蒙Next panel组件，使用@state变量控制显示，隐藏，好像有问题。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

可以这样实现

@Entry
@Componentstruct PanelExample {
  @State show: boolean = false
  build() {
    Column() {
      Text('2021-09-30    Today Calendar: 1.afternoon......Click for details')
        .width('90%').height(50).borderRadius(10)
        .backgroundColor(0xFFFFFF).padding({ left: 20 })
        .onClick(() => {
          this.show = !this.show
        })
      if (this.show) {
        Panel(this.show) { // 展示日程
          Column() {
            Text('Today Calendar')
            Divider()
            Text('1. afternoon 4:00 The project meeting')
          }
        }
        .type(PanelType.Foldable).mode(PanelMode.Half)
        .dragBar(true) // 默认开启
        .halfHeight(500) // 默认一半
        .onChange((width: number, height: number, mode: PanelMode) => {
          console.info(`width:${width},height:${height},mode:${mode}`)
          this.show = !!mode
        })
      }
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

更多关于HarmonyOS 鸿蒙Next panel组件，使用@state变量控制显示，隐藏，好像有问题。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


正解，渲染控制的核心思想，

- 项目名称: My Project
- 开始日期: 2023-10-01
- 结束日期: 2023-12-31

有个小疑问:为什么这行代码不可以省略呢 -> if (this.show) 在Panel中也有判断呀，

不可以省略哦，因为省略了就不能触发重新渲染了，因为省略了就不能触发重新渲染了，就是要用触发重新渲染来控制Panel整体的显示跟隐藏，

我感觉这就是bug，我试了下在onchange的时候把show改成false，然后实现onHeightChange函数，会发现他的值变化了，但是会往负数变化。Panel的代码实现也没找到如果有找到的可以发一下。

感谢2楼代码，试了下是可行的，稍微有点瑕疵是，这样改后点击隐藏就没有动画效果了，按照3楼的思路，稍微改了下。

// xxx.ets
@Entry
@Component
struct PanelExample {
  @State show: boolean = false
  @State showHidePanel: boolean = true

  build() {
    Column() {
      Text('2021-09-30    Today Calendar: 1.afternoon......Click for details')
        .width('90%').height(50).borderRadius(10)
        .backgroundColor(0xFFFFFF).padding({ left: 20 })
        .onClick(() => {
          console.log(`dfdfs_${this.show}`)
          if (!this.showHidePanel) {
            this.showHidePanel=true
          }
          this.show = !this.show
          console.log(`showHidePanel=${this.showHidePanel},show=${this.show}`)
        })
      if (this.showHidePanel) {
        Panel(this.show) { // 展示日程
          Column() {
            Text(`Today Calendar`)
            Divider()
            Text('1. afternoon 4:00 The project meeting')
          }
        }
        .type(PanelType.Foldable)
        .mode(PanelMode.Half)
        .dragBar(true) // 默认开启
        .halfHeight(500) // 默认一半
        .onChange((width: number, height: number, mode: PanelMode) => {
          console.info(`width:${width},height:${height},mode:${mode},${this.show}`)
          this.showHidePanel=false
          this.show = false
        }).onHeightChange((value:number)=>{
          console.info(`value = ${value}`)
        })
      }
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

.onChange((w,h,m)=>{ if(this.lastMode >= PanelMode.Half.valueOf() && m.valueOf() === PanelMode.Mini.valueOf()){ animateTo({ duration: 300, curve: Curve.Smooth }, ()=>{ this.isPanelShow = false }) } this.lastMode = m.valueOf() }) .transition({ type: TransitionType.Delete, translate: { x: 0, y: “100%” } }) //删除时的动画

可以自己加个组件动画，

按照官网实例代码，就会发现拉到最下面并不是消失，如果把组件放到Text组件前面就会发现，而是成为了类型：Foldable中的最小屏，文档中也说明了，Foldable（内容永久展示类，提供大（类全屏）、中（类半屏）、小）。

谢谢各位！陈杨的代码真牛，要不还得多几个@state变量，受教！

在HarmonyOS中，@state变量用于管理组件的状态，并通过状态变化来触发UI更新。对于panel组件的显示和隐藏，通常可以通过绑定@state变量来控制其visibility属性。如果你遇到问题，可能是由于以下原因：

  1. 状态未正确更新：@state变量的状态可能没有正确更新，导致UI未重新渲染。确保在状态变化时调用了this.setState()方法。

  2. 绑定方式错误：检查panel组件的visibility属性是否正确绑定了@state变量。例如：visibility={{ this.showPanel ? 'Visible' : 'Hidden' }}。

  3. 生命周期问题：确保状态更新发生在组件的生命周期方法中，避免在异步回调或非生命周期方法中直接修改状态。

  4. 状态变量初始化：确保@state变量在组件初始化时已正确初始化，避免未定义或空值导致的问题。

  5. UI更新延迟：在某些情况下，状态更新可能导致UI更新延迟，尝试强制重绘组件或检查是否有其他逻辑影响了状态更新。

如果问题依旧存在，建议检查代码逻辑，确保状态管理和UI绑定的正确性。

回到顶部