• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 监听组件布局和绘制送显事件
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @pengzhiwen3-->
5<!--Designer: @lmleon-->
6<!--Tester: @fredyuan0912-->
7<!--Adviser: @HelloCrease-->
8
9从API version 16开始，NDK接口针对UI组件的布局或绘制送显完成，提供了注册与取消监听函数的方式。开发者可使用如下接口监听指定节点布局完成或者绘制送显完成的时机，并注册相应的回调函数。可使用[OH_ArkUI_RegisterLayoutCallbackOnNodeHandle](../reference/apis-arkui/capi-native-node-h.md#oh_arkui_registerlayoutcallbackonnodehandle)注册组件布局完成的回调方法。可使用[OH_ArkUI_RegisterDrawCallbackOnNodeHandle](../reference/apis-arkui/capi-native-node-h.md#oh_arkui_registerdrawcallbackonnodehandle)注册绘制送显完成的回调方法。可使用[OH_ArkUI_UnregisterLayoutCallbackOnNodeHandle](../reference/apis-arkui/capi-native-node-h.md#oh_arkui_unregisterlayoutcallbackonnodehandle)取消组件布局完成的回调方法注册。可使用[OH_ArkUI_UnregisterDrawCallbackOnNodeHandle](../reference/apis-arkui/capi-native-node-h.md#oh_arkui_unregisterdrawcallbackonnodehandle)取消绘制送显完成的回调方法注册。
10
11
12> **说明：**
13> [OH_ArkUI_RegisterLayoutCallbackOnNodeHandle](../reference/apis-arkui/capi-native-node-h.md#oh_arkui_registerlayoutcallbackonnodehandle)和[OH_ArkUI_RegisterDrawCallbackOnNodeHandle](../reference/apis-arkui/capi-native-node-h.md#oh_arkui_registerdrawcallbackonnodehandle)能够监听组件的布局完成或者绘制送显完成事件触发，但只能传递一个函数指针，多次调用使用最后一次的函数指针进行回调。
14
15
16以下示例基于[接入ArkTS页面](ndk-access-the-arkts-page.md)章节，补充相关事件监听。
17在ArkUITextNode对象中实现布局或者绘制送显完成事件注册逻辑。
18```c
19// ArkUITextNode.h
20// 实现文本组件的封装类。
21
22#ifndef MYAPPLICATION_ARKUITEXTNODE_H
23#define MYAPPLICATION_ARKUITEXTNODE_H
24
25#include <arkui/native_type.h>
26#include <arkui/native_node.h>
27#include <hilog/log.h>
28#include "ArkUINode.h"
29#include <string>
30
31namespace NativeModule {
32const unsigned int LOG_PRINT_DOMAIN = 0xFF00;
33// 布局完成的回调方法
34void OnLayoutCompleted(void* userData) {
35    ArkUI_NodeHandle node = (ArkUI_NodeHandle)userData;
36    OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "the text_node is layout completed");
37    ArkUI_NativeNodeAPI_1 *nativeModule = NativeModuleInstance::GetInstance()->GetNativeNodeAPI();
38    ArkUI_AttributeItem item = {nullptr, 0, "layout callback"};
39    nativeModule->setAttribute(node, NODE_TEXT_CONTENT, &item);
40}
41// 绘制送显完成的回调方法
42void OnDrawCompleted(void* userData) {
43    ArkUI_NodeHandle node = (ArkUI_NodeHandle)userData;
44    OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "the text_node is draw completed");
45    ArkUI_NativeNodeAPI_1 *nativeModule = NativeModuleInstance::GetInstance()->GetNativeNodeAPI();
46    ArkUI_AttributeItem item = {nullptr, 0, "draw callback"};
47    nativeModule->setAttribute(node, NODE_TEXT_CONTENT, &item);
48}
49
50class ArkUITextNode : public ArkUINode {
51public:
52    ArkUITextNode()
53        : ArkUINode((NativeModuleInstance::GetInstance()->GetNativeNodeAPI())->createNode(ARKUI_NODE_TEXT)) {}
54    void SetFontSize(float fontSize) {
55        assert(handle_);
56        ArkUI_NumberValue value[] = {{.f32 = fontSize}};
57        ArkUI_AttributeItem item = {value, 1};
58        nativeModule_->setAttribute(handle_, NODE_FONT_SIZE, &item);
59    }
60    void SetFontColor(uint32_t color) {
61        assert(handle_);
62        ArkUI_NumberValue value[] = {{.u32 = color}};
63        ArkUI_AttributeItem item = {value, 1};
64        nativeModule_->setAttribute(handle_, NODE_FONT_COLOR, &item);
65    }
66    void SetTextContent(const std::string &content) {
67        assert(handle_);
68        ArkUI_AttributeItem item = {nullptr, 0, content.c_str()};
69        nativeModule_->setAttribute(handle_, NODE_TEXT_CONTENT, &item);
70    }
71    void SetTextAlign(ArkUI_TextAlignment align) {
72        assert(handle_);
73        ArkUI_NumberValue value[] = {{.i32 = align}};
74        ArkUI_AttributeItem item = {value, 1};
75        nativeModule_->setAttribute(handle_, NODE_TEXT_ALIGN, &item);
76    }
77    void SetLayoutCallBack(int32_t nodeId) {
78        assert(handle_);
79        OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "set layout callback");
80        // 注册布局完成的回调方法
81        OH_ArkUI_RegisterLayoutCallbackOnNodeHandle(handle_, this, OnLayoutCompleted);
82    }
83    void ResetLayoutCallBack() {
84        assert(handle_);
85        OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "reset layout callback");
86        // 取消注册布局完成的回调方法
87        OH_ArkUI_UnregisterLayoutCallbackOnNodeHandle(handle_);
88    }
89    void SetDrawCallBack(int32_t nodeId) {
90        assert(handle_);
91        OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "set draw callback");
92        // 注册绘制送显完成的回调方法
93        OH_ArkUI_RegisterDrawCallbackOnNodeHandle(handle_, this, OnDrawCompleted);
94    }
95    void ResetDrawCallBack() {
96        assert(handle_);
97        OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "reset draw callback");
98        // 取消注册绘制送显完成的回调方法
99        OH_ArkUI_UnregisterDrawCallbackOnNodeHandle(handle_);
100    }
101    void SetInspectorId(std::string inspectorId) {
102        ArkUI_AttributeItem item = {nullptr, 0, inspectorId.c_str()};
103        nativeModule_->setAttribute(handle_, NODE_ID, &item);
104    }
105};
106} // namespace NativeModule
107
108#endif // MYAPPLICATION_ARKUITEXTNODE_H
109```
110
111```c
112// NormalTextListExample.h
113// 自定义NDK接口入口函数。
114
115#ifndef MYAPPLICATION_NORMALTEXTLISTEXAMPLE_H
116#define MYAPPLICATION_NORMALTEXTLISTEXAMPLE_H
117
118#include "ArkUIBaseNode.h"
119#include "ArkUIListItemNode.h"
120#include "ArkUIListNode.h"
121#include "ArkUITextNode.h"
122#include <hilog/log.h>
123
124namespace NativeModule {
125
126std::shared_ptr<ArkUIBaseNode> CreateTextListExample() {
127    // 创建组件并挂载
128    // 1：使用智能指针创建List组件。
129    auto list = std::make_shared<ArkUIListNode>();
130    list->SetPercentWidth(1);
131    list->SetPercentHeight(1);
132    // 2：创建ListItem子组件并挂载到List上。
133    for (int32_t i = 0; i < 1; ++i) {
134        auto listItem = std::make_shared<ArkUIListItemNode>();
135        auto textNode = std::make_shared<ArkUITextNode>();
136        textNode->SetTextContent(std::to_string(i));
137        textNode->SetFontSize(16);
138        textNode->SetPercentWidth(1);
139        textNode->SetHeight(100);
140        textNode->SetBackgroundColor(0xFFfffacd);
141        textNode->SetTextAlign(ARKUI_TEXT_ALIGNMENT_CENTER);
142        // 在当前节点注册布局回调
143        textNode->SetLayoutCallBack(i);
144        // 在当前节点注册绘制送显回调
145        textNode->SetDrawCallBack(i);
146        listItem->AddChild(textNode);
147        list->AddChild(listItem);
148    }
149    return list;
150}
151} // namespace NativeModule
152
153#endif // MYAPPLICATION_NORMALTEXTLISTEXAMPLE_H
154```