商业网站页面,万网域名申请网站,永久免费的电销外呼系统,重庆新闻app前言 鸿蒙开发中#xff0c;一直有个问题困扰着自己#xff0c;想必也困扰着大多数开发者#xff0c;那就是#xff0c;系统提供的dialog自定义弹窗#xff0c;无法实现在任意位置进行弹出#xff0c;仅限于CustomDialog和Component struct的成员变量#xff0c;这就导致…前言 鸿蒙开发中一直有个问题困扰着自己想必也困扰着大多数开发者那就是系统提供的dialog自定义弹窗无法实现在任意位置进行弹出仅限于CustomDialog和Component struct的成员变量这就导致了我想在封装的工具类或者ViewModel或者其他地方弹出只能通过事件或者回调触发UI层才能执行很是不方便除此之外虽然说UI我们可以共用但CustomDialogController每个使用的地方都需要定义也是很冗余。当然了本身dialog应该在UI层弹出鸿蒙这样设计是不存在问题的但为了兼顾到易用性任意位置弹出想必有很多人还是非常需要的。 系统自定义弹窗 dialogController new CustomDialogController({builder: this.customDialog,autoCancel: true,})/** Author:AbnerMing* Describe:自定义Dialog*/BuildercustomDialog() {Text(我是自定义Dialog).width(100%).height(100)}this.dialogController.open()//弹出this.dialogController.close()//关闭 如何摆脱UI的限制在任意位置弹出目前有两种方案可以实现第一种是使用window创建窗口的形式这种形式有初始化的需要无论是依赖window.WindowStage还是普通的页面都是前置的依赖项当然了还有一点就是弹出方式稍微生硬不过可以满足正常的需求第二种是通过promptAction中的openCustomDialog方式不过这种方式需要在Api11及以上的版本对于目前的使用需求如果想实现任意位置弹出还是建议使用openCustomDialog方式。
openCustomDialog简单使用 通过openCustomDialog方式弹出弹窗通过closeCustomDialog方式关闭弹窗。 private customDialogComponentId: number 0build() {Column() {Button(简单Demo).onClick(() {promptAction.openCustomDialog({builder: () {this.customDialogComponent()}}).then((dialogId: number) {this.customDialogComponentId dialogId})})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}BuildercustomDialogComponent() {Column() {Text(弹窗).fontSize(30)Row({ space: 50 }) {Button(确认).onClick(() {promptAction.closeCustomDialog(this.customDialogComponentId)})Button(取消).onClick(() {promptAction.closeCustomDialog(this.customDialogComponentId)})}}.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)} 目前基于openCustomDialog方式自己也封装了一层已支持市场上常见的大部分功能比如信息弹窗确认取消形式弹窗底部弹窗时间城市等等样式当然了也支持自定义组件形式几乎涵盖了所有的场景有需要的朋友可以直接进行使用。 中心仓库地址
https://ohpm.openharmony.cn/#/cn/detail/abner%2Fdialog 目前针对各个功能也进行罗列一下方便大家可以针对性的使用。 快速使用 方式一在Terminal窗口中执行如下命令安装三方包DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。 建议在使用的模块路径下进行执行命令。 ohpm install abner/dialog 方式二在工程的oh-package.json5中设置三方包依赖配置示例如下 dependencies: { abner/dialog: ^1.1.1} 初始化 初始化可以更改统一的配置比如宽高比如大小、比如背景等等当然是在需要的情况下如果默认的样式满足需求全局初始化可以省略您也可以在单独调用的时候进行修改样式。 initDialog(attribute) 属性介绍 属性 类型 概述 attribute FusionAttribute 可选参数dialog属性全局配置用于修改弹窗样式可根据UI在这里进行配置
FusionAttribute属性 FusionAttribute是全局的dialog属性配置如果默认提供的dialog样式和您的项目中样式不一样可通过此参数进行设置全局配置一次 页面中的所有使用地方均会生效方便您后续使用。 属性 类型 概述 infoOrConfirmAttribute ContentAttribute 可选参数信息或者确认形式弹窗属性配置 bottomListAttribute BottomListAttribute 可选参数底部列表弹窗属性配置 bottomGridAttribute BottomGridAttribute 可选参数底部网格列表弹窗属性配置 bottomListScrollAttribute BottomListScrollAttribute 可选参数底部的滑动列表属性 toastAttribute ToastAttribute 可选参数Toast属性配置 loadingAttribute LoadingAttribute 可选参数loading提示 isUseMainWindow boolean 是使用主window还是子window,默认是子
ContentAttribute属性 ContentAttribute是信息或者确认形式弹窗属性配置。 属性 类型 概述 title string / Resource 可选参数标题,全局初始化中无需配置 message string / Resource 可选参数描述信息,全局初始化中无需配置 cancelText string / Resource 可选参数取消文字 confirmText string / Resource 可选参数确认文字 clickCancelHide boolean 可选参数默认点击取消隐藏 isHideTitle boolean 可选参数是否隐藏标题默认不隐藏 clickCancel 回调 可选参数点击取消回调事件 clickConfirm 回调 可选参数点击确认回调事件 bottomMenuHeight Length 可选参数底部按钮高度 backgroundColor ResourceColor 可选参数背景颜色 radius BorderRadiuses / Length 可选参数角度 titleAttribute TitleAttribute 可选参数标题样式属性 messageAttribute MessageAttribute 可选参数描述样式属性 dividerHAttribute DividerHAttribute 可选参数横向分割线样式属性 dividerVAttribute DividerVAttribute 可选参数垂直分割线样式属性 confirmAttribute ConfirmAttribute 可选参数确认样式属性 cancelAttribute CancelAttribute 可选参数取消样式属性 dialogAttribute DialogAttribute 可选参数弹窗总体属性
BottomListAttribute属性 BottomListAttribute是底部列表弹窗属性配置。 属性 类型 概述 backgroundColor ResourceColor 背景颜色 items string[] 列表条目 itemClick (position: number) 条目点击回调 cancelClick () 取消点击回调 isHideCancel boolean 是否隐藏取消按钮 isTransparent boolean 是否透明展示 itemRadius Length / BorderRadiuses 透明后条目整体的角度 cancelRadius Length / BorderRadiuses 透明后取消按钮角度 topLeftRadius Length dialog左上角角度 topRightRadius Length dialog右上角角度 itemAttr BottomListItem 条目属性 itemDivider ListItemDivider 分割线属性 cancelAttr BottomListCancel 底部取消属性 dialogAttribute DialogAttribute 弹窗总体属性
BottomGridAttribute属性 属性 类型 概述 items BottomGridModel[] 条目数据用于网格 itemLineArray ArrayBottomGridModel[] 条目数据用户每行展示几个每行几个就几个数据 columnSize number 列数默认是2列 barTitleAttr BarTitleGridAttribute 网格上边的titlebar属性 barHeight number 网格上边的titleBar的高度 barCancelTextAttr BarCancelTextGridAttribute titleBar中的取消属性 barCancelImageAttr BarCancelImageGridAttribute titleBar中的取消图片属性和文字二选一 isBarCancelImage boolean titleBar中的取消是否图片方式默认是false itemMarginTop number item每一行距离顶部 backgroundColor ResourceColor 背景颜色 topLeftRadius Length dialog左上角角度 topRightRadius Length dialog右上角角度 isHideBar boolean 是否隐藏titlebar dialogAttribute DialogAttribute 全局dialog属性 isItemAttrGlobal boolean 条目属性是否使用全局默认是 itemAttr ItemGridAttribute 条目属性 itemClick (position: number) 条目点击回调 cancelClick () 取消点击回调 dividerColor ResourceColor 分割线颜色 dividerHeight number 分割线高度 isLastDividerShow boolean 最后一个是否显示默认展示 dividerMarginTop Margin / Length 分割线距离上边高度 isShowBottomCancel boolean 是否展示底部取消按钮默认不展示 bottomCancelTextAttr CancelTextGridAttribute 底部的取消按钮属性
ToastAttribute属性 属性 类型 概述 msg string / Resource 提示信息初始化时无需 duration number 弹出时间默认2000 backgroundColor ResourceColor 背景颜色 fontColor ResourceColor 字体颜色 默认ffffff fontWeight number / FontWeight / string 字体粗细设置默认400 fontSize number / string / Resource 字体大小默认16 fontFamily string / Resource 字体样式 borderRadius Length / BorderRadiuses 角度 padding Padding / Length 内边距 flexAlign FlexAlign 位置方向 leftSrc PixelMap / ResourceStr/ DrawableDescriptor 左边图片 rightSrc PixelMap / ResourceStr/ DrawableDescriptor 右边图片 topSrc PixelMap / ResourceStr/ DrawableDescriptor 上边图片 bottomSrc PixelMap / ResourceStr/ DrawableDescriptor 下边图片 imageMargin Length 图片距离文字距离 imageWidth Length 图片宽度 imageHeight Length 图片高度 imageAlt string /Resource 加载时显示的占位图
DialogAttribute属性 每个弹窗中都有一个dialogAttribute属性用来控制整体的弹窗样式。 属性 类型 概述 windowAlignment DialogAlignment 弹窗位置 dialogDismiss (action?:DismissDialogAction) void dialog隐藏状态回调 dialogAppear () void dialog显示回调 windowBottomAnimation boolean 是否开启底部动画 isPrivacyMode boolean 是否防止截屏默认不是 isSystemAnimation boolean 是否系统动画默认既是 代码案例 1、信息弹窗 showDialogInfo({title: 我是标题,message: 我是一段描述,clickConfirm: () {//确认console.log(确认)// hide() //隐藏}
})
2、确认/取消弹窗 showDialogConfirm({title: 我是一个标题,message: 我是一段描述,clickCancel: () {//取消console.log(取消)// hide() //隐藏},clickConfirm: () {//确认console.log(确认)// hide() //隐藏}
})
3、底部列表
showDialogBottomList({items: [我是条目一, 我是条目二],itemClick: (position: number) {console.log(: position)}
})
4、确认提示信息弹窗
showDialogConfirm({title: 我是一个标题,message: 我是一段描述,isShowInformation: true, //展示信息informationAttribute: {checkboxSelect: true, //是否默认选中iconAttribute: {srcSelect: $r(app.media.startIcon), //选中srcUnselected: $r(app.media.loading001), //未选中},onChange: (isChange) {//点击改变了状态console.log( isChange)}},clickCancel: () {//取消//hide()console.log(取消)},clickConfirm: () {//确认console.log(确认)}
})
5、底部列表
showDialogBottomList({items: [我是条目一, 我是条目二],itemClick: (position: number) {console.log(: position)}
})
6、底部列表透明
showDialogBottomList({items: [我是条目一, 我是条目二],itemClick: (position: number) {console.log(: position)},isTransparent: true,dialogAttribute: {dialogMarginLeft: 20,dialogMarginRight: 20}
})
7、底部列表多样式
showDialogBottomList({itemModels: [new BottomListModel(条目一, { fontColor: Color.Red }), new BottomListModel(条目二)],itemClick: (position: number) {hide()}
})
8、底部网格列表
showDialogBottomGrid({columnSize: 4,items: [new BottomGridModel(微信, $r(app.media.app_icon)),new BottomGridModel(朋友圈, $r(app.media.app_icon)),new BottomGridModel(QQ, $r(app.media.app_icon)),new BottomGridModel(QQ空间, $r(app.media.app_icon)),new BottomGridModel(微博, $r(app.media.app_icon)),new BottomGridModel(微博, $r(app.media.app_icon)),new BottomGridModel(微博, $r(app.media.app_icon)),new BottomGridModel(微博, $r(app.media.app_icon))],itemClick: (position) {console.log(: position)}
})
9、底部网格按行区分
showDialogBottomGrid({columnSize: 4,isShowBottomCancel: true,isHideBar: true,itemLineArray: [[new BottomGridModel(测试, $r(app.media.app_icon)),new BottomGridModel(测试, $r(app.media.app_icon))],[new BottomGridModel(测试, $r(app.media.app_icon)),new BottomGridModel(测试, $r(app.media.app_icon)),new BottomGridModel(测试, $r(app.media.app_icon))]],itemClick: (position) {console.log( position)}
})
10、自定义组件弹窗
首先要自定义一个全局组件,可传入自定义的组件或者直接写布局
/*
* Author:AbnerMing
* Describe:自定义弹窗,布局自己定义
*/
Builderfunction BuilderDialog() {Column() {Text(我是一个自定义弹窗).margin({ top: 30 })Row() {Button(取消).onClick(() {//隐藏dialoghide()})Button(确定).margin({ left: 30 })}.margin({ top: 20 }).margin({ top: 30 })}.backgroundColor(Color.White).width(60%)}
代码调用
showDialog(wrapBuilder(BuilderDialog))
11、自定义组件弹窗带参数
首先要自定义一个全局组件,可传入自定义的组件或者直接写布局
class DialogParams {title?: string
}Builderfunction BuilderDialogParams(params: DialogParams) {Column() {Text(params.title).margin({ top: 30 })Row() {Button(取消).onClick(() {//隐藏dialoghide()})Button(确定).margin({ left: 30 })}.margin({ top: 20 }).margin({ top: 30 })}.backgroundColor(Color.White).width(60%)}
代码调用
let params new DialogParams()
params.title 我是传递的参数
showDialogParams(wrapBuilder(BuilderDialogParams), params)
12、toast提示
toast(我是一个普通的toast)
13、toast改变背景
toast(我是一个改变背景的Toast, { backgroundColor: Color.Red })
14、toast改变位置
toast(我是一个改变位置的Toast, { alignment: DialogAlignment.Center })
15、toast图片设置
toast(Toast设置Icon, { leftSrc: $r(app.media.app_icon) })
16、底部单列表
showDialogBottomListScroll({items: [男, 女],titleBarAttribute: {titleText: 选择性别},confirmClick: (value, index) {console.log(value index)}
})
17、底部双列表不联动
showDialogBottomListScroll({selected: [1, 2],items: [[第一列1, 第一列2], [第二列1, 第二列2, 第二列3]],titleBarAttribute: {titleText: 底部双列表不联动},confirmClick: (value, index) {console.log(value index)}
})
18、底部双列表联动
showDialogBottomListScroll({items: this.doubleList,titleBarAttribute: {titleText: 底部双列表联动},confirmClick: (value, index) {console.log(value index)}
})
19、底部三列表联动
showDialogBottomListScroll({items: this.thirdList,titleBarAttribute: {titleText: 底部三列表联动,},confirmClick: (value, index) {console.log(value index)}
})
20、年月日时分秒时间弹窗
showDialogTime({titleBarAttribute: {titleText: 年月日时分秒-弹窗,},timeAttribute: {timeType: TimeDialogType.YMDHMS,},timeConfirmClick: (date) {//时间回调console.log(时间结果 date)},confirmClick: (value, index) {//内容和索引回调console.log(内容结果 value 索引结果 index)}
})
21、年月日时分弹窗
showDialogTime({titleBarAttribute: {titleText: 年月日时分-弹窗,},timeAttribute: {timeType: TimeDialogType.YMDHM},timeConfirmClick: (date) {//时间回调console.log(时间结果 date)},confirmClick: (value, index) {//内容和索引回调console.log(内容结果 value 索引结果 index)}
})
22、年月日弹窗
showDialogTime({titleBarAttribute: {titleText: 年月日-弹窗,},timeAttribute: {startTime: 2022-6-12,endTime: 2025-8-20,},timeConfirmClick: (date) {//时间回调},confirmClick: (value, index) {//内容和索引回调}
})
23、月日弹窗
showDialogTime({titleBarAttribute: {titleText: 月日-弹窗,},timeAttribute: {timeType: TimeDialogType.MD},timeConfirmClick: (date) {//时间回调},confirmClick: (value, index) {//内容和索引回调}
})
24、时分秒弹窗
showDialogTime({titleBarAttribute: {titleText: 时分秒-弹窗,},timeAttribute: {timeType: TimeDialogType.HMS,},timeConfirmClick: (date) {//时间回调},confirmClick: (value, index) {//内容和索引回调}
})
25、城市地址弹窗
showDialogAddress({titleBarAttribute: {titleText: 城市地址弹窗,},confirmClick: (value, index) {}
})
26、PopupWindow弹出
首先要定义弹出的组件自定义即可支持自定义组件形式传入即可
/*** AUTHOR:AbnerMing* INTRODUCE:popup 弹出框,可以自定义任意组件* */
Builderfunction BuilderWindowView() {Text(我是任意的组件).backgroundColor(Color.Pink)}
任意位置
showPopupWindow({view: wrapBuilder(BuilderWindowView),x: 60,y: 300
})
上边
showPopupWindow({id: popupTop,//要弹出的组件id,也就是你要在哪一个组件进行弹出view: wrapBuilder(BuilderWindowView)
})
下边
showPopupWindow({id: popupBottom,//要弹出的组件id,也就是你要在哪一个组件进行弹出view: wrapBuilder(BuilderWindowView),direction: PopupDirection.BOTTOM
})
左边
showPopupWindow({id: popupLeft,view: wrapBuilder(BuilderWindowView),direction: PopupDirection.LEFT
})
右边
showPopupWindow({id: popupRight,view: wrapBuilder(BuilderWindowView),direction: PopupDirection.RIGHT
})
左上
showPopupWindow({id: popupTopLeft,view: wrapBuilder(BuilderWindowView),direction: PopupDirection.TOP_LEFT
})
右上
showPopupWindow({id: popupTopRight,view: wrapBuilder(BuilderWindowView),direction: PopupDirection.TOP_RIGHT
})
左下
showPopupWindow({id: popupBottomLeft,view: wrapBuilder(BuilderWindowView),direction: PopupDirection.BOTTOM_LEFT
})
右下
showPopupWindow({id: popupBottomRight,view: wrapBuilder(BuilderWindowView),direction: PopupDirection.BOTTOM_RIGHT
})
携带参数
class WindowParams {title?: string
}Builderfunction BuilderWindowParams(params: WindowParams) {Text(params.title).backgroundColor(Color.Pink)}//代码调用
let params new WindowParams()
params.title 我是携带的参数
showPopupWindow({id: popupParams,params: params,viewParams: wrapBuilder(BuilderWindowParams),direction: PopupDirection.BOTTOM
}) 使用总结 每个弹窗都有一个统一的隐藏直接调用hide方法即可如果你想要底部弹窗的动画效果目前有两种方式一种是系统自带的一种是自定义的系统自带的动画是整个背景一起滑动自定义的是背景不动只弹出的组件动具体使用哪种效果主要看自己的需求另外底部的弹出动画自己也封装了一个动画组件BottomAnimationView,可以很方便的实现动画方式大家有需要也可以使用相关Demo中也有案例。 需要注意如果你的项目中有悬浮窗存在有可能会出现弹出的弹窗在悬浮窗的窗口为了解决这个问题您可以选择是弹出主窗口还是子窗口。 initDialog({isUseMainWindow:true})
