概述

Panel是可滑动面板组件，提供一种轻量的内容展示窗口，方便在不同尺寸中切换，但是有时候会出现不生效的问题

原因

Panel本身不占文档流的，类似于前端的浮动，要求Panel所在的容器，以及容器内的子元素高度全都固定，如果有不固定的高度可能导致无法正常展示

常见场景

build() {
  @State showPanel:boolean = false
  
  ifshowPanel(){
    this.showPanel = !this.showPanel
  }
  
    Column() {
      //   此处为循环渲染的列表
      ItemList({showPanel:this.ifshowPanel.bind(this)})

      Panel(this.showPanel){
        Button("关闭").onClick(()=>{this.showPanel = false})
      }
    }
    .width("100%").height("100%")
  }

如上，其中ItemList是循环渲染的子组件，就会出现高度不确定的场景，导致无法正常显示Panel

解决方案

1.给每个子元素确定的高度值

2.使用layoutWeight()，其实还是固定住子元素的高度，例如

build() {
  @State showPanel:boolean = false
  
  ifshowPanel(){
    this.showPanel = !this.showPanel
  }
  
    Column() {
      //   此处为循环渲染的列表
      ItemList({showPanel:this.ifshowPanel.bind(this)}).layoutWeight(1)

      Panel(this.showPanel){
        Button("关闭").onClick(()=>{this.showPanel = false})
      }
    }
    .width("100%").height("100%")
  }