HarmonyOS Next开发学习手册——使用NDK接口构建UI(构建弹窗)

最新推荐文章于 2024-08-20 15:59:35 发布
最新推荐文章于 2024-08-20 15:59:35 发布
阅读量627 收藏 23
点赞数 9
分类专栏： 移动开发 鸿蒙开发 HarmonyOS 文章标签： harmonyos 学习 ui 深度学习 OpenHarmony 组件化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maniuT/article/details/140278521
版权
移动开发 同时被 3 个专栏收录
956 篇文章 12 订阅
订阅专栏
HarmonyOS
872 篇文章 15 订阅
订阅专栏
鸿蒙开发
504 篇文章 1 订阅
订阅专栏

通过弹窗控制器显示自定义弹窗，可以设置自定义弹窗的样式和内容。

弹窗接口集合定义在结构体里，命名为ArkUI_NativeDialogAPI_x （x表示版本），这些接口围绕弹窗控制器实现各种弹窗控制。

创建和销毁弹窗控制器

  • 创建弹窗控制器

    ArkUI_NativeDialogHandle表示指向弹窗控制器的指针，可以通过调用ArkUI_NativeDialogAPI_x 的create接口创建一个弹窗控制器，

该方法返回ArkUI_NativeDialogHandle类型的数据。

ArkUI_NativeDialogAPI_1 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_1 *>(
    OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_1"));
auto dialogController = dialogAPI->create();

  • 销毁弹窗控制器

    当不再需要弹窗操作时，需要主动调用dispose接口销毁弹窗控制器对象。

ArkUI_NativeDialogAPI_1 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_1 *>(
   OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_1"));
dialogAPI->dispose(dialogController);

设置弹窗样式

可以设置弹窗对齐方式、偏移量，弹窗背板圆角弧度、背景色、蒙层颜色以及区域等。

  1. 创建弹窗内容节点。
ArkUI_NodeHandle CreateDialogContent() {
    ArkUI_NativeNodeAPI_1 *nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
        OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1"));
    ArkUI_NodeHandle text = nodeAPI->createNode(ARKUI_NODE_TEXT);
    ArkUI_NumberValue textWidthValue[] = {{.f32 = 300}};
    ArkUI_AttributeItem textWidthItem = {.value = textWidthValue,
                                         .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)};
    nodeAPI->setAttribute(text, NODE_WIDTH, &textWidthItem);
    ArkUI_NumberValue textHeightValue[] = {{.f32 = 300}};
    ArkUI_AttributeItem textHeightItem = {.value = textHeightValue,
                                          .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)};
    nodeAPI->setAttribute(text, NODE_HEIGHT, &textHeightItem);
    ArkUI_NodeHandle span = nodeAPI->createNode(ARKUI_NODE_SPAN);
    ArkUI_AttributeItem spanItem = {.string = "这是一个弹窗"};
    nodeAPI->setAttribute(span, NODE_SPAN_CONTENT, &spanItem);
    ArkUI_NodeHandle imageSpan = nodeAPI->createNode(ARKUI_NODE_IMAGE_SPAN);
    ArkUI_AttributeItem imageSpanItem = {.string = "/pages/common/sky.jpg"};
    nodeAPI->setAttribute(imageSpan, NODE_IMAGE_SPAN_SRC, &imageSpanItem);
    ArkUI_NumberValue imageSpanWidthValue[] = {{.f32 = 300}};
    ArkUI_AttributeItem imageSpanWidthItem = {.value = imageSpanWidthValue,
                                              .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)};
    nodeAPI->setAttribute(imageSpan, NODE_WIDTH, &imageSpanWidthItem);
    ArkUI_NumberValue imageSpanHeightValue[] = {{.f32 = 200}};
    ArkUI_AttributeItem imageSpanHeightItem = {.value = imageSpanHeightValue,
                                               .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)};
    nodeAPI->setAttribute(imageSpan, NODE_HEIGHT, &imageSpanHeightItem);
    nodeAPI->addChild(text, span);
    nodeAPI->addChild(text, imageSpan);
    return text;
}
  1. 通过controller控制弹窗样式。
