鸿蒙怎么实现自定义布局的Dialog

通过自定义xml布局实现dialog功能

dialog
2021-04-29 14:15:50
浏览
收藏 0
回答 2
已解决
回答 2
按赞同
/
按时间
红叶亦知秋
1

代码的实现:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Button
        ohos:id="$+id:text_01"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text_size="30fp"
        ohos:text="Dialog显示"
        ohos:top_margin="0vp"
        ohos:text_color="red"/>

</DirectionalLayout>

第二个布局文件

<?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:padding="10vp"
    ohos:background_element="grey"
    ohos:orientation="vertical">

    <Text
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:text="Dialog标题"
        ohos:text_color="Black"
        ohos:text_style="bold"
        ohos:text_size="40fp"/>

    <Text
        ohos:width="match_parent"
        ohos:height="match_parent"
        ohos:text="自定义Dialog内容"
        ohos:text_color="Black"
        ohos:text_style="bold"
        ohos:weight="1"
        ohos:text_alignment="vertical_center"
        ohos:top_margin="30vp"
        ohos:bottom_margin="30vp"
        ohos:left_margin="10vp"
        ohos:right_margin="10vp"
        ohos:text_size="30fp"/>


    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <Button
            ohos:width="match_parent"
            ohos:text="取消"
            ohos:text_size="30fp"
            ohos:padding="10vp"
            ohos:text_color="White"
            ohos:weight="1"
            ohos:margin="10vp"
            ohos:background_element="yellow"
            ohos:height="match_content"/>

        <Button
            ohos:width="match_parent"
            ohos:text="确定"
            ohos:text_size="30fp"
            ohos:weight="1"
            ohos:padding="10vp"
            ohos:text_color="White"
            ohos:margin="10vp"
            ohos:background_element="green"
            ohos:height="match_content"/>

    </DirectionalLayout>

</DirectionalLayout>

然后进行绑定

package com.example.jltfdialog.slice;

import com.example.jltfdialog.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.LayoutScatter;
import ohos.agp.window.dialog.CommonDialog;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        CommonDialog commonDialog = new   CommonDialog(this);
       super.setUIContent(ResourceTable.Layout_layout1);
        Button button= (Button) findComponentById(ResourceTable.Id_text_01);
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {


                Component component1 =   LayoutScatter.getInstance(getContext())

                        .parse(ResourceTable.Layout_ability_main,   null, true);

                commonDialog.setSize(800, 500);

                commonDialog.setContentCustomComponent(component1);

                commonDialog.show();
            }
        });

    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

 

代码取自李洋老师文章:https://harmonyos.51cto.com/posts/1992

分享
微博
QQ
微信
回复1
2021-04-29 14:56:56
学徒张小秋

可以参考XPopup啊:https://harmonyos.51cto.com/posts/4198

分享
微博
QQ
微信
回复
2021-04-29 14:56:59
相关问题
HarmonyOS 自定义Dialog宽度
56浏览 • 1回复 待解决
HarmonyOS 自定义dialog open无效
256浏览 • 1回复 待解决
HarmonyOS 自定义Dialog显示问题
434浏览 • 1回复 待解决
HarmonyOS 用CustomDialog自定义Dialog
268浏览 • 1回复 待解决
HarmonyOS如何实现自定义布局内置手势
443浏览 • 0回复 待解决
如何在全局实现一个自定义dialog弹窗
2835浏览 • 1回复 待解决
如何自定义popup弹窗布局
440浏览 • 2回复 待解决