开源一夏｜ArkUI如何自定义弹窗（eTS）

开源一夏｜ArkUI如何自定义弹窗（eTS）

自定义弹窗其实也是比较简单的，通过CustomDialogController类就可以显示自定义弹窗。

接下来我们通过代码来看一下

大家也都用过@Entry，@Component等弹窗的话，只要用@CustomDialog就可以

先来预览一下我实现的效果：

/* * Copyright (c) 2021 JianGuo Device Co., Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. *///通过CustomDialogController类显示自定义弹窗。@CustomDialogstruct CustomDialogExample { controller: CustomDialogController cancel: () => void confirm: () => void build() { Flex({ justifyContent: FlexAlign.Center ,alignItems:ItemAlign.Center,alignContent:FlexAlign.Center}) { Button('取消').fontSize(36) .onClick(() => { //方式二：关闭弹窗 this.controller.close() this.cancel() }).backgroundColor(0xffffff).fontColor(Color.Black) Button('确定').fontSize(36) .onClick(() => {// this.controller.close() this.confirm() }).backgroundColor(0xffffff).fontColor(Color.Red) }.margin({ bottom: 10 }).width("100%").height(200) }}export default CustomDialogExample

上面就是一个简单的自定义弹窗

接下来看一下它的有关属性

​​CustomDialogController​​​ 定义了 ​​open()​​​ 和 ​​close()​​ 方法，它们说明如下：

open：打开对话框，如果对话框已经打开，则再次打开无效。close：关闭对话框，如果对话框已经关闭，则再次关闭无效。value：创建控制器需要的配置参数，

CustomDialogControllerOptions

说明如下：

源码

declare interface CustomDialogControllerOptions{ /** * Custom builder function. * @since builder: any; /** * Defines the cancel function. * @since cancel?: () => void; /** * Defines if use auto cancel when click on the outside of the dialog. * @since autoCancel?: boolean; /** * Defines the dialog alignment of the screen. * @since alignment?: DialogAlignment; /** * Defines the dialog offset. * @since offset?: Offset; /** * Defines if use costom style. * @since customStyle?: boolean; /** * Grid count of dialog. * @since

DialogAlignment的位置

参考文档

​​自定义弹窗​​

​​语法糖​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。