void ShowDialog() {
    ArkUI_NativeDialogAPI_1 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_1 *>(
        OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_1"));
    if (!dialogController) {
        dialogController = dialogAPI->create();
    }
    auto contentNode = CreateDialogContent();
    dialogAPI->setContent(dialogController, contentNode);
    dialogAPI->setContentAlignment(dialogController, static_cast<int32_t>(ARKUI_ALIGNMENT_BOTTOM), 0, 0);
    dialogAPI->setBackgroundColor(dialogController, 0xffffffff);
    dialogAPI->setCornerRadius(dialogController, 6, 6, 6, 6);
    dialogAPI->setModalMode(dialogController, false);
    dialogAPI->setAutoCancel(dialogController, true);
    dialogAPI->show(dialogController, false);
}
  1. 不需要弹窗时关闭弹窗。
void CloseDialog() {
    ArkUI_NativeDialogAPI_1 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_1 *>(
        OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_1"));
    dialogAPI->close(dialogController);
}

弹窗的交互

可创建交互页面，打开或关闭弹窗。

  1. 创建一个可交互的界面，点击Button之后可以弹窗。
constexpr int32_t BUTTON_CLICK_ID = 1;
bool isShown = false;
ArkUI_NativeDialogHandle dialogController;
ArkUI_NodeHandle buttonNode;

void MainViewMethod(OH_NativeXComponent *component) {
    ArkUI_NativeNodeAPI_1 *nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
        OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1"));
    ArkUI_NodeHandle column = nodeAPI->createNode(ARKUI_NODE_COLUMN);
    ArkUI_NumberValue widthValue[] = {{.f32 = 300}};
    ArkUI_AttributeItem widthItem = {.value = widthValue, .size = sizeof(widthValue) / sizeof(ArkUI_NumberValue)};
    nodeAPI->setAttribute(column, NODE_WIDTH, &widthItem);
    ArkUI_NumberValue heightValue[] = {{.f32 = 300}};
    ArkUI_AttributeItem heightItem = {.value = heightValue, .size = sizeof(heightValue) / sizeof(ArkUI_NumberValue)};
    nodeAPI->setAttribute(column, NODE_HEIGHT, &heightItem);
    
    buttonNode = nodeAPI->createNode(ARKUI_NODE_BUTTON);
    ArkUI_NumberValue buttonWidthValue[] = {{.f32 = 200}};
    ArkUI_AttributeItem buttonWidthItem = {.value = buttonWidthValue,
                                           .size = sizeof(buttonWidthValue) / sizeof(ArkUI_NumberValue)};
    nodeAPI->setAttribute(buttonNode, NODE_WIDTH, &buttonWidthItem);
    ArkUI_NumberValue buttonHeightValue[] = {{.f32 = 50}};
    ArkUI_AttributeItem buttonHeightItem = {.value = buttonHeightValue,
                                            .size = sizeof(buttonHeightValue) / sizeof(ArkUI_NumberValue)};
    nodeAPI->setAttribute(buttonNode, NODE_HEIGHT, &buttonHeightItem);
    ArkUI_AttributeItem labelItem = {.string = "点击弹窗"};
    nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem);
    ArkUI_NumberValue buttonTypeValue[] = {{.i32 = static_cast<int32_t>(ARKUI_BUTTON_TYPE_NORMAL)}};
    ArkUI_AttributeItem buttonTypeItem = {.value = buttonTypeValue,
                                          .size = sizeof(buttonTypeValue) / sizeof(ArkUI_NumberValue)};
    nodeAPI->setAttribute(buttonNode, NODE_BUTTON_TYPE, &buttonTypeItem);
    nodeAPI->registerNodeEvent(buttonNode, NODE_ON_CLICK, BUTTON_CLICK_ID, nullptr);
    nodeAPI->addNodeEventReceiver(buttonNode, OnButtonClicked);
    nodeAPI->addChild(column, buttonNode);
    OH_NativeXComponent_AttachNativeRootNode(component, column);
}
  1. 创建Button事件的回调函数，当Button点击时触发弹窗显示或关闭。
void OnButtonClicked(ArkUI_NodeEvent *event) {
    if (!event || !buttonNode) {
        return;
    }
    auto eventId = OH_ArkUI_NodeEvent_GetTargetId(event);
    if (eventId == BUTTON_CLICK_ID) {
        ArkUI_NativeNodeAPI_1 *nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
            OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1"));
        if (isShown) {
            isShown = false;
            ArkUI_AttributeItem labelItem = {.string = "显示弹窗"};
            nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem);
            CloseDialog();
        } else {
            isShown = true;
            ArkUI_AttributeItem labelItem = {.string = "关闭弹窗"};
            nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem);
            ShowDialog();
        }
    }
}

