article/004/index.md · qincji/ZeroOneApp

# 第4篇：对话框是每个项目的基础，那么禁止系统返回的对话框应该如何实现呢？

> 我们知道`@CustomDialog`是不支持拦截系统返回键的，但是很多场景我们需要用户禁止取消弹窗的，比如：《系统维护的公告弹窗》。那么我们如何实现呢？答案是`Navigation`！如果还不知道`Navigation`怎么使用的话，请看回去第2篇和第3篇。

## 1.最核心的部分

### 1.1.首先我们先看看实现的代码：

```c
NavDestination() {
  Stack() {
    //自定义弹窗布局
  }
  .backgroundColor("#99000000")//设置对话框样式的半透明背景
  .width('100%')
  .height('100%')
}
.onBackPressed(() => {
  return true;//拦截返回
})
.mode(NavDestinationMode.DIALOG)//设置对话框模式
.hideTitleBar(true)
```

### 1.2.上面注释的部分都是重点，其中最关键的是两个步骤：

1) 模式必须选择`NavDestinationMode.DIALOG`，页面背景变的完全透明，因此我们主动加上半透明`backgroundColor("#99000000")`
2) 实现拦截系统返回键，在`onBackPressed`中返回`true`

## 2.我们来打造一款项目中必须要用的对话框！

### 2.1.新模块创建和路由配置过程

#### 2.1.1.我们新建一个`dialog`的`har`。

1) 选中`common`文件夹，右击->New->Module，选择`Static Library`，取名为：`dialog`
2) 然后在`dialog`（oh-package.json5文件中）添加路由依赖：

```c
"dependencies": {
    "@common/router": "file:../router"
  }
```

3) 在entry的`build-profile.json5`添加模块：

```c
  "buildOption": {
    "arkOptions": {
      // TODO：知识点：动态路由中使用了动态import变量表达式的能力，需要在这里配置模块名，和oh-package.json5中dependencies下面配置的模块名相同。
      "runtimeOnly": {
        "sources": [
        ],
        "packages": [
          "@common/dialog",
        ]
      }
    }
  },
```

4) 在entry的`oh-package.json5`添加模块依赖：

```c
  "dependencies": {
    "@common/dialog": "file:../../../common/dialog",
  }
```

5) 接着在router模块的`RouterPage`中，增加路由信息：

```c
static readonly HINT_DIALOG: RouterInfo = RouterPage.create("@common/dialog", "hint_dialog", true);
```

6) 回到`dialog`模块，新建名为`HintDialog`的组件，然后在`Index.ets`文件中增加页面导入：

```c
import { RouterPage } from '@common/router/Index';

// 动态import时需要调用的接口，接口名请使用harInit，用于动态加载页面
export function harInit(pageName: string) {
  switch (pageName) {
    case RouterPage.HINT_DIALOG.pageName:
      import('./src/main/ets/components/hint/HintDialog');
    //当import后，就会执行 RouterNav.registerPage(RouterPage.LOGIN, wrapBuilder(getPage)) ，从而添加到路由管理中
      break;
  }
}
```

7) 再回到`dialog`模块的`HintDialog`文件中增加注册：

```c
import { RouterNav, RouterPage } from '@common/router';

@Component
export struct HintDialog {
  @State result: string = "";

build() {
    NavDestination() {
      Stack() {
        Button("这是能拦截系统返回的弹窗只有点我调用pop才能关闭弹窗")
          .onClick(() => {
            RouterNav.pop();
          })
      }
      .backgroundColor("#99000000")
      .width('100%')
      .height('100%')
    }
    .onReady(cxt => {
      const record = cxt.pathInfo.param as Record<string, object>;
      this.result = JSON.stringify(record);
    })
    .onBackPressed(() => {
      return true;
    })
    .mode(NavDestinationMode.DIALOG)
    .hideTitleBar(true)
  }
}

@Builder
function getPage(_value: object): void {
  HintDialog();
}

RouterNav.registerPage(RouterPage.HINT_DIALOG, wrapBuilder(getPage))
```

8) 我们回到entry，实现跳转就能实现不能返回的弹框了

```c
Button('对话框')
        .onClick(() => {
          RouterNav.push(RouterPage.HINT_DIALOG)
        })
```

**通过以上步骤，我们实现了最基本的拦截弹窗功能。**

#### 2.1.2.实现自定义弹窗需求

1) 样式等是根据我的[开源项目hint-dialog改造的](https://ohpm.openharmony.cn/#/cn/detail/@qincji%2Fdialog)，而本项目依赖行太强，所以没有做成三方库形式。而`hint-dialog`项目则因为不支持系统返回拦截，所以才有了这一节的改造。
2) 我们先看看`hint-dialog`的效果：

![hint-dialog](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/184/323/657/0070086000184323657.20240422180059.90287920365188277528088271641456:50001231000000:2800:E275CB2B69988E1A0F8782F1F275FBF2D91C33B4C39CE04B86173AA6EF9095A5.gif)

3) 调用方式：

