鸿蒙NDK UI 之文本输入框监听

文本输入框监听

〇、前言

文本输入框,是APP页面中与用户进行交互,获取用户数据的重要途径,监听文本输入框的改变、选择 是实现页面动态响应的重要基础,那么,在使用C++代码的开发的 NDK UI 中,文本输入框关键事件的监听要如何实现呢?下面就进行演示。

一、文本输入框关键事件

以文本输入域为例,借助监听关键事件的触发,从而完成页面的动态响应,那么,就不能错过这三种关键事件:NODE_TEXT_AREA_ON_CHANGENODE_TEXT_AREA_ON_PASTENODE_TEXT_AREA_ON_TEXT_SELECTION_CHANGE

1、NODE_TEXT_AREA_ON_CHANGE

开启了该事件监听的文本输入域,会在输入内容发生变更时触发,借助该事件的捕获,可以实现页面的实时刷新,比如将输入值关联到页面的一个文本组件上。

2、NODE_TEXT_AREA_ON_PASTE

PASTE,顾名思义,是粘贴的意思,而该事件就是在用户于文本输入域中进行粘贴操作才会触发。

3、NODE_TEXT_AREA_ON_TEXT_SELECTION_CHANGE

这一事件,触发时机就是用户在文本输入域中选中了一些文字或者移动了光标,监听该事件可以用于实现类似候选词联想的功能。

三、代码实践

文本输入框或输入域的事件处理流程,就跟按钮的点击事件的处理流程类似,都是先开启事件的监听,然后注册一个实现了事件处理逻辑的回调函数。

cpp 复制代码
#ifndef NATIVEPC_TEXTAREAEVENTEXAMPLE_H
#define NATIVEPC_TEXTAREAEVENTEXAMPLE_H
#include <sstream>
#include "ArkUIBaseNode.h"
#include "ArkUIColumnNode.h"
#include "ArkUITextAreaNode.h"
#include "ArkUITextNode.h"
namespace NativeModule { 
std::shared_ptr<ArkUIBaseNode> CreateTextAreaEventExample() {
    showUITextCallback("文本事件处理", "文本框输入改变");
    auto column = std::make_shared<ArkUIColumnNode>();
    column->SetPercentHeight(1.0);
    column->SetPercentWidth(1.0);
    column->SetItemAlign(ARKUI_HORIZONTAL_ALIGNMENT_CENTER);
    column->SetJustifyContent(ARKUI_FLEX_ALIGNMENT_START);
    auto text = std::make_shared<ArkUITextNode>();
    text->SetWidth(300);
    text->SetHeight(100);
    column->AddChild(text);
    auto selectionText = std::make_shared<ArkUITextNode>();
    selectionText->SetWidth(300);
    selectionText->SetHeight(100);
    column->AddChild(selectionText);
    auto textArea = std::make_shared<ArkUITextAreaNode>();
    textArea->SetWidth(300);
    textArea->SetBorderWidth(1);
    auto textAreaId = textArea->GetNodeId();
    auto nodeApi = NativeModuleInstance::GetInstance()->GetNativeNodeAPI();
    nodeApi->registerNodeEvent(textArea->GetHandle(), NODE_TEXT_AREA_ON_CHANGE, textAreaId, text->GetHandle());
    nodeApi->registerNodeEvent(textArea->GetHandle(), NODE_TEXT_AREA_ON_PASTE, textAreaId, text->GetHandle());
    nodeApi->registerNodeEvent(textArea->GetHandle(), NODE_TEXT_AREA_ON_TEXT_SELECTION_CHANGE, textAreaId, selectionText->GetHandle());
    auto eventReceiver = [](ArkUI_NodeEvent *event){
        ArkUI_NodeEventType eventType = OH_ArkUI_NodeEvent_GetEventType(event);
        ArkUI_AttributeItem content;
        if (eventType == NODE_TEXT_AREA_ON_CHANGE || eventType == NODE_TEXT_AREA_ON_PASTE) {
            ArkUI_StringAsyncEvent *stringEvent = OH_ArkUI_NodeEvent_GetStringAsyncEvent(event);
            content = {.string = stringEvent->pStr };
        } else if (eventType == NODE_TEXT_AREA_ON_TEXT_SELECTION_CHANGE) {
            ArkUI_NodeComponentEvent *componentEvent = OH_ArkUI_NodeEvent_GetNodeComponentEvent(event);
            std::stringstream selectContent;
            selectContent << "start: " << componentEvent->data[0].i32 << " , end: " << componentEvent->data[1].i32;
            content = {.string = selectContent.str().c_str() };
        } else {
            return;
        }
        ArkUI_NodeHandle textNode = reinterpret_cast<ArkUI_NodeHandle>(OH_ArkUI_NodeEvent_GetUserData(event));
        if (textNode) {
            auto nodeApi = NativeModuleInstance::GetInstance()->GetNativeNodeAPI();
            nodeApi->setAttribute(textNode, NODE_TEXT_CONTENT, &content);
        }
    };
    textArea->RegisterNodeEventReceiver(eventReceiver);
    column->AddChild(textArea);
    return column;
}
}

