HarmonyOS鸿蒙Next中关于CustomDialog自定义弹窗的样式问题

HarmonyOS鸿蒙Next中关于CustomDialog自定义弹窗的样式问题 使用自定义弹窗CustomDialog的时候，build中的跟组件宽度设置的100%，alignment:设置的DialogAlignment.Bottom，为啥弹窗显示后，弹窗左右和下面就会有一块小的间距，并没有占满，有什么设置可以取消这个间距。设计图是占满的样子

3 回复

设置：window.setWindowLayoutFullScreen(true)

或者建议使用bindsheet实现半模态：

@Entry
@Component
struct bindsheet {
  @State isShow: boolean = false;

  @Builder
  myBuilder() {

    Column() {

      Text('Hello Word')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin(10)

    }

  }

  build() {

    Row() {

      Column() {

        Button("打开bindsheet弹窗")
          .onClick(() => {
            this.isShow = true
          })
          .fontSize(20)
          .margin(10)

      }
      .width("100%")
      .height("100%")
      .bindSheet($$this.isShow, this.myBuilder(), {
        detents: [SheetSize.MEDIUM, SheetSize.LARGE, 200],
        backgroundColor: Color.White,
        blurStyle: BlurStyle.Thick,
        showClose: false,
        dragBar: true, //默认显示控制条
      })

    }
    .width("100%")
    .backgroundColor("#ff578ddd")
  }
}

目前不能弹出两个半模态。

更多关于HarmonyOS鸿蒙Next中关于CustomDialog自定义弹窗的样式问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，CustomDialog自定义弹窗的样式主要通过XML布局文件和代码控制实现。开发者可以在res/layout目录下创建自定义的XML布局文件，定义弹窗的UI元素和样式。通过CustomDialog类，开发者可以在代码中加载该布局文件，并设置弹窗的宽高、位置、背景等属性。

例如，可以在XML中定义如下布局：

<LinearLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:orientation="vertical"
    ohos:padding="24vp">
    <Text
        ohos:id="$+id:title"
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:text="标题"
        ohos:textSize="24fp"
        ohos:textColor="#000000"/>
    <Text
        ohos:id="$+id:message"
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:text="消息内容"
        ohos:textSize="18fp"
        ohos:textColor="#666666"/>
    <Button
        ohos:id="$+id:confirm_button"
        ohos:width="match_parent"
        ohos:height="48vp"
        ohos:text="确定"
        ohos:backgroundElement="$graphic:button_background"
        ohos:textColor="#FFFFFF"/>
</LinearLayout>

在代码中，可以通过以下方式加载并显示该弹窗：

import { CustomDialog } from '@ohos.arkui.UIContext';

let customDialog = new CustomDialog(context);
customDialog.setCustomView($r('app.layout.custom_dialog_layout'));
customDialog.setWidth('80%');
customDialog.setHeight('wrap_content');
customDialog.show();

通过这种方式，开发者可以灵活地控制CustomDialog的样式和布局。

在HarmonyOS鸿蒙Next中，CustomDialog的自定义弹窗样式可以通过以下步骤实现：

  1. 布局文件：创建XML布局文件定义弹窗的UI结构，如按钮、文本等。
  2. 自定义Dialog类：继承CustomDialog并重写onCreate()方法，加载布局文件并设置样式。
  3. 样式调整：在onCreate()中使用setStyle()设置弹窗的宽高、背景、动画等属性。
  4. 显示弹窗：在Activity或Fragment中实例化自定义Dialog并调用show()方法显示。

示例代码：

public class MyDialog extends CustomDialog {
    public MyDialog(Context context) {
        super(context);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dialog_custom);
        setStyle(STYLE_NORMAL, R.style.MyDialogStyle);
    }
}

通过以上步骤，可以灵活定制弹窗的样式和功能。

回到顶部