```c
Button('对话框')
    .onClick(() => {
      const parm: HintParm = {
        content: "Command Line Tools集合了HarmonyOS应用开发所用到的系列工具，包括代码检查codelinter、三方库包管理ohpm、命令行解析hstack、编译构建hvigorw。",
        showNo: false,
        outsideCancel: false,
        pressBackCancel: false,
        alignment: Alignment.TopStart,
        noTitle: true,
        okMsg: "同意，并继续！",
        onOk: () => {
          this.value = "点击了确定！"
        }
      }
      RouterNav.push(RouterPage.HINT_DIALOG, parm)
    })
```

4) 因此，我们每次调用只要构建`HintParm`参数即可，而`HintParm`具体实现：

```c
/*
 * @Desc: 每一次弹窗需要的参数，提示框的参数。
 * @Author: qincji
 * @Address: https://gitee.com/qincji/ZeroOneApp
 * @Date: 2024/4/19
 * @Email: xhunmon@126.com
 * @OpenSource: https://github.com/xhunmon/ & https://gitee.com/qincji/
 */
export interface HintParm {
  /**
   * 显示的内容，根据isWebType来显示web还是text。如果为 ''或undefined则去HintStyle里面的。
   */
  content: string
  /**
   * 标题，默认："温馨提示"
   */
  title?: string
  /**
   * 只有true时，不显示标题
   */
  noTitle?: boolean
  /**
   * 取消按钮的信息，默认："取消"
   */
  noMsg?: string
  /**
   * 确定按钮的信息，默认："确定"
   */
  okMsg?: string
  /**
   * 是否需要显示取消按钮，默认：true
   */
  showNo?: boolean
  /**
   * 是否是web类型，默认：false
   */
  isWebType?: boolean
  /**
   * web控制器，isWebType为true时有效。
   */
  controller?: WebviewController;

/**
   * 点击系统返回键可以取消吗，默认 true。
   */
  pressBackCancel?: boolean

/**
   * 点击外面区域是否可以取消，默认 true。
   */
  outsideCancel?: boolean
  /**
   * 点击"取消"的回调
   */
  onNo?: () => void
  /**
   * 点击"确定"的回调
   */
  onOk?: () => void
  /**
   * 位置，默认居中。
   */
  alignment?: Alignment
}
```

5) 另外，还支持全局自定义样式，只需设置：

```c
HintDialog.initDefaultStyle(HintStyle)
```

7) 而`HintStyle`具体实现：

```c
import { BtnParm } from './BtnParm'
import { TextParm } from './TextParm'
import { TitleParm } from './TitleParm'
import { WebParm } from './WebParm'

/*
 * @Desc: 全局初始化时的样式和配置。
 * @Author: qincji
 * @Address: https://gitee.com/qincji/ZeroOneApp
 * @Date: 2024/4/19
 * @Email: xhunmon@126.com
 * @OpenSource: https://github.com/xhunmon/ & https://gitee.com/qincji/
 */
export interface HintStyle {
  /**
   * 点击外面区域是否可以取消，默认 true。
   */
  outsideCancel?: boolean
  /**
   * 点击系统返回键可以取消吗，默认 true。
   */
  pressBackCancel?: boolean
  /**
   * 位置
   */
  alignment?: Alignment
  /**
   * 标题的样式
   */
  titleParm?: TitleParm
  /**
   * text加载内容的样式
   */
  textParm?: TextParm
  /**
   * web加载内容的样式
   */
  webParm?: WebParm
  /**
   * 底部按钮的样式
   */
  btnParm?: BtnParm
  /**
   * 最外层UI的样式，通过该属性设置对话框的背景颜色、圆角、距离屏幕的距离等。
   */
  outBoxAttr?: AttributeModifier<ColumnAttribute>
  /**
   * 标题下面的线条样式
   */
  lineStyleTop?: AttributeModifier<LineAttribute>
  /**
   * 内容下面的线条样式
   */
  lineStyleBottom?: AttributeModifier<LineAttribute>
}
```

8) 通过设置`initDefaultStyle`，我们可以全局设置自定义样式，如：

```c
const titleAttr: AttributeModifier<TextAttribute> = {
  applyNormalAttribute(instance: TextAttribute): void {
    //设置标题颜色、自重、字体大小等
    instance.fontColor('#ff1145e5').fontWeight(FontWeight.Bolder).fontSize(25)
  }
};
const outBoxAttr: AttributeModifier<ColumnAttribute> = {
  applyNormalAttribute(instance: ColumnAttribute): void {
    //更改背景色、圆角、距离屏幕的距离
    instance.backgroundColor('#ffc8f1b3').borderRadius(5).margin(50)
  }
};
HintDialog.initDefaultStyle({
  //设置默认标题
  titleParm: new TitleParm('默认提示', titleAttr),
  outBoxAttr: outBoxAttr
})
```

9) 其实，源码是我们最好的老师，所在路径在`common/dialog`。但还有一个问题，那就是不能全屏！不过我们通过是全屏开发的，所以下一章解决这个问题！

**到这里，所有的内容已经结束了！本章的完整源码已经上传到gitee了：[鸿蒙应用0-1开发](https://gitee.com/qincji/ZeroOneApp)。**

qincji/ZeroOneApp

简介

发行版

贡献者

语言

近期动态

qincji/ZeroOneApp .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

语言

近期动态

搜索帮助

qincji/ZeroOneApp