模态转场
模态转场，就是页面中弹出，全屏&半屏的弹框。
1.半模态转场
名称：.bindSheet
isShow: 是否显示半模态页面。
builder: 自定义构建函数，函数中配置半模态页面内容。
options: 配置半模态页面的可选属性。
更多属性请查看官方文档
写法：
- 绑定半模态框
.bindSheet(this.isShow, this.myBuilder())
##### 这里注意：
在非双向绑定情况下，以拖拽方式关闭半模态页面不会改变isShow参数的值。
为了使isShow参数值与半模态界面的状态同步，建议使用$$双向绑定isShow参数
.bindSheet($$this.isShow,this.sheetBuilder(),{})
- $$ 双向绑定
- 定义控制变量
@State isShow: boolean = false
- 自定义构建函数内容
@Builder
myBuilder() {
// 结构略
}
- 控制显示
.onClick(() => {
this.isShow = true
})
效果图实现代码：
@Entry
@Component
struct Index {
// 2.准备，定义控制变量
@State isShow:boolean=false
// 3.自定义构建函数，自定义半模态页面显示内容
@Builder sheetBuilder(){
Column(){
Text('半模态提示框内容')
.fontSize(30)
Text('xXx')
.fontSize(30)
.backgroundColor(Color.Red)
.onClick(()=>{
this.isShow=false
})
}
}
build() {
Column(){
/*
*半模态提示框：
* .bindSheet()
* 注意点：bindSheet的打开和关闭与写在谁身上没有关系，只要注册一次就可以在任意组件使用，只需要改其布尔值就行
* */
Text('点我弹出半模态')
.onClick(()=>{
this.isShow=true
})
Button('点我弹出半模态')
// 1.在按钮注册提示框
// $$this.isShow 表示将this.isShow这个状态变量与 .bindSheet内部的动作进行双向绑定
// 双向：数据发生改变->驱动页面更新+当前页面发生改变->驱动数据跟着改变 双向
.bindSheet($$this.isShow,this.sheetBuilder(),
{
// 设置半模态高度
// height:300
//设置自适应高度，根据内容高度：FIT_CONTENT
height:SheetSize.FIT_CONTENT,
// 设置是否显示关闭图标(如果设计师给的关闭按钮样式比较特殊时，需要关闭默认关闭按钮，在builder函数里自定义一个关闭按钮，关闭代码在onclick(()=>{})里改其值)
showClose:true,
})
.onClick(()=>{
//点击就改变它的布尔值
this.isShow=true
})
}
.width('100%')
.height('100%')
.backgroundColor('rgba(0,0,0,0.3)')
}
}
2.全模态转场
名称：.bindContentCover
isShow: 是否显示全模态页面。
builder: 自定义构建函数，函数中配置全模态页面内容。
options: 配置全模态页面的可选属性。
更多属性请查看官方文档
