HarmonyOS 鸿蒙Next CustomDialogController.open打开的弹窗被异常关闭；HarmonyOS 鸿蒙Next checkbox 点击时的背景效果怎么移除

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next CustomDialogController.open打开的弹窗被异常关闭；HarmonyOS 鸿蒙Next checkbox 点击时的背景效果怎么移除

1.CustomDialogController.open打开的弹窗被异常关闭
登录页隐私弹窗，点击跳转协议详情，再返回登录页，弹窗被关闭了，怎么让弹窗保持？

2，checkbox 点击时的背景效果怎么移除
点击CheckBox时，背景会有一个范围的背景色效果，如何移除？


更多关于HarmonyOS 鸿蒙Next CustomDialogController.open打开的弹窗被异常关闭；HarmonyOS 鸿蒙Next checkbox 点击时的背景效果怎么移除的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
可以使用Stack组件模拟实现Dialog的效果，页面跳转之后返回 可以做到 Dialog依然显示的效果。demo如下所示：
深色代码主题
复制
import router from '@ohos.router';

@Entry
@Component
struct First {
@State textValue: string = ‘Hello World’;
// 显隐控制设置为不占用
@State visible: Visibility = Visibility.None;


<span class="hljs-title function_">build</span>(<span class="hljs-params"></span>) {
    <span class="hljs-comment">// 使用stack可以实现假的dialog覆盖原页面上面</span>
    <span class="hljs-title class_">Stack</span>() {
        <span class="hljs-title class_">Row</span>() {
            <span class="hljs-comment">// 初始页面</span>
            <span class="hljs-title class_">Column</span>() {
                <span class="hljs-title class_">Text</span>(<span class="hljs-string">'Hello World'</span>)
                    .<span class="hljs-title function_">fontSize</span>(<span class="hljs-number">50</span>)
                    .<span class="hljs-title function_">fontWeight</span>(<span class="hljs-title class_">FontWeight</span>.<span class="hljs-property">Bold</span>);

                <span class="hljs-comment">// 触发dialog的地方</span>
                <span class="hljs-title class_">Button</span>(<span class="hljs-string">'click'</span>)
                    .<span class="hljs-title function_">onClick</span>(<span class="hljs-function">() =&gt;</span> {
                        <span class="hljs-comment">// 用于检测点击事件是否透传到原来的页面，我测了一下是没有透传的，符合dialog规范</span>
                        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"hit me!"</span>);
                        <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">visible</span> == <span class="hljs-title class_">Visibility</span>.<span class="hljs-property">Visible</span>) {
                            <span class="hljs-variable language_">this</span>.<span class="hljs-property">visible</span> = <span class="hljs-title class_">Visibility</span>.<span class="hljs-property">None</span>;
                        } <span class="hljs-keyword">else</span> {
                            <span class="hljs-variable language_">this</span>.<span class="hljs-property">visible</span> = <span class="hljs-title class_">Visibility</span>.<span class="hljs-property">Visible</span>;
                        }
                    })
                    .<span class="hljs-title function_">backgroundColor</span>(<span class="hljs-number">0x777474</span>)
                    .<span class="hljs-title function_">fontColor</span>(<span class="hljs-number">0x000000</span>);
            }
            .<span class="hljs-title function_">width</span>(<span class="hljs-string">'100%'</span>);
        }
        .<span class="hljs-title function_">height</span>(<span class="hljs-string">'100%'</span>)
        .<span class="hljs-title function_">backgroundColor</span>(<span class="hljs-number">0x885555</span>);

