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

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

HarmonyOS
2024-10-28 11:21:01
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
鱼弦CTO
1

在 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>

#### LoadingDialog.hss

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

progress {
    width: 50px;
    height: 50px;
}

#### LoadingDialog.js

// LoadingDialog.js
export default {
    show() {
        this.$element('loadingDialog').show();
    },
    hide() {
        this.$element('loadingDialog').close();
    }
}

### 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>

#### MainPage.js

// MainPage.js
export default {
    data: {
        loadingDialog: null,
    },
    onInit() {
        this.loadingDialog = this.$element('loadingDialogComponent');
    },
    showLoading() {
        this.loadingDialog.show();
    },
    hideLoading() {
        this.loadingDialog.hide();
    }
}

### 总结

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

分享
微博
QQ
微信
回复
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...')  
      }  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-10-28 16:18:15
相关问题
HarmonyOS 自定义弹窗封装后不显示
331浏览 • 1回复 待解决
如何封装全局性自定义弹窗
288浏览 • 1回复 待解决
自定义弹窗如何进一步封装
395浏览 • 1回复 待解决
HarmonyOS 自定义弹窗问题
676浏览 • 1回复 待解决
自定义弹窗自定义转场动画
1113浏览 • 1回复 待解决
HarmonyOS 自定义弹窗选择
344浏览 • 1回复 待解决
HarmonyOS 自定义弹窗CustomDialog问题
606浏览 • 1回复 待解决
HarmonyOS 全局自定义弹窗demo
281浏览 • 1回复 待解决
HarmonyOS 自定义弹窗 (CustomDialog)问题
372浏览 • 1回复 待解决
HarmonyOS 请提供自定义组件封装demo
391浏览 • 2回复 待解决
HarmonyOS 自定义弹窗遮罩未全屏
637浏览 • 1回复 待解决
HarmonyOS 希望优化自定义弹窗使用
238浏览 • 1回复 待解决