HarmonyOS鸿蒙Next中如何让半模态面板弹出时上方跟随一块
HarmonyOS鸿蒙Next中如何让半模态面板弹出时上方跟随一块 下方是一个半模态面板如何实现这种效果
3 回复
你好。
这种需求，建议直接使用模态窗口来自定义实现了。
上半部使用阴影+透明实现。中间是你的优惠view，最下边是操作弹框。
```typescript
[@Entry](/user/Entry)
[@Component](/user/Component)
struct ModalTransitionExample {
[@State](/user/State) isShow: boolean = false
[@State](/user/State) isShow2: boolean = false
[@Builder](/user/Builder) myBuilder2() {
Column() {
Button("close modal 2")
.margin(10)
.fontSize(20)
.onClick(() => {
this.isShow2 = false;
})
}
.width('100%')
.height('100%')
}
[@Builder](/user/Builder) myBuilder() {
Column() {
Button("transition modal 2")
.margin(10)
.fontSize(20)
.onClick(() => {
this.isShow2 = true;
}).bindContentCover(this.isShow2, this.myBuilder2(), {
modalTransition: ModalTransition.DEFAULT,
backgroundColor: Color.Gray,
onWillAppear: () => {
console.log("BindContentCover onWillAppear.")
},
onAppear: () => {
console.log("BindContentCover onAppear.")
},
onWillDisappear: () => {
console.log("BindContentCover onWillDisappear.")
},
onDisappear: () => {
console.log("BindContentCover onDisappear.")
}
})
Button("close modal 1")
.margin(10)
.fontSize(20)
.onClick(() => {
this.isShow = false;
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
build() {
Column() {
Button("transition modal 1")
.onClick(() => {
this.isShow = true
})
.fontSize(20)
.margin(10)
.bindContentCover(this.isShow, this.myBuilder(), {
modalTransition: ModalTransition.DEFAULT,
backgroundColor: Color.Pink,
onWillAppear: () => {
console.log("BindContentCover onWillAppear.")
},
onAppear: () => {
console.log("BindContentCover onAppear.")
},
onWillDisappear: () => {
console.log("BindContentCover onWillDisappear.")
},
onDisappear: () => {
console.log("BindContentCover onDisappear.")
}
})
}
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.White)
.width('100%')
.height('100%')
}
}更多关于HarmonyOS鸿蒙Next中如何让半模态面板弹出时上方跟随一块的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，让半模态面板弹出时上方跟随一块可以通过使用Sheet组件和CustomDialogController实现。你可以在Sheet中自定义内容，并通过CustomDialogController控制其显示与隐藏。以下是一个简单的实现思路：
- 创建一个
Sheet组件，定义需要显示的内容。 - 使用
CustomDialogController控制Sheet的弹出与关闭。 - 在
Sheet组件的onAppear和onDisappear回调中，控制上方跟随块的显示与隐藏。
示例代码如下：
@Entry
@Component
struct MyComponent {
@State isSheetVisible: boolean = false;
@State isTopBlockVisible: boolean = false;
build() {
Column() {
Button('Show Sheet')
.onClick(() => {
this.isSheetVisible = true;
})
if (this.isTopBlockVisible) {
Text('Top Block')
.backgroundColor(Color.Gray)
.width('100%')
.height(100)
}
}
.sheet({
isVisible: this.isSheetVisible,
onAppear: () => {
this.isTopBlockVisible = true;
},
onDisappear: () => {
this.isTopBlockVisible = false;
}
}) {
Text('Sheet Content')
.backgroundColor(Color.White)
.width('100%')
.height(300)
}
}
}在这个示例中，Sheet组件弹出时，onAppear回调会触发，显示上方跟随块；Sheet关闭时，onDisappear回调会触发，隐藏上方跟随块。
