先使用@State定义一个状态变量,isShow 。来控制面板是否弹出展示。
@State isShow:boolean = false
给需要进行点击后便有页面弹出的地方添加点击事件 .onclick
然后使用面板属性 .bindSheet 控制弹出面板。
在 .bindSheet 中 使用 $$ 绑定面板是否展示弹出的值(isShow)
使用@Builder封装弹出页面的样式组件,在 .bindSheet 中调用封装,
@Builder myBuilder(){ Column(){ ItemPanel() } }
最后即可弹出页面。
showClose 选择是否需要通过面板右上角的关闭按钮来进行关闭弹出的页面。
enableOutsideInteractive: false, //不允许交互,显示蒙层 :是否在弹出的页面后显示弹出前的页面,若为true则不显示蒙层,弹出页面完全覆盖背后页面,false则是圆弧的边角页面,后面还有显示。
还有一些其他的属性性质参考官方文档,可以设置面板高度和其他等等。
代码如下:
.onClick(() => { this.isShow = true }) .bindSheet($$this.isShow, this.myBuilder(), { showClose:false, })