#endif

案例代码中使用的组件,大部分都是之前就封装好的,唯有文本输入域组件,是第一次登场的,而 ArkUITextAreaNode 类的定义代码也很简单:

cpp 复制代码
#ifndef NATIVEPC_ARKUITEXTAREANODE_H
#define NATIVEPC_ARKUITEXTAREANODE_H
#include "ArkUINode.h"
namespace NativeModule { 
class ArkUITextAreaNode : public ArkUINode {
public:
    ArkUITextAreaNode() : ArkUINode(NativeModuleInstance::GetInstance()->GetNativeNodeAPI()->createNode(ARKUI_NODE_TEXT_AREA)){}
};
}

#endif

之所以专门定义了一个类,是方便后面进行专有属性的扩展。

四、总结

无论是用 C++ 代码实现 NDK UI,还是之前用 ArkTS 实现的声明式UI,都可以看到匿名函数的身影,特别是在事件自定义处理代码片段中,几乎所有的回调函数都是用它来封装的。

在C++语法中,capture](parameters) { body }就是声明匿名函数的标志,类似于 ArkTS 的 () => {}

C++ 的匿名函数(Lambda 表达式)是在 C++11 标准(ISO/IEC 14882:2011)中正式引入的。这是 C++

语言发展历程中的里程碑更新,显著提升了代码的灵活性和表达力。

更多有关 C++ 匿名函数的知识点,这里就不过多展开,还请有意者自行搜索了解。

相关推荐
郝学胜_神的一滴1 分钟前
C++20 高级编程 003:吃透现代基础语法与标准容器
c++
码匠许师傅6 分钟前
【C++ 面试真题】聊聊 C++ 的关联容器
开发语言·c++·面试
独守一片天1 小时前
HarmonyOS鸿蒙新生态智能体意图框架怎么设计?
华为·harmonyos
Hhy_11071 小时前
《C++深度解构02》类和对象(上)——定义规范、内存对齐与 this 指针全解
c语言·开发语言·c++·学习·visual studio
晚风叙码1 小时前
C++哈希表实现:开放定址法和链地址法 (哈希桶)
数据结构·c++·哈希算法·散列表
呜喵王阿尔萨斯2 小时前
C/C++ 杂记-1
c++
不会代码的小猴2 小时前
2. 了解Qt
开发语言·c++·笔记·qt·算法
兵哥工控2 小时前
mfc实现在数值范围内实时改变静态文本控件字体颜色实例
c++·mfc
程序喵大人4 小时前
【C++进阶】STL算法与函数对象 - 09 函数对象保存状态并复用规则
开发语言·c++·算法·stl·函数对象
ShineWinsu10 小时前
对于C++:auto_ptr、unique_ptr、shared_ptr的模拟实现
c++·面试·笔试·智能指针·unique_ptr·shared_ptr·auto_ptr