开发者工具箱-鸿蒙弹窗使用指南原创

在人间耕耘

发布于 2025-6-8 16:20

浏览

0收藏

鸿蒙弹窗使用指南

最近在开发鸿蒙应用时，经常需要用到各种弹窗。SDK文档看着还行，真用起来发现坑还不少。这里把踩过的坑和实现细节都记下来，省得以后自己或者同事再掉坑里。

一、基础知识

1.1 什么是弹窗

弹窗就是在应用界面上弹出的一个临时窗口，用于展示重要信息、收集用户输入或者进行确认操作。鸿蒙提供了多种弹窗组件，可以根据需求选择合适的类型。

1.2 主要类型

普通弹窗：用于展示简单信息，比如提示、警告
自定义弹窗：可以完全自定义内容和样式，想怎么玩就怎么玩
网页弹窗：用于展示网页内容，比如问卷调查
底部弹窗：从底部滑出的弹窗，适合展示列表
加载弹窗：显示加载状态的弹窗，别让用户等得心慌

二、开发背景

我们项目需要做个问卷调查，本来想自己写个表单，后来发现太麻烦了。正好有个现成的问卷系统，就想着用网页弹窗来实现。这样既能复用已有的问卷系统，又能保持统一的用户体验，一举两得。

三、实现步骤

3.1 基础配置

// 该引的都得引，不然编译直接报错
import { webview } from '@kit.ArkWeb';
import { BreakpointConstants } from '../../utils/BreakpointConstants';

// 配置网页Cookie，这个很重要，不配置的话问卷可能提交不了
webview.once("webInited", () => {
  console.log("配置Cookie同步");
  webview.WebCookieManager.configCookieSync("你的问卷地址", "1");
});

3.2 自定义弹窗实现

// 自定义弹窗组件，这里用@CustomDialog装饰器
@CustomDialog
export struct 问卷调查弹窗 {
  // 弹窗控制器，用来控制弹窗的显示和隐藏
  控制器: CustomDialogController;
  // 网页控制器，用来控制网页的加载和刷新
  网页控制器: webview.WebviewController = new webview.WebviewController();
  // 当前断点，用来适配不同屏幕尺寸
  @StorageLink('当前断点') 当前断点: string = BreakpointConstants.BREAKPOINT_LG;

  build() {
    Column() {
      // 标题栏，这里可以自定义样式
      Row() {
        Text('问卷调查')
          .fontSize(20)
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.text_primary'))

        Blank()

        // 关闭按钮，记得加点击事件
        Button({ type: ButtonType.Circle }) {
          Text('✕')
            .fontSize(20)
            .fontColor($r('app.color.text_secondary'))
        }
        .width(32)
        .height(32)
        .backgroundColor('transparent')
        .onClick(() => this.控制器.close())
      }
      .width('100%')
      .padding({ left: 24, right: 16 })
      .margin({ top: 16, bottom: 16 })

      // 网页内容，这里可以加载任何网页
      Column() {
        Web({ 
          src: '你的问卷地址', 
          controller: this.网页控制器 
        })
        .height("90%")
      }
    }
    // 根据屏幕尺寸调整弹窗大小
    .width(this.当前断点 === BreakpointConstants.BREAKPOINT_LG ? '50%' : '100%')
    .height('90%')
    .backgroundColor($r('app.color.background'))
    .borderRadius({ topLeft: 24, topRight: 24 })
  }
}

3.3 使用示例

// 在页面中使用弹窗，这里展示最简单的用法
@Entry
@Component
struct 主页面 {
  // 弹窗控制器，记得设置对齐方式和偏移量
  问卷调查弹窗控制器: CustomDialogController = new CustomDialogController({
    builder: 问卷调查弹窗(),
    alignment: DialogAlignment.Center,
    offset: { dx: 0, dy: 0 },
    customStyle: true
  });

  build() {
    Column() {
      Button('打开问卷')
        .onClick(() => {
          this.问卷调查弹窗控制器.open();
        })
    }
  }
}

四、踩坑记录

弹窗样式问题
- 弹窗背景色设置不生效，需要设置父容器背景色，这个坑我踩了好几次
- 弹窗圆角设置不完整，需要同时设置四个角，不然看起来很奇怪
- 弹窗阴影效果需要自己实现，SDK没有提供现成的
网页加载问题
- 网页加载慢，需要添加加载提示，不然用户以为卡住了
- Cookie同步不及时，需要等待webview初始化，这个很关键
- 网页内容高度自适应问题，有时候会显示不全
性能问题
- 弹窗打开关闭动画卡顿，需要优化
- 网页内容加载影响主线程，需要异步处理
- 内存占用过大，需要及时释放资源