HarmonyOS鸿蒙Next限制高度底部弹窗案例

HarmonyOS鸿蒙Next限制高度底部弹窗案例 HarmonyOS Next应用开发案例（持续更新中……）

本案例完整代码，请访问：Gitee代码仓库

本案例已上架 HarmonyOS NEXT 开源组件市场，如需获取或移植该案例，可安装此插件。开发者可使用插件获取鸿蒙组件，添加到业务代码中直接编译运行。

介绍

本示例介绍了如何实现一个限制高度的底部弹窗，以购物应用的“我的”页面来呈现。当给一个底部弹窗的可滚动区域设置最大高度后，如果弹窗内部视图的高度超过了这个最大高度，弹窗可滚动区域的高度就是这个最大高度，视图内容不会展示完全，需要滚动查看；如果弹窗内部视图的高度没有超过这个最大高度，弹窗可滚动区域高度就是视图的高度，视图内容展示完全。

效果图预览

限制高度底部弹窗效果

使用说明：

  • 点击“常用设置”查看已达到限制高度的底部弹窗，视图内容不会展示完全，需要滚动查看。
  • 点击“安全设置”查看未达到限制高度的底部弹窗，视图内容展示完全。

实现步骤

  1. 创建一个限制高度的底部弹窗，这个弹窗内部视图和可滚动区域的最大高度可以通过外部传入。如下代码所示，wrapBuilder用于创建自定义的视图，Scroll组件使用constraintSize方法设置了最大高度，如果自定义视图的高度没有超过最大高度，Scroll组件的高度就是自定义视图的高度。如果自定义视图的高度超过最大高度，Scroll组件的高度就会是最大高度。
maxScrollHeight: Length = '90%';     // 最大可滚动区域高度
wrapBuilder?: WrappedBuilder<[]>;    // 自定义视图创建方式

Scroll() {
  Column() {
    if (this.wrapBuilder) {
      // 创建自定义视图
      this.wrapBuilder.builder()
    }
  }.width($r('app.string.limited_height_bottom_dialog_full_width'))
}.width($r('app.string.limited_height_bottom_dialog_full_width'))
// TODO：知识点：使用constraintSize方法可以设置约束尺寸，组件布局时，进行尺寸范围限制。这里设置Scroll组件的高度限制。
.constraintSize({maxHeight: this.maxScrollHeight})
.id('scroll')
  1. 创建常用设置底部弹窗的视图和安全设置底部弹窗的视图，下面是创建常用设置底部弹窗视图的代码。
/**
 * 创建常用设置底部弹窗视图
 */
@Builder
function createCommonSettingView() {
  CommonSettingView()
}
  1. 创建常用设置底部弹窗的CustomDialogController和创建安全设置底部弹窗的CustomDialogController，传入需要的参数，下面是创建常用设置底部弹窗的CustomDialogController的代码。
// 常用设置底部弹窗的CustomDialogController
commonSettingDialogController: CustomDialogController = new CustomDialogController({
  builder: LimitedHeightBottomDialog({
    title: $r('app.string.limited_height_bottom_dialog_common_setting'),
    maxScrollHeight: DIALOG_MAX_SCROLL_HEIGHT,
    wrapBuilder: wrapBuilder(createCommonSettingView),
    showFlag: this.commonSettingDialogShowFlag
  }),
  alignment: DialogAlignment.Bottom,
  width: $r('app.string.limited_height_bottom_dialog_full_width'),
  customStyle: true,         // customStyle需要设置为true，否则底部弹窗出现的动效会有问题
  autoCancel: true,
  onWillDismiss: () => {     // 修改点击弹窗外部区域和返回操作时弹窗消失的方式，这里的处理会有一个动效。不加这个处理方式的话，弹窗会以默认的方式消失
    this.commonSettingDialogShowFlag = Visibility.Hidden;
    setTimeout(() => {
    this.commonSettingDialogController.close();
    }, CLOSE_DIALOG_DELAY)
  }
});
  1. 调用常用设置底部弹窗的CustomDialogController或安全设置底部弹窗的CustomDialogController的open方法，让弹窗展示出来，下面出现常用设置底部弹窗的代码。
// 弹出常用设置底部弹窗
this.commonSettingDialogController.open();

高性能知识点

不涉及

工程结构 & 模块类型

limitedheightbottomdialog                           // har
|--dialog
|   |--CommonSettingView.ets                       // 常用设置弹窗视图
|   |--LimitedHeightBottomDialog.ets               // 限制高度底部弹窗
|   |--SecuritySettingView.ets                     // 安全设置弹窗视图
|--model
|   |--ActionItem                                  // 操作项信息
|--view
|   |--ActionSectionView.ets                       // 操作组合组件
|   |--LimitedHeightBottomDialogComponent.ets      // 限制高度底部弹窗案例页面

是否支持模拟器

是

模块依赖

依赖 动态路由模块 来实现页面的动态加载。

参考资料


更多关于HarmonyOS鸿蒙Next限制高度底部弹窗案例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，限制高度的底部弹窗可以通过BottomSheetDialog组件实现。该组件允许开发者自定义弹窗的高度，并通过设置PeekHeight属性来控制弹窗的默认显示高度。PeekHeight的值可以是一个固定数值或相对于屏幕高度的百分比。此外，BottomSheetDialog还支持设置最大高度，通过MaxHeight属性可以限制弹窗的最大高度，确保弹窗不会超出指定范围。

在布局文件中定义弹窗内容时，可以使用ConstraintLayout或LinearLayout等布局容器，并通过layout_height属性指定弹窗内容的高度。在代码中，可以通过BottomSheetBehavior类来动态控制弹窗的行为，例如设置弹窗的展开状态、折叠状态或隐藏状态。

示例代码片段如下：

val bottomSheetDialog = BottomSheetDialog(context)
bottomSheetDialog.setContentView(R.layout.bottom_sheet_layout)
val bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetDialog.findViewById(R.id.bottom_sheet))
bottomSheetBehavior.peekHeight = 500 // 设置默认高度
bottomSheetBehavior.maxHeight = 800 // 设置最大高度
bottomSheetDialog.show()

通过以上方式，可以在HarmonyOS Next中实现高度可控的底部弹窗，满足不同场景的需求。

更多关于HarmonyOS鸿蒙Next限制高度底部弹窗案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过Sheet组件实现底部弹窗，并通过设置height属性限制其高度。以下是一个简单的案例：

import { Sheet } from '@ohos.arkui';

@Entry
@Component
struct BottomSheetExample {
  @State isSheetVisible: boolean = false;

  build() {
    Column() {
      Button('显示底部弹窗')
        .onClick(() => {
          this.isSheetVisible = true;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)

    Sheet({
      isVisible: this.isSheetVisible,
      height: '50%' // 限制弹窗高度为屏幕的50%
    }) {
      Column() {
        Text('这是底部弹窗内容')
          .fontSize(20)
          .margin(10)
        Button('关闭')
          .onClick(() => {
            this.isSheetVisible = false;
          })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
}

此案例中，点击按钮会显示一个高度为屏幕50%的底部弹窗，点击“关闭”按钮可隐藏弹窗。

回到顶部