【HarmonyOS开发】ArkUI中的自定义弹窗

弹窗是一种模态窗口,通常用来展示用户当前需要的或用户必须关注的信息或操作。在弹出框消失之前,用户无法操作其他界面内容。ArkUI 为我们提供了丰富的弹窗功能,弹窗按照功能可以分为以下两类:

  • 确认类:例如警告弹窗 AlertDialog。

  • 选择类:包括文本选择弹窗 TextPickerDialog 、日期滑动选择弹窗 DatePickerDialog、时间滑动选择弹窗 TimePickerDialog 等。

您可以根据业务场景,选择不同类型的弹窗。

参考:OpenHarmony 弹窗文档V4.0

 今天我们主要了解一下自定义弹窗的使用

自定义弹窗

自定义弹窗的使用更加灵活,适用于更多的业务场景,在自定义弹窗中您可以自定义弹窗内容,构建更加丰富的弹窗界面。自定义弹窗的界面可以通过装饰器@CustomDialog 定义的组件来实现,然后结合 CustomDialogController 来控制自定义弹窗的显示和隐藏。

1、定义自定义弹窗

@CustomDialog
struct CustomDialogExample {// 双向绑定传值@Prop title: string@Link inputValue: string// 弹窗控制器,控制打开/关闭,必须传入,且名称必须为:controllercontroller: CustomDialogController// 弹窗中的按钮事件cancel: () => voidconfirm: () => void// 弹窗中的内容描述build() {Column() {Text(this.title || "是否修改文本框内容?").fontSize(16).margin(24).textAlign(TextAlign.Start).width("100%")TextInput({ placeholder: '文本输入框', text: this.inputValue}).height(60).width('90%').onChange((value: string) => {this.textValue = value})Flex({ justifyContent: FlexAlign.SpaceAround }) {Button('取消').onClick(() => {this.controller.close()this.cancel()}).backgroundColor(0xffffff).fontColor(Color.Black)Button('确定').onClick(() => {this.controller.close()this.confirm()}).backgroundColor(0xffffff).fontColor(Color.Red)}.margin({ bottom: 10 })}}
}

2、使用自定义弹窗

@Entry
@Component
struct Index {@State title: string = '标题'@State inputValue: string = '文本框父子组件数据双绑'// 定义自定义弹窗的Controller,传入参数和回调函数dialogController: CustomDialogController = new CustomDialogController({builder: CustomDialogExample({cancel: this.onCancel,confirm: this.onAccept,textValue: $textValue,inputValue: $inputValue}),cancel: this.existApp,autoCancel: true,alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -20 },gridCount: 4,customStyle: false})aboutToDisappear() {this.dialogController = undefined // 将dialogController置空}onCancel() {console.info('点击取消按钮', this.inputValue)}onAccept() {console.info('点击确认按钮', this.inputValue)}build() {Column() {Button('打开自定义弹窗').width('60%').margin({top:320}).zIndex(999).onClick(()=>{if (this.dialogController != undefined) {this.dialogController.open()}})}.height('100%').width('100%')
}

3、一个完整的示例(常用网站选择)

