HarmonyOS 鸿蒙Next弹窗大小根据展示内容动态变化,但设置最大高度,超过该高度呈现滚动效果
HarmonyOS 鸿蒙Next弹窗大小根据展示内容动态变化,但设置最大高度,超过该高度呈现滚动效果 鸿蒙如何实现弹窗大小根据展示内容动态变化,但设置最大高度,超过该高度内容可以滚动。
可以在你的弹窗UI不设置高度,最外层包裹Scroll,设置最大高度.constraintSize({ maxHeight: 100 }),超过就会有滚动效果,参考demo
import { PromptAction } from '@kit.ArkUI';
@Entry
@Component
struct Index {
promptAction: PromptAction = this.getUIContext().getPromptAction()
private customDialogComponentId: number = 0
scroller: Scroller = new Scroller()
@Builder
customDialogComponent() {
Scroll(this.scroller) {
Column {
Text('弹窗').fontSize(30)
Column().backgroundColor(Color.Red).width(50).height(150)
Row({ space: 50 }) {
Button("确认").onClick(() => {
this.promptAction.closeCustomDialog(this.customDialogComponentId)
})
Button("取消").onClick(() => {
this.promptAction.closeCustomDialog(this.customDialogComponentId)
})
}
}
}.scrollable(ScrollDirection.Vertical) // 滚动方向纵向
.scrollBar(BarState.On) // 滚动条常驻显示
.scrollBarColor(Color.Gray) // 滚动条颜色
.scrollBarWidth(1) // 滚动条宽度
.friction(0.6)
.edgeEffect(EdgeEffect.None)
.constraintSize({ maxHeight: 100 })
.onScrollStop(() => {
console.info('Scroll Stop')
})
}
build() {
Row() {
Column() {
Button("click me")
.onClick(() => {
this.promptAction.openCustomDialog({
builder: () => {
this.customDialogComponent()
},
onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
console.info("reason" + JSON.stringify(dismissDialogAction.reason))
console.log("dialog onWillDismiss")
if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
dismissDialogAction.dismiss()
}
if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
dismissDialogAction.dismiss()
}
}
}).then((dialogId: number) => {
this.customDialogComponentId = dialogId
})
})
}
.width('100%')
.height('100%')
}
.height('100%')
}
}
更多关于HarmonyOS 鸿蒙Next弹窗大小根据展示内容动态变化,但设置最大高度,超过该高度呈现滚动效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS(鸿蒙)系统中,若要实现弹窗(Dialog)大小根据展示内容动态变化,并设置最大高度,超过该高度时呈现滚动效果,可以通过以下方式实现:
-
布局文件:首先,在布局文件中定义弹窗的UI,使用
ScrollView
或NestedScrollView
来包裹需要滚动的内容部分。同时,为整个弹窗设置一个容器(如LinearLayout
或RelativeLayout
),并为其设置最大高度属性(如android:maxHeight
,注意在鸿蒙中属性名可能有所不同,需参考鸿蒙官方文档)。 -
动态计算内容高度:在弹窗显示前,根据内容的实际高度动态调整弹窗容器的高度。如果内容高度超过最大高度限制,则
ScrollView
或NestedScrollView
将自动生效,允许用户滚动查看全部内容。 -
弹窗设置:在创建弹窗对象时,将布局文件设置给弹窗,并确保弹窗的宽高模式为
WRAP_CONTENT
,以便根据内容动态调整大小。 -
显示弹窗:最后,通过Activity或Fragment的上下文显示弹窗,并确保弹窗的显示逻辑符合上述布局和动态调整的要求。
请注意,由于鸿蒙系统的API和属性可能与Android有所不同,具体实现时需参考鸿蒙的官方开发文档和示例代码。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html