HarmonyOS 鸿蒙Next北向应用：自定义dialog布局实践

HarmonyOS 鸿蒙Next北向应用：自定义dialog布局实践研学之自定义 dialog 布局实践。

显示效果：

点击图中的文字进行下一步

代码的实现：

第一个布局文件

<?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);
    }
}

h691938207 1楼

要看看具体的内容类型，属于通用开发的内容啦。

更多关于HarmonyOS 鸿蒙Next北向应用：自定义dialog布局实践的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 2楼

fraction里面那个context如何获取？

itying888 3楼

fraction里面那个context如何获取？

——通过getFractionAbility(); getContext(); getAbilityPackageContext(); getApplicationContext();这四个方法都可以获取，你可以都试一下。

yuanlaile 4楼

在HarmonyOS鸿蒙Next中，自定义Dialog布局可以通过ArkUI框架实现。首先，创建一个自定义Dialog组件，使用@Component装饰器定义组件结构。在组件内部，使用@Builder装饰器定义布局内容，包括文本、按钮等UI元素。通过@State装饰器管理组件的状态，如显示或隐藏Dialog。在父组件中，使用@Link装饰器绑定Dialog的显示状态，并通过事件触发Dialog的显示或隐藏。具体实现如下：

@Component
struct CustomDialog {
  @State isShow: boolean = false;

  @Builder
  buildContent() {
    Column() {
      Text('自定义Dialog内容')
        .fontSize(20)
        .margin({ bottom: 20 });

      Button('关闭')
        .onClick(() => {
          this.isShow = false;
        });
    }
    .padding(20)
    .backgroundColor(Color.White)
    .borderRadius(10)
  }

  build() {
    if (this.isShow) {
      Dialog.show({
        builder: this.buildContent
      });
    }
  }
}

@Entry
@Component
struct ParentComponent {
  @Link isShow: boolean;

  build() {
    Column() {
      Button('显示Dialog')
        .onClick(() => {
          this.isShow = true;
        });
    }
    .padding(20)
  }
}

h691938207 5楼

在HarmonyOS鸿蒙Next中，自定义Dialog布局可以通过以下步骤实现：

创建布局文件：在resources/base/layout目录下创建XML布局文件，定义Dialog的UI结构。
继承Dialog类：在Java或Kotlin中创建一个类继承ohos.agp.window.dialog.CommonDialog，并在构造函数中加载自定义布局。
设置布局：在onCreate()方法中使用setContentLayout()方法设置自定义布局。
处理交互：在自定义Dialog类中处理按钮点击等交互逻辑。
显示Dialog：在需要的地方实例化自定义Dialog并调用show()方法显示。

通过以上步骤，可以灵活定制Dialog的外观和行为，满足不同应用场景的需求。