export interface HobbyBean {label: string;isChecked: boolean;
}export type DataItemType = { value: string }@Extend(Button) function dialogButtonStyle() {.fontSize(16).fontColor("#007DFF").layoutWeight(1).backgroundColor(Color.White).width(500).height(40)
}@CustomDialog
struct CustomDialogWidget {@State hobbyBeans: HobbyBean[] = [];@Prop title:string;@Prop hobbyResult: Array<DataItemType>;@Link hobbies: string;private controller: CustomDialogController;setHobbiesValue(hobbyBeans: HobbyBean[]) {let hobbiesText: string = '';hobbiesText = hobbyBeans.filter((isCheckItem: HobbyBean) =>isCheckItem?.isChecked).map((checkedItem: HobbyBean) => {return checkedItem.label;}).join(',');this.hobbies = hobbiesText;}aboutToAppear() {// let context: Context = getContext(this);// let manager = context.resourceManager;// manager.getStringArrayValue($r('app.strarray.hobbies_data'), (error, hobbyResult) => {// });this.hobbyResult.forEach(item => {const hobbyBean = {label: item.value,isChecked: this.hobbies.includes(item.value)}this.hobbyBeans.push(hobbyBean);});}build() {Column() {Text(this.title || "兴趣爱好").fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Start).margin({ left: 24, bottom: 12 })List() {ForEach(this.hobbyBeans, (itemHobby: HobbyBean) => {ListItem() {Row() {Text(itemHobby.label).fontSize(16).fontColor("#182431").layoutWeight(1).textAlign(TextAlign.Start).fontWeight(500).margin({ left: 24 })Toggle({ type: ToggleType.Checkbox, isOn: itemHobby.isChecked }).margin({right: 24}).onChange((isCheck) => {itemHobby.isChecked = isCheck;})}}.height(36)}, itemHobby => itemHobby.label)}.margin({top: 6,bottom: 8}).divider({strokeWidth: 0.5,color: "#0D182431"}).listDirection(Axis.Vertical).edgeEffect(EdgeEffect.None).width("100%")// .height(248)Row({space: 20}) {Button("关闭").dialogButtonStyle().onClick(() => {this.controller.close();})Blank().backgroundColor("#F2F2F2").width(1).opacity(1).height(25)Button("保存").dialogButtonStyle().onClick(() => {this.setHobbiesValue(this.hobbyBeans);this.controller.close();})}}.width("93.3%").padding({top: 14,bottom: 16}).borderRadius(32).backgroundColor(Color.White)}
}@Entry
@Component
struct HomePage {@State hobbies: string = '';@State hobbyResult: Array<DataItemType> = [{"value": "FaceBook"},{"value": "Google"},{"value": "Instagram"},{"value": "Twitter"},{"value": "Linkedin"}]private title: string = '常用网站'customDialogController: CustomDialogController = new CustomDialogController({builder: CustomDialogWidget({hobbies: $hobbies,hobbyResult: this.hobbyResult,title: this.title}),alignment: DialogAlignment.Bottom,customStyle: true,offset: { dx: 0,dy: -20 }});build() {Column() {Button('打开自定义弹窗').width('60%').margin({top: 50}).zIndex(999).onClick(()=>{if (this.customDialogController != undefined) {this.customDialogController.open()}})Text(this.hobbies).fontSize(16).padding(24)}.width('100%')}
}

参考:https://gitee.com/harmonyos/codelabs/tree/master/MultipleDialog

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/233352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# 调用腾讯混元大模型

写在前面 今天用C#调用了一下腾讯混元大模型&#xff0c;调用代码贴一下&#xff0c;具体的效果等深入使用后再来评价。 GitHub - TencentCloud/tencentcloud-sdk-dotnet: Tencent Cloud API 3.0 SDK for .NET 腾讯混元大模型简介_腾讯混元大模型购买指南_腾讯混元大模型操作…

代码随想录27期|Python|Day18|二叉树|路径总和iii|找树左下角的值|从中序与后序遍历序列构造二叉树

第一次刷的时候题解都不是精简版 513. 找树左下角的值 - 力扣&#xff08;LeetCode&#xff09; 注意这道题不是寻找最左侧的左节点&#xff0c;而是寻找最底层位于左端的节点&#xff08;可能是左节点&#xff0c;有可能是右节点&#xff09;。 层序遍历 层序遍历比较简单&…

【代码随想录】刷题笔记Day36

前言 打球运动量不饱和&#xff0c;不太爽&#xff0c;来刷题爽爽 134. 加油站 - 力扣&#xff08;LeetCode&#xff09; 难点在于环形遍历&#xff0c;实际上和最大子序和的思路很像&#xff0c;小于0就从下个位置开始局部最优&#xff1a;当前累加rest[i]的和curSum一旦小…

Oracle的学习心得和知识总结(三十)| OLTP 应用程序的合成工作负载生成器Lauca论文翻译及学习

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《Oracle Database SQL Language Reference》 2、参考书籍&#xff1a;《PostgreSQL中文手册》 3、EDB Postgres Advanced Server User Gui…

Nvidia 驱动安装不完整记录

Nvidia 驱动安装不完整记录 安装 epel&#xff0c; sudo dnf install -y https://dl.fedoraproject.org/pub/epel/epel-releaselatest-8.noarch.rpm安装 gcc-toolset-11-gcc&#xff0c; dnf install gcc-toolset-11-gcc修改 gcc&#xff0c;make&#xff0c;as 为 gcc-tools…

c++ wake_ptr智能指针

转载自c语言中文网 在 C98/03 的基础上&#xff0c;C11 标准新引入了 shared_ptr、unique_ptr 以及 weak_ptr 这 3 个智能指针。其中&#xff0c;shared_ptr 和 unique_ptr 已经在前面章节做了详细地介绍&#xff0c;本节重点讲解 weak_ptr 智能指针的特性和用法。 注意学习 w…

springMVC-数据格式化

1、基本介绍 在一个springmvc项目中&#xff0c;当表单提交数据时&#xff0c;如何对表单提交的数据进行格式的转换呢&#xff1f; 只要是数据进行网络传输都是以字符串的形式&#xff0c;进入内存后才有数据类型。 springmvc在上下文环境内置了一些转换器&#xff0c…

【MyBatis-Plus】常用的内置接口

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于MyBatis-Plus的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 1.Service接口 1.1.Save 1.2.Sa…

leetcode每日一题打卡

leetcode每日一题 746.使用最小花费爬楼梯162.寻找峰值1901.寻找峰值Ⅱ 从2023年12月17日开始打卡~持续更新 746.使用最小花费爬楼梯 2023/12/17 代码 解法一 class Solution {public int minCostClimbingStairs(int[] cost) {int n cost.length;int[] dp new int[n1];dp[…

C51--小车——PWM调速

如何进行小车PWM调速&#xff1a; 原理&#xff1a; 全速前进&#xff1a;LeftCon1A 0&#xff1b;LeftCon1B 1&#xff1b; 完全停止&#xff1a;LeftCon1A 0&#xff1b;LeftCon1B 0&#xff1b;单位时间内&#xff0c;例如20ms&#xff0c;有15ms是全速&#xff0c;5m…

【牛客网】编程题:找到无序数组中最小的k个数(146)

[编程题]&#xff1a;找到无序数组中最小的k个数 热度指数&#xff1a;2394时间限制&#xff1a;C/C 2秒&#xff0c;其他语言4秒空间限制&#xff1a;C/C 256M&#xff0c;其他语言512M 算法知识视频讲解 给定一个整型数组arr&#xff0c;找到其中最小的k个数。 输入描述: 输…

Linux常用基本命令操作

目录 一、认识shell 1、什么是shell 2、命令的本质 3、内部命令和外部命令 4、harsh缓存 5、命令执行的过程 6、如果打了一个命令&#xff0c;提示该命令不存在 7、命令提示符 8、Linux系统文件夹 二、Linux常用命令 1、通用Linux命令行格式 2、编辑Linux命令行的辅…

Spring Boot + MinIO 实现文件切片极速上传技术

文章目录 1. 引言2. 文件切片上传简介3. 技术选型3.1 Spring Boot3.2 MinIO 4. 搭建Spring Boot项目5. 集成MinIO5.1 配置MinIO连接信息5.2 MinIO配置类 6. 文件切片上传实现6.1 控制器层6.2 服务层6.3 文件切片上传逻辑 7. 文件合并逻辑8. 页面展示9. 性能优化与拓展9.1 性能优…

qt源码链接C++automic

qaction.cpp source code [qtbase/src/widgets/kernel/qaction.cpp] - Codebrowser C原子变量atomic详解 - 知乎 (zhihu.com)

[C++ 从入门到精通] 15.友元函数、友元类、友元成员函数

&#x1f4e2;博客主页&#xff1a;https://loewen.blog.csdn.net&#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;本文由 丶布布原创&#xff0c;首发于 CSDN&#xff0c;转载注明出处&#x1f649;&#x1f4e2;现…

统计分析绘图软件 GraphPad Prism 10 mac功能介绍

GraphPad Prism mac是一款专业的统计和绘图软件&#xff0c;主要用于生物医学研究、实验设计和数据分析。 GraphPad Prism mac功能和特点 数据导入和整理&#xff1a;GraphPad Prism 可以导入各种数据格式&#xff0c;并提供直观的界面用于整理、编辑和管理数据。用户可以轻松地…

qsort函数应用

1.引入 我们前面学习了一些常见的排序方法&#xff0c;比如冒泡排序等&#xff0c;但它仅局限于整型的排序&#xff0c;今天我们要介绍一个牛气哄哄的库函数qsort函数&#xff0c;这个函数可就厉害了&#xff0c;能排序任意类型数据&#xff0c;掌握后可谓受益终身&#xff0c;…

PyQt中的冒号(:)

在这段代码中&#xff0c;冒号&#xff08;:&#xff09;的使用是类型注解的一种形式&#xff0c;用于显式地指定变量的类型。在Python 3.5及以后的版本中&#xff0c;引入了类型注解的概念&#xff0c;可以在变量名后面使用冒号来注解变量的类型。 例如&#xff0c;在以下代码…

Python 安装第三方模块

要安装三方模块&#xff0c;需要知道模块的名字和pip。 pip来源&#xff1a; Mac、Linux无需安装自带。 Window:勾选了pip和add python.exe to Path 目录 安装Pillow 查看pip版本 命令行安装 查看本地安装库 升级pip 使用Pillow 引入三方库 打开图片 查看图片的信息 …

Metashape 自定义比例尺 / 无POS时如何制作DEM

前言操作步骤 前言 Metashape 自定义比例尺 和 无POS时如何制作DEM&#xff0c;此二者的操作步骤本质上是一样的。 当我们输入的照片没有POS&#xff0c;且没有做像控点的时候&#xff0c;比如我们仅仅拍摄了一个比较小的物体&#xff0c;可能是一瓶饮料或者一个椅子。 那么此…