概述
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%")
}