在日常中，类似这样从页面中弹出的全屏和半屏效果的弹窗就是这次要介绍的模态转场。
第一章
1.1半模态转场
名称及属性：
他的基本步骤：
1.先定义控制变量
2.自定义内容
3.绑定半模态框
4.控制显示
@Entry
@Component
struct SheetTransitionExample1 {
// 1. 定义控制变量
@State isShow: boolean = false
// 2.自定义内容
@Builder
myBuilder() {
// 结构略
}
build() {
Column() {
Button(`显示半模态`)
// 3.绑定半模态框
.bindSheet(this.isShow, this.myBuilder())
.onClick(() => {
// 4.控制显示
this.isShow = true
})
}
}
}
注意：上面的代码有一个小问题，如果通过那个关闭按钮模态会出现无法开启的情况，那么就要通过以下符合进行双向绑定isShow参数，也就是在上面的this.isShow前面加上以下符合
它的一些属性介绍：bindSheet是可以在任何组件上面进行.出来的 然后在它的里面在进行以下的这些参数配置，具体的属性语法已放在代码中进行解释。
注意： 它具体的一些参数就在代码中进行解释了
@Entry
@Component
struct Index {
// 2. 准备bindSheet的两个参数
@State isShow:boolean = false
@Builder sheetBuilder(){
Column(){
Text('半模态提示框内容')
.fontSize(20)
.height(400)
// 自定义关闭按钮
Text('X')
.backgroundColor(Color.Orange)
.height(20)
.width(20)
.onClick(()=>{
this.isShow = false
})
}
}
build() {
Column() {
/*
* 半模态提示框：
* .bindSheet()
* 注意点：✨✨bindSheet的打开和关闭跟写在哪个元素身上没关系，只看第一个参数如果是true则打开，否则隐藏
* */
// 在其他按钮上也可以打开[Button('点我弹出')]身上的半模态提示框
Button('打开半模态提示框')
.onClick(()=>{
this.isShow = true
})
Button('点我弹出')
// 1. 在按钮上注册bindSheet实现半模态提示框
// $$this.isShow 表示将this.isShow这个状态变量与bindSheet内部的动作进行双向绑定
// 双向： 数据发生改变 -> 驱动页面更新 + 当页面发生改变 -> 驱动数据跟着改变 双向
.bindSheet($$this.isShow,this.sheetBuilder(),{
// height:200 //✨✨给固定值
height:SheetSize.FIT_CONTENT, // ✨✨自适应内容高度
showClose:true, // ✨是否显示关闭图标(如果设计师给的关闭样式比较特殊的时候，我们需要自定义，所以需要把默认的关闭按钮给关闭掉)
// detents:[SheetSize.FIT_CONTENT,SheetSize.MEDIUM,SheetSize.LARGE]
detents:[200,400,600]
, dragBar:true
})
.onClick(()=>{
// 3. 点击按钮的时候打开半模态
this.isShow = true
})
}
.height('100%')
.width('100%')
.backgroundColor(Color.Pink)
}
}
下面做一个案例——分享弹窗
要求：
- 模态框的高度为 适应内容
- 不使用半模态的关闭按钮
参考代码：
/*
* 需求：
* 1. 点击按钮 弹出半模态
* 定义状态变量
* bindSheet($$this.状态变量,自定义的 Builder,{})
* */
@Entry
@Component
struct SheetTransitionExample1 {
@State isShow:boolean = false
// 半模态 Builder
@Builder
myBuilder() {
Column() {
Stack({ alignContent: Alignment.End }) {
Text('分享给好友')
.width('100%')
.textAlign(TextAlign.Center)
.fontSize(20)
// 自己的关闭按钮-因为没用默认的，需要自己实现关闭逻辑
Image($r('app.media.ic_public_cancel'))
.width(25)
.fillColor('#c0c0c0')
.onClick(()=>{
this.isShow=false
})
}
.width('100%')
Row() {
this.itemBuilder($r('app.media.ic_share_sina'), '微信')
this.itemBuilder($r('app.media.ic_share_url'), '朋友圈')
this.itemBuilder($r('app.media.ic_share_wechat'), '微博')
this.itemBuilder($r('app.media.ic_share_pyq'), '复制链接')
}
.height(80)
.width('100%')
.margin({ top: 30 })
.justifyContent(FlexAlign.SpaceAround)
}
.padding(15)
}
// 半模态 内部图片 Builder
@Builder
itemBuilder(src: ResourceStr, title: string) {
Column() {
Image(src)
.width(50)
Text(title)
.fontSize(14)
.margin({ top: 10 })
}
}
build() {
Column() {
Button(`显示半模态`)
.fontSize(20)
.bindSheet($$this.isShow,this.myBuilder(),{
height:SheetSize.FIT_CONTENT,
showClose:false // 默认的关闭按钮 有背景，不太好看 关掉
})
.onClick(()=>{
this.isShow=true
})
// 展示半模态Builder
// this.myBuilder()
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
}
注意：
- 半模态中的图片如果不设置高度，默认不会加载，导致半模态默认不显示图片
- 解决方法：给图片或图片的容器加个高度即可
第二章
2.1 全屏模态
类似这种全屏显示的效果
它的属性名称是bindContentCover，具体说明如下：
它的步骤：
1.先定义控制变量
2.用Builder自定义内容
3.绑定全模态框
4.控制显示
举例代码：
// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
// 1.定义控制显示的变量
@State isShow: boolean = false
// 2.全屏模态的 Builder
@Builder
myBuilder() {
Column() {
}
.width('100%')
.height('100%')
.backgroundColor('#0094ff')
.justifyContent(FlexAlign.Center)
}
build() {
Column() {
Button(`显示全屏模态${this.isS}`)
.fontSize(20)
.margin(10)
// 3.绑定全模态框
//其中的this.isShow是你定义的状态变量
//this.myBuilder()为你自己构建的一个内容框架
.bindContentCover(this.isShow, this.myBuilder())
//4.控制显示
.onClick(() => {
this.isShow = true
})
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
}
注意：不管是半模态.bindSheet还是全模态.bindContentCover，它们在任何地方都可以进行设置，并且在意义地方都可以设置点击事件来打开按钮。
