HarmonyOS 关于自定义弹窗的封装调用

想为每个page新增一个‘加载中’弹窗，应该如何封装调用？不想在每个page中都写冗余的CustomDialogController模板代码。

HarmonyOS

zbw_apple

2024-10-28 11:21:01

浏览

回答 2

按赞同

按时间

鱼弦CTO

在 HarmonyOS 中，为了避免在每个页面中都重复编写冗余的 CustomDialogController 模板代码，可以通过封装一个通用的加载中弹窗组件，然后在需要的地方调用这个组件。以下是一个可能的实现方案：

### Step 1: 封装加载中弹窗

首先，你可以创建一个通用的加载中弹窗组件，比如 LoadingDialog.hml 和 LoadingDialog.js。这个组件将负责显示和隐藏加载动画。

#### LoadingDialog.hml

<!-- LoadingDialog.hml -->
@entry
<dialog id="loadingDialog" controller="{{this}}">
    <div class="dialog-container">
        <progress circular></progress>
        <text>加载中...</text>
    </div>
</dialog>1.
2.
3.
4.
5.
6.
7.
8.

#### LoadingDialog.hss

/* LoadingDialog.hss */
.dialog-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

progress {
    width: 50px;
    height: 50px;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

#### LoadingDialog.js

// LoadingDialog.js
export default {
    show() {
        this.$element('loadingDialog').show();
    },
    hide() {
        this.$element('loadingDialog').close();
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.

### Step 2: 在应用程序中使用封装好的弹窗

接下来，在每个页面中引用并使用这个封装好的加载中弹窗。

#### 引入加载中弹窗

假设你有一个页面叫做 MainPage，下面是在该页面中引入并使用 LoadingDialog 的方法。

#### MainPage.hml

<!-- MainPage.hml -->
<component src="@resources/LoadingDialog" id="loadingDialogComponent"></component>

<div>
    <!-- 页面其他内容 -->
    <button onclick="showLoading()">Show Loading</button>
    <button onclick="hideLoading()">Hide Loading</button>
</div>1.
2.
3.
4.
5.
6.
7.
8.

#### MainPage.js

// MainPage.js
export default {
    data: {
        loadingDialog: null,
    },
    onInit() {
        this.loadingDialog = this.$element('loadingDialogComponent');
    },
    showLoading() {
        this.loadingDialog.show();
    },
    hideLoading() {
        this.loadingDialog.hide();
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

### 总结

通过以上步骤，我们创建了一个通用的 LoadingDialog 组件，并且在具体页面中简单地调用其 show() 和 hide() 方法来显示和关闭加载中弹窗。这种方式避免了在每个页面中重复编写相同的模板代码，提高了代码的可维护性和复用性。

2024-10-28 15:27:37

put_get

可以参考以下用例：

@CustomDialog  
struct CustomDialogExample {  
  textContent: string = ''  
  dialogController: CustomDialogController = new CustomDialogController({  
    builder: CustomDialogExample(),  
  })  
  
  build() {  
    Column() {  
      Text(this.textContent)  
        .fontSize(20)  
        .margin({ top: 10, bottom: 10 })  
    }  
  }  
}  
  
  
@Entry  
@Component  
struct Index {  
  @Builder  
  ButtonShowToast(buttonText: string, content: string) {  
    Button(buttonText)  
      .onClick(() => {  
        let dialogController: CustomDialogController = new CustomDialogController({  
          builder: CustomDialogExample({ textContent: content }),  
        })  
        dialogController.open()  
      })  
  }  
  
  build() {  
    Row() {  
      Column() {  
        this.ButtonShowToast('test1', '加载中1...')  
        this.ButtonShowToast('test2', '加载中2...')  
      }  
    }  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

2024-10-28 16:18:15

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 关于自定义弹窗的封装调用

订阅鸿蒙技术特刊，精选内容抢先看