自學(xué)鴻蒙應(yīng)用開發(fā)(26)- 自定義CommonDialog
執(zhí)行效果
上一篇文章中說過,直接使用鴻蒙系統(tǒng)中的CommonDialog大致是下面的效果:

這個效果實在是無法用于實際的應(yīng)用開發(fā)。本文介紹如何定制自己的CommonDialog。還是先看演示視頻:
準備布局
定制CommonDialog的第一步是定義對話框的布局,具體如下:
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:alignment="center"ohos:orientation="vertical"><DirectionalLayoutohos:width="match_content"ohos:height="match_content"ohos:top_padding="10vp"ohos:bottom_padding="10vp"ohos:left_padding="10vp"ohos:right_padding="10vp"ohos:background_element="#FFFFFF"ohos:orientation="vertical"><Textohos:width="match_content"ohos:height="match_content"ohos:text="你覺得這個對話框怎么樣?"ohos:text_color="#000000"ohos:text_size="20fp"/><DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:top_margin="10vp"ohos:orientation="horizontal"><Buttonohos:id="$+id:good"ohos:width="0vp"ohos:weight = "5"ohos:height="match_content"ohos:text="很好"ohos:text_size="20fp"ohos:text_color="#000000"ohos:background_element="#AAFFAA"/><Componentohos:width="0vp"ohos:weight = "1"ohos:height="match_parent"/><Buttonohos:id="$+id:ordinary"ohos:width="0vp"ohos:weight = "5"ohos:height="match_content"ohos:text="一般"ohos:text_size="20fp"ohos:text_color="#000000"ohos:background_element="#AAAAFF"/><Componentohos:width="0vp"ohos:weight = "1"ohos:height="match_parent"/><Buttonohos:id="$+id:bad"ohos:width="0vp"ohos:weight = "5"ohos:height="match_content"ohos:text="不好"ohos:text_size="20fp"ohos:text_color="#000000"ohos:background_element="#FFFF00"/><Componentohos:width="20vp"ohos:height="match_parent"/>DirectionalLayout>DirectionalLayout>DirectionalLayout>
需要注意的是,最外層布局中只包含一個二層布局,這種做法的目的是為了解決對話框默認占滿屏幕寬度的問題。
生成定制對話框
第2行通過LayoutScatter解析前面的布局文件。這種用法在ListContainer示例中使用過。
第3行代碼將對話框設(shè)為透明,實際的效果是讓最外層布局透明。視頻中展示的從第二層布局開始到內(nèi)容。
CommonDialog dlg = new CommonDialog(this);Component layout = LayoutScatter.getInstance(this).parse(ResourceTable.Layout_common_dialog, null, true);dlg.setTransparent(true);dlg.setContentCustomComponent(layout);Component.ClickedListener listener = new Component.ClickedListener() {public void onClick(Component component) {new ToastDialog(getContext()).setText(((Button)component).getText()).show();}};Button good = (Button)layout.findComponentById(ResourceTable.Id_good);good.setClickedListener(listener);Button ordinary = (Button)layout.findComponentById(ResourceTable.Id_ordinary);ordinary.setClickedListener(listener);Button bad = (Button)layout.findComponentById(ResourceTable.Id_bad);bad.setClickedListener(listener);dlg.show();
如果不調(diào)用setTransparent方法的話,畫面看起來是下面的樣子:

第4行代碼是通過setContentCustomComponent方法生成你的布局對象傳遞給CommonDialog。
注意事項
目前的這種做法在鴻蒙文檔中并沒有說明,因此也就不排除將來發(fā)生變化的可能性。希望早日看到官方文檔中的正式說法。
參考代碼
完整代碼可以從以下鏈接下載:
https://github.com/xueweiguo/Harmony/tree/master/HelloHarmony
參考資料
CommonDialog類
https://developer.harmonyos.com/cn/docs/documentation/doc-references/commondialog-0000001054678727
作者著作介紹
《實戰(zhàn)Python設(shè)計模式》是作者去年3月份出版的技術(shù)書籍,該書利用Python 的標準GUI 工具包tkinter,通過可執(zhí)行的示例對23 個設(shè)計模式逐個進行說明。這樣一方面可以使讀者了解真實的軟件開發(fā)工作中每個設(shè)計模式的運用場景和想要解決的問題;另一方面通過對這些問題的解決過程進行說明,讓讀者明白在編寫代碼時如何判斷使用設(shè)計模式的利弊,并合理運用設(shè)計模式。

對設(shè)計模式感興趣而且希望隨學(xué)隨用的讀者通過本書可以快速跨越從理解到運用的門檻;希望學(xué)習(xí)Python GUI 編程的讀者可以將本書中的示例作為設(shè)計和開發(fā)的參考;使用Python 語言進行圖像分析、數(shù)據(jù)處理工作的讀者可以直接以本書中的示例為基礎(chǔ),迅速構(gòu)建自己的系統(tǒng)架構(gòu)。
覺得本文有幫助?請分享給更多人。
關(guān)注微信公眾號【面向?qū)ο笏伎肌枯p松學(xué)習(xí)每一天!
面向?qū)ο箝_發(fā),面向?qū)ο笏伎迹?/span>
