HarmonyOS 鸿蒙Next弹窗大小根据展示内容动态变化,但设置最大高度,超过该高度呈现滚动效果

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next弹窗大小根据展示内容动态变化,但设置最大高度,超过该高度呈现滚动效果 鸿蒙如何实现弹窗大小根据展示内容动态变化,但设置最大高度,超过该高度内容可以滚动。

2 回复

可以在你的弹窗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)大小根据展示内容动态变化,并设置最大高度,超过该高度时呈现滚动效果,可以通过以下方式实现:

  1. 布局文件:首先,在布局文件中定义弹窗的UI,使用ScrollViewNestedScrollView来包裹需要滚动的内容部分。同时,为整个弹窗设置一个容器(如LinearLayoutRelativeLayout),并为其设置最大高度属性(如android:maxHeight,注意在鸿蒙中属性名可能有所不同,需参考鸿蒙官方文档)。

  2. 动态计算内容高度:在弹窗显示前,根据内容的实际高度动态调整弹窗容器的高度。如果内容高度超过最大高度限制,则ScrollViewNestedScrollView将自动生效,允许用户滚动查看全部内容。

  3. 弹窗设置:在创建弹窗对象时,将布局文件设置给弹窗,并确保弹窗的宽高模式为WRAP_CONTENT,以便根据内容动态调整大小。

  4. 显示弹窗:最后,通过Activity或Fragment的上下文显示弹窗,并确保弹窗的显示逻辑符合上述布局和动态调整的要求。

请注意,由于鸿蒙系统的API和属性可能与Android有所不同,具体实现时需参考鸿蒙的官方开发文档和示例代码。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部