        <span class="hljs-comment">// 这里开始是构造弹窗效果主要需要修改的地方，首先是加了一个半透明灰色的蒙层效果</span>
        <span class="hljs-title class_">Text</span>(<span class="hljs-string">''</span>)
            .<span class="hljs-title function_">onClick</span>(<span class="hljs-function">() =&gt;</span> {
                <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">visible</span> == <span class="hljs-title class_">Visibility</span>.<span class="hljs-property">Visible</span>) {
                    <span class="hljs-variable language_">this</span>.<span class="hljs-property">visible</span> = <span class="hljs-title class_">Visibility</span>.<span class="hljs-property">None</span>;
                } <span class="hljs-keyword">else</span> {
                    <span class="hljs-variable language_">this</span>.<span class="hljs-property">visible</span> = <span class="hljs-title class_">Visibility</span>.<span class="hljs-property">Visible</span>;
                }
            })
            .<span class="hljs-title function_">width</span>(<span class="hljs-string">'100%'</span>)
            .<span class="hljs-title function_">height</span>(<span class="hljs-string">'100%'</span>)
            <span class="hljs-comment">// 透明度可以自己调节一下</span>
            .<span class="hljs-title function_">opacity</span>(<span class="hljs-number">0.16</span>)
            .<span class="hljs-title function_">backgroundColor</span>(<span class="hljs-number">0x000000</span>)
            .<span class="hljs-title function_">visibility</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">visible</span>);

        <span class="hljs-title class_">Column</span>() {
            <span class="hljs-comment">// 这个可以调节对话框效果，栅格布局，xs，sm，md，lg分别为四种规格</span>
            <span class="hljs-comment">// 下面的breakpoints是用来区别当前属于哪个类型的断点</span>
            <span class="hljs-comment">// gridRow里的栅格数量为总数，gridCol里的就是偏移和假Dialog所占据的栅格数</span>
            <span class="hljs-title class_">GridRow</span>({
                <span class="hljs-attr">columns</span>: { <span class="hljs-attr">xs</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">sm</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">md</span>: <span class="hljs-number">8</span>, <span class="hljs-attr">lg</span>: <span class="hljs-number">12</span> },
                <span class="hljs-attr">breakpoints</span>: {
                    <span class="hljs-attr">value</span>: [<span class="hljs-string">"400vp"</span>, <span class="hljs-string">"600vp"</span>, <span class="hljs-string">"800vp"</span>],
                    <span class="hljs-attr">reference</span>: <span class="hljs-title class_">BreakpointsReference</span>.<span class="hljs-property">WindowSize</span>
                },
            }) {
                <span class="hljs-title class_">GridCol</span>({
                    <span class="hljs-attr">span</span>: { <span class="hljs-attr">xs</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">sm</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">md</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">lg</span>: <span class="hljs-number">8</span> },
                    <span class="hljs-attr">offset</span>: { <span class="hljs-attr">xs</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">sm</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">md</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">lg</span>: <span class="hljs-number">2</span> }
                }) {
                    <span class="hljs-comment">// 这里放的就是原Dialog里的column里的东西，稍微改改应该就可以用了</span>
                    <span class="hljs-title class_">Column</span>() {
                        <span class="hljs-title class_">Text</span>(<span class="hljs-string">'Change text'</span>).<span class="hljs-title function_">fontSize</span>(<span class="hljs-number">20</span>).<span class="hljs-title function_">margin</span>({ <span class="hljs-attr">top</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">bottom</span>: <span class="hljs-number">10</span> });
                        <span class="hljs-title class_">TextInput</span>({ <span class="hljs-attr">placeholder</span>: <span class="hljs-string">''</span>, <span class="hljs-attr">text</span>: <span class="hljs-variable language_">this</span>.<span class="hljs-property">textValue</span> })
                            .<span class="hljs-title function_">height</span>(<span class="hljs-number">60</span>)
                            .<span class="hljs-title function_">width</span>(<span class="hljs-string">'90%'</span>)
                            .<span class="hljs-title function_">onChange</span>(<span class="hljs-function">(<span class="hljs-params">value: string</span>) =&gt;</span> {
                                <span class="hljs-variable language_">this</span>.<span class="hljs-property">textValue</span> = value;
                            });
                        <span class="hljs-title class_">Text</span>(<span class="hljs-string">'Whether to change a text?'</span>).<span class="hljs-title function_">fontSize</span>(<span class="hljs-number">16</span>).<span class="hljs-title function_">margin</span>({ <span class="hljs-attr">bottom</span>: <span class="hljs-number">10</span> });
                        <span class="hljs-title class_">Flex</span>({ <span class="hljs-attr">justifyContent</span>: <span class="hljs-title class_">FlexAlign</span>.<span class="hljs-property">SpaceAround</span> }) {
                            <span class="hljs-title class_">Button</span>(<span class="hljs-string">'cancel'</span>)
                                .<span class="hljs-title function_">onClick</span>(<span class="hljs-function">() =&gt;</span> {
                                    <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">visible</span> == <span class="hljs-title class_">Visibility</span>.<span class="hljs-property">Visible</span>) {
                                        <span class="hljs-variable language_">this</span>.<span class="hljs-property">visible</span> = <span class="hljs-title class_">Visibility</span>.<span class="hljs-property">None</span>;
                                    } <span class="hljs-keyword">else</span> {
                                        <span class="hljs-variable language_">this</span>.<span class="hljs-property">visible</span> = <span class="hljs-title class_">Visibility</span>.<span class="hljs-property">Visible</span>;
                                    }
                                })
                                .<span class="hljs-title function_">backgroundColor</span>(<span class="hljs-number">0xffffff</span>)
                                .<span class="hljs-title function_">fontColor</span>(<span class="hljs-title class_">Color</span>.<span class="hljs-property">Black</span>);

                            <span class="hljs-title class_">Button</span>(<span class="hljs-string">'jump'</span>)
                                .<span class="hljs-title function_">onClick</span>(<span class="hljs-function">() =&gt;</span> {
                                    router.<span class="hljs-title function_">pushUrl</span>({
                                        <span class="hljs-attr">url</span>: <span class="hljs-string">'pages/Second'</span>
                                    });
                                })
                                .<span class="hljs-title function_">backgroundColor</span>(<span class="hljs-number">0xffffff</span>)
                                .<span class="hljs-title function_">fontColor</span>(<span class="hljs-title class_">Color</span>.<span class="hljs-property">Red</span>);
                        }.<span class="hljs-title function_">margin</span>({ <span class="hljs-attr">bottom</span>: <span class="hljs-number">10</span> });
                    }
                    .<span class="hljs-title function_">backgroundColor</span>(<span class="hljs-number">0xffffff</span>)
                    .<span class="hljs-title function_">visibility</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">visible</span>)
                    .<span class="hljs-title function_">clip</span>(<span class="hljs-literal">true</span>)
                    .<span class="hljs-title function_">borderRadius</span>(<span class="hljs-number">20</span>);
                }
            }.<span class="hljs-title function_">width</span>(<span class="hljs-string">'95%'</span>); <span class="hljs-comment">// 设置弹窗宽度</span>
        }
    }
}

}

更多关于HarmonyOS 鸿蒙Next CustomDialogController.open打开的弹窗被异常关闭；HarmonyOS 鸿蒙Next checkbox 点击时的背景效果怎么移除的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next CustomDialogController.open打开的弹窗被异常关闭的问题：

此问题可能与弹窗的生命周期管理或外部事件干扰有关。请检查以下几点：

  • 确保弹窗打开时，相关页面或上下文未被销毁。
  • 查看是否有其他代码或事件（如后台任务、定时器等）在弹窗打开后触发了关闭操作。
  • 验证CustomDialogController的open方法调用是否在UI线程执行。

针对HarmonyOS 鸿蒙Next checkbox 点击时的背景效果移除的问题：

要移除checkbox点击时的背景效果，可以尝试以下方法：

  • 自定义checkbox的样式，通过XML布局或样式文件设置其背景为透明或空。
  • 在checkbox的点击事件中，动态设置其背景为透明或空。
  • 检查是否有全局主题或样式影响了checkbox的背景效果，并做相应调整。

请注意，上述方法可能需要根据具体的鸿蒙开发环境和版本做适当调整。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部