执行效果
上一篇文章中说过，直接使用鸿蒙系统中的CommonDialog大致是下面的效果：
这个效果实在是无法用于实际的应用开发。本文介绍如何定制自己的CommonDialog。还是先看演示视频：
准备布局
定制CommonDialog的第一步是定义对话框的布局，具体如下：
代码语言：javascript复制<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical">
<DirectionalLayout
ohos: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">
<Text
ohos:width="match_content"
ohos:height="match_content"
ohos:text="你觉得这个对话框怎么样？"
ohos:text_color="#000000"
ohos:text_size="20fp"/>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:top_margin="10vp"
ohos:orientation="horizontal">
<Button
ohos: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"
/>
<Component
ohos:width="0vp"
ohos:weight = "1"
ohos:height="match_parent"/>
<Button
ohos: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"
/>
<Component
ohos:width="0vp"
ohos:weight = "1"
ohos:height="match_parent"/>
<Button
ohos: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"
/>
<Component
ohos:width="20vp"
ohos:height="match_parent"/>
</DirectionalLayout>
</DirectionalLayout>
</DirectionalLayout>需要注意的是，最外层布局中只包含一个二层布局，这种做法的目的是为了解决对话框默认占满屏幕宽度的问题。
生成定制对话框
第2行通过LayoutScatter解析前面的布局文件。这种用法在ListContainer示例中使用过。
第3行代码将对话框设为透明，实际的效果是让最外层布局透明。视频中展示的从第二层布局开始到内容。
代码语言：javascript复制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() {
@Override
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();如果不调用setTransparent方法的话，画面看起来是下面的样子：
第4行代码是通过setContentCustomComponent方法生成你的布局对象传递给CommonDialog。
注意事项
目前的这种做法在鸿蒙文档中并没有说明，因此也就不排除将来发生变化的可能性。希望早日看到官方文档中的正式说法。
参考代码
完整代码可以从以下链接下载：
https://github.com/xueweiguo/Harmony/tree/master/HelloHarmony
参考资料
CommonDialog类
https://developer.harmonyos.com/cn/docs/documentation/doc-references/commondialog-0000001054678727
