转场基本介绍
半模态转场通过bindSheet属性为组件绑定半模态页面，在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。
可以通过设置height属性来实现自定义高度；也可以通过设置height属性的SheetSize枚举类型，默认是LARGE。
| MEDIUM | 指定半模态高度为屏幕高度一半。 |
|---|---|
| LARGE | 指定半模态高度几乎为屏幕高度。 |
| FIT_CONTENT11+ | 指定半模态高度为适应内容的高度。 |
@Entry
@Component
struct Index {
@State isShow: boolean = false;
@Builder
myBuilder() {
...
... //半模态弹窗页面内容
}
build() {
Row() {
Column() {
...
... //通过事件打开半模态弹窗
}
.bindSheet($this.isShow, this.myBuilder(), {
backgroundColor: Color.Gray,
blurStyle: BlurStyle.Thick,
})
}
}
}场景描述
- 场景一：基于bindSheet半模态弹窗dragBar控制条对手势的判断
- 场景二：基于bindSheet半模态弹窗系统提供的能力（关闭图标和点击蒙层）和自定义的能力来关闭弹窗
方案描述
场景一：基于 bindSheet 半模态弹窗 dragBar 控制条对手势的判断
半模态bindSheet属性dragBar控制条添加了对手势的判断，在上滑，下滑或者点击控制条时，不会关闭面板。
说明：dragBar默认支持手势的判断
效果图
核心代码
@Entry
@Component
struct bindsheet {
@State isShow: boolean = false;
@Builder
myBuilder() {
Column() {
Text('Hello Word')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.margin(10)
}
}
build() {
Row() {
Column() {
Button("打开bindsheet弹窗")
.onClick(() => {
this.isShow = true
})
.fontSize(20)
.margin(10)
}
.width("100%")
.height("100%")
.bindSheet($this.isShow, this.myBuilder(), {
detents: [SheetSize.MEDIUM, SheetSize.LARGE, 200],
backgroundColor: Color.White,
blurStyle: BlurStyle.Thick,
showClose: false,
dragBar: true, //默认显示控制条
})
}.width("100%")
.backgroundColor("#ff578ddd")
}
}场景二：基于bindSheet半模态弹窗系统提供的能力（关闭图标和点击蒙层）和自定义的能力来关闭弹窗
方案一
希望弹出半模态之后，能实现点击背景，控制面板关闭的效果，根据系统提供的能力，通过点击蒙层和半模态弹窗中关闭图标来实现关闭半模态弹窗。
bindsheet半模态弹窗中showClose属性控制显示关闭图标，默认是显示；enableOutsideInteractive属性控制半模态所在页面是否允许交互。
核心代码
showClose:true,//显示关闭按钮
enableOutsideInteractive:false,//不允许交互，显示蒙层
@Entry
@Component
struct bindsheet {
@State isShow: boolean = false
@State sheetHeight: number = 300;
@State showDragBar: boolean = true;
@Builder
myBuilder() {
Column() {
Button("关闭关闭按钮")
.margin(10)
.fontSize(20)
.onClick(() => {
this.showDragBar = false;
})
Button("打开关闭按钮")
.margin(10)
.fontSize(20)
.onClick(() => {
this.showDragBar = true;
})
// Button("关闭弹窗")
// .margin(10)
// .fontSize(20)
// .onClick(() => {
// this.isShow = false;
// })
}
.width('100%')
.height('100%')
}
build() {
Column() {
Button("打开弹窗")
.onClick(() => {
this.isShow = true
})
.fontSize(20)
.margin(10)
.bindSheet($this.isShow, this.myBuilder(), {
detents: [SheetSize.MEDIUM, SheetSize.LARGE, 200],
backgroundColor: Color.Gray,
blurStyle: BlurStyle.Thick,
showClose: this.showDragBar,
// showClose属性为true时显示关闭按钮，开发者不想通过关闭按钮来关闭bindsheet弹窗的话，可以将showClose属性变为false
enableOutsideInteractive: false, //不允许交互，显示蒙层
preferType: SheetType.CENTER,
shouldDismiss: ((sheetDismiss: SheetDismiss) => {
console.log("bind sheet shouldDismiss")
sheetDismiss.dismiss()
})
})
}
.justifyContent(FlexAlign.Start)
.backgroundColor("#ff578ddd")
.width('100%')
.height('100%')
}
}效果图
方案二
bindsheet的isShow属性可以控制半模态页面是否显示，isShow是boolean类型，因此可以通过Button的点击事件来控制半模态弹窗的弹出和关闭。
核心代码
@Entry
@Component
struct bindsheet {
@State isShow: boolean = false
@Builder
myBuilder() {
Column() {
Button("关闭弹窗")
.margin(10)
.fontSize(20)
.onClick(() => {
this.isShow = false;
})//通过点击事件将isShow属性变为false，bindSheet弹窗关闭
}
.width('100%')
.height('100%')
}
build() {
Column() {
Button("打开弹窗")
.onClick(() => {
this.isShow = true
})
//通过点击事件将isShow属性变为true，bindSheet弹窗弹出
.fontSize(20)
.margin(10)
.bindSheet($this.isShow, this.myBuilder(), {
detents: [SheetSize.MEDIUM, SheetSize.LARGE, 200],
backgroundColor: Color.Gray,
showClose:false, //不显示关闭按钮
enableOutsideInteractive: true, //允许交互，不显示蒙层
blurStyle: BlurStyle.Thick,
preferType: SheetType.CENTER,
shouldDismiss: ((sheetDismiss: SheetDismiss) => {
console.log("bind sheet shouldDismiss")
sheetDismiss.dismiss()
})
})
}
.backgroundColor("#ff578ddd")
.justifyContent(FlexAlign.Start)
.width('100%')
.height('100%')
}
}效果图
阅读全文
下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.1024c.cn/archives/21926，转载请注明出处。
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.1024c.cn/archives/21926，转载请注明出处。
评论0