鸿蒙全栈开发全新学习指南

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

在这里插入图片描述

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新学习资源，请移步前往小编：gitee.com/MNxiaona/733GH

OpenHarmony_小贾
关注
专栏目录
鸿蒙HarmonyOS应用开发之使用DevEco Studio模板构建NDK工程
1
03-27 1622
在很多复杂应用工程中，C++代码工程是通过CMake等构建系统以命令行方式来编译构建的，接下来介绍如何把已有的CMake工程切换到OpenHarmony工具链中，从而使用命令行CMake构建该工程。
《Android C++高级编程——使用NDK》_源码.zip
06-26
《Android C++高级编程——使用NDK》提供了Java原生接口(JNI)的概述、Bionic API、POSIX 线程和套接字、C++支持、原生图形和声音API以及NEON/SIMD优化，在一个游戏应用案例的帮助下，你将学到很多关键技能。...
vue slider组件
07-12
vue slider组件，适合初学者。npm install安装，再根据属性进行配置
HarmonyOS Next开发学习手册——旋转屏动画增强
maniuT的博客
07-03 648
在原旋转屏动画基础上，可配置渐隐和渐现的转场效果。完整的代码示例和效果如下。需要在EntryAbility.ets文件的onWindowStageCreate方法中添加处理逻辑以获取屏幕的显示方向需要在项目的 module.json5 文件中的 abilities 列表里添加 “orientation”，指定为 “auto_rotation”
鸿蒙HarmonyOS实战：创建NDK工程、毕昇编译器
最新发布
weixin_55362248的博客
08-20 770
为顺利进行NDK开发，开发者需要先掌握必要的基本概念及基础知识。
基于动态配置签名的多人协同开发应用签名解决方案
hongxiaomeng的博客
06-04 460
HTML5 界面元素 Canvas 参考手册
太阳火神的美丽人生
07-30 3399
HTML5 界面元素 Canvas 参考手册
鸿蒙HarmonyOS应用开发之Native与ArkTS对象绑定
maniuT的博客
03-27 894
通过napi_wrap将ArkTS对象与Native的C++对象绑定，后续操作时再通过将ArkTS对象绑定的C++对象取出，并对其进行操作。
Android C++高级编程——使用NDK完整版
08-15
Android拥有广大的用户群体，市场前景也很好，所以学习Android的人很多。但是因为Android很容易上手，如果只是单纯的学一些简单的东西很明显没有竞争力。所以必须学一点深层次的东西来提升自己的核心竞争力。第1章 ...
HarmonyOS（commandline-tools-linux-2.0.0.2.zip）
11-08
HarmonyOS是一款由华为公司开发的面向全场景的分布式操作系统，旨在提供无缝的智能生活体验。在给定的压缩包"HarmonyOS（commandline-tools-linux-2.0.0.2.zip）"中，包含的是HarmonyOS的命令行工具，主要用于开发者...
如何获取对方的IP地址
热门推荐
wuli1024的博客
01-15 1万+
在互联网中，我们经常需要与其他人进行远程通信，如聊天、视频等。而要实现这些功能，我们需要知道对方的IP地址才能建立起连接。
5.21 marquee组件
qq_63202674的博客
05-21 345
跑马灯组件，用于展示一段单行滚动的文字。 支持设备 手机 平板 智慧屏 智能穿戴 支持 支持 支持 支持 子组件 不支持。 属性 除支持通用属性外，还支持如下属性： 名称 类型 默认值 必填 描述 .
slider组件
weixin_30877181的博客
05-27 664
　　slider组件，是一个强大的滑动选择器组件； 　　　　属性： 　　　　　　min：类型　　数字　　滑动选择器的（范围）最小值 　　　　　　max：类型　　数字　　滑动选择器的（范围）最大值 　　　　　　step：类型　　数字　　步长（滑一次走的距离） 取值必须大于0且必须（max-min）整除 　　　　　　disabled：类型　　布尔　　是否禁用 　　　　　　value：类型...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Slider）
m0_64420071的博客
03-12 1312
ArkTS声明式开发（基础手势：Slider）
【鸿蒙软件开发】文本显示（Text/Span）
m0_62599305的博客
10-23 3186
Text是文本组件，通常用于展示用户的视图，如显示文章的文字。具体用法可参考Text。通过textAlign属性设置文本对齐样式。Text('左对齐')Text('中间对齐')Text('右对齐')textAlign属性设置即可文本显示Text/Span。
canvas使用手册
qq_48726086的博客
08-23 222
canvas使用手册 移步这里–》
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：ListItem）
m0_64420071的博客
03-15 1566
ArkTS声明式开发（容器组件：ListItem）
[HarmonyOS]——滑块组件(Slider)
weixin_42067873的博客
08-27 1052
一、滑块基础 滑块组件（Slider），其父类是AbsSlider，AbsSlider的父类是ProgressBar，所以归根到底滑块组件其实也就是一个进度条 音量调节、读书进度、视频进度等都是滑块组件的应用。 1、基础属性 enabled：滑块能否被滑动 background_instruct_element：总进度的背景颜色 progress_color：已完成部分的颜色 thumb_element：设置滑块的颜色 vice_progress：次一级的进度，比如电影的缓冲...
Canvas基础入门手册一
hangxingzzz的博客
11-02 357
1.&lt;canvas id="mycanvas" width="800" height="600"&gt;&lt;/canvas&gt; 2.获取canvas对象；var canvas=document.getElementById('mycanvas'); 3.渲染上下文；var ctx=canvas.getContext('2d'); 4.颜色、样式和阴影     fillStyle:设置...
android c++高级编程——使用ndk完整版 pdf
06-06
《Android C高级编程——使用NDK完整版》是一本介绍如何使用NDK开发高级Android应用程序的书籍。该书主要介绍如何使用C和C++编程语言来扩展Android应用程序的功能，以及如何使用NDK开发高性能的Android应用程序。 NDK是一个令人兴奋的开发工具，它使我们可以使用高性能的编程语言编写Android应用程序，从而提高应用程序的效率和稳定性。本书详细介绍了NDK的安装、配置，以及NDK中常用的工具和库，如GCC, GDB, STL和OpenGL ES等。 本书还介绍了NDK和Java之间的交互方式，如何通过JNI实现从Java到C++的调用以及如何在C++代码中调用Java代码。此外，本书还涵盖了一些高级应用方面，如线程、网络通信、图形图像处理等领域。 总的来说，《Android C高级编程——使用NDK完整版》是一本实用性强、内容详实的书籍，对于那些想要深入了解Android开发的人来说，是一本必备的参考书。通过阅读此书，读者可以更好地掌握C++编程语言及其在Android应用程序开发中的应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值