1# 设置自定义节点跨语言属性 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @xiang-shouxing--> 5<!--Designer: @xiang-shouxing--> 6<!--Tester: @sally__--> 7<!--Adviser: @HelloCrease--> 8 9## 概述 10 11ArkUI支持在前端使用ArkTS语言创建命令式节点，即[FrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md)节点，也可以在Native侧使用C语言创建命令式节点，并且可以混合使用两类节点构建页面。 12 13针对上述场景，ArkUI提供命令式节点跨语言属性设置功能，即使用ArkTS语言创建的命令式节点，可以在Native侧进行属性设置。使用C语言创建的节点，可以在ArkTS侧进行属性设置。 14 15> **说明：** 16> 17> 下述示例中，需要先进行Native侧配置，请参考[接入ArkTS页面](./ndk-access-the-arkts-page.md)完成。 18 19## 设置和获取跨语言配置 20 21跨语言指的是跨越ArkTS语言和C语言。跨语言配置指的是命令式节点上对于跨语言操作的权限配置。 22 23可以通过[setCrossLanguageOptions](../reference/apis-arkui/js-apis-arkui-frameNode.md#setcrosslanguageoptions15)与[OH_ArkUI_NodeUtils_SetCrossLanguageOption](../reference/apis-arkui/capi-native-node-h.md#oh_arkui_nodeutils_setcrosslanguageoption)接口设置当前节点的跨语言配置。如果当前节点无法修改或设置跨语言配置，则会抛出异常信息。 24 25可以使用[getCrossLanguageOptions](../reference/apis-arkui/js-apis-arkui-frameNode.md#getcrosslanguageoptions15)与[OH_ArkUI_NodeUtils_GetCrossLanguageOption](../reference/apis-arkui/capi-native-node-h.md#oh_arkui_nodeutils_getcrosslanguageoption)接口获取当前节点的跨语言配置。 26 27以下示例描述了如何设置和获取ArkTS命令式节点的跨语言配置。 28 29```ts 30import { NodeController, UIContext, FrameNode, typeNode, BuilderNode } from '@kit.ArkUI'; 31 32@Builder 33function insideScroll() { 34 Column() { 35 ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (item: number) => { 36 Text(item.toString()) 37 .width("75%") 38 .height(50) 39 .backgroundColor(0xFFFFFF) 40 .borderRadius(15) 41 .fontSize(30) 42 .textAlign(TextAlign.Center) 43 .margin({ top: 10 }) 44 }, (item: string) => item) 45 } 46 .width("100%") 47} 48 49class MyNodeController extends NodeController { 50 uiContext: UIContext | null = null; 51 rootNode: FrameNode | null = null; 52 scrollNode: FrameNode | null = null; 53 scroller: Scroller = new Scroller(); 54 55 makeNode(uiContext: UIContext): FrameNode | null { 56 this.uiContext = uiContext; 57 this.rootNode = new FrameNode(uiContext); 58 this.rootNode.commonAttribute.width("80%").height("50%").borderWidth(2).margin(15); 59 const scroll = typeNode.createNode(uiContext, 'Scroll'); 60 scroll.initialize(this.scroller).id("scroll"); 61 this.scrollNode = scroll; 62 this.rootNode.appendChild(this.scrollNode); 63 const builderNode = new BuilderNode(uiContext); 64 builderNode.build(wrapBuilder(insideScroll)); 65 this.scrollNode?.appendChild(builderNode.getFrameNode()); 66 return this.rootNode; 67 } 68} 69 70@Entry 71@Component 72struct CrossLanguage { 73 myNodeController: MyNodeController = new MyNodeController() 74 @State attributeSetting: boolean = false; 75 @State getCrossLanguageOptions: string = '{"attributeSetting": false}'; 76 77 build() { 78 Scroll() { 79 Column({ space: 15 }) { 80 Column() { 81 Scroll() { 82 Column() { 83 NodeContainer(this.myNodeController) 84 Button("setCrossLanguageOptions").margin({ bottom: 15}) 85 .onClick(() => { 86 this.attributeSetting = !this.attributeSetting; 87 this.myNodeController.scrollNode?.setCrossLanguageOptions({ 88 attributeSetting: this.attributeSetting 89 }); 90 // 若attributeSetting为true，表示scrollNode支持通过非ArkTS语言进行属性设置，否则为不支持 91 this.getCrossLanguageOptions = JSON.stringify(this.myNodeController.scrollNode?.getCrossLanguageOptions()); 92 }) 93 Text("CrossLanguageOptions: " + this.getCrossLanguageOptions) 94 } 95 }.scrollBarColor(Color.Transparent) 96 } 97 .width('100%') 98 .height(350) 99 .backgroundColor(0xeeeeee) 100 .id('Part_TS') 101 } 102 .width('100%') 103 }.scrollBarColor(Color.Transparent) 104 } 105} 106``` 107 108## 跨语言设置节点属性 109 110获取节点后，若节点的跨语言配置设置为允许属性设置，ArkTS侧可利用getAttribute接口获取修改Native节点属性的对象，Native侧可利用[setAttribute](../reference/apis-arkui/capi-arkui-nativemodule-arkui-nativenodeapi-1.md#setattribute)接口修改ArkTS节点属性。 111 112以下示例创建了ArkTS的[Scroll](../reference/apis-arkui/js-apis-arkui-frameNode.md#scroll12)类型节点，并在Native侧修改了Scroll的属性。 113 1141. 在ArkTS侧创建组件类型为Scroll的命令式节点。 115 ```ts 116 import nativeNode from 'libentry.so'; 117 import { NodeController, UIContext, FrameNode, typeNode, BuilderNode, NodeContent } from '@kit.ArkUI'; 118 119 @Builder 120 function insideScroll() { 121 Column() { 122 ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (item: number) => { 123 Text(item.toString()) 124 .width("75%") 125 .height(50) 126 .backgroundColor(0xFFFFFF) 127 .borderRadius(15) 128 .fontSize(30) 129 .textAlign(TextAlign.Center) 130 .margin({ top: 10 }) 131 }, (item: string) => item) 132 } 133 .width("100%") 134 } 135 136 class MyNodeController extends NodeController { 137 uiContext: UIContext | null = null; 138 rootNode: FrameNode | null = null; 139 scrollNode: FrameNode | null = null; 140 scroller: Scroller = new Scroller(); 141 142 makeNode(uiContext: UIContext): FrameNode | null { 143 this.uiContext = uiContext; 144 this.rootNode = new FrameNode(uiContext); 145 this.rootNode.commonAttribute.width("80%").height("50%").borderWidth(2).margin(15); 146 const scroll = typeNode.createNode(uiContext, 'Scroll'); 147 scroll.initialize(this.scroller).id("scroll"); 148 this.scrollNode = scroll; 149 this.rootNode.appendChild(this.scrollNode); 150 const builderNode = new BuilderNode(uiContext); 151 builderNode.build(wrapBuilder(insideScroll)); 152 this.scrollNode?.appendChild(builderNode.getFrameNode()); 153 return this.rootNode; 154 } 155 } 156 157 @Entry 158 @Component 159 struct CrossLanguage { 160 private myNodeController: MyNodeController = new MyNodeController(); 161 @State attributeSetting: boolean = false; 162 @State getCrossLanguageOptions: string = '{"attributeSetting": false}'; 163 private rootSlot = new NodeContent(); 164 165 aboutToAppear(): void { 166 nativeNode.createNativeRoot(this.rootSlot); 167 } 168 169 build() { 170 Scroll() { 171 Column({ space: 15 }) { 172 Column() { 173 Scroll() { 174 Column() { 175 NodeContainer(this.myNodeController) 176 Button("setCrossLanguageOptions").margin({ bottom: 15}) 177 .onClick(() => { 178 this.attributeSetting = !this.attributeSetting; 179 this.myNodeController.scrollNode?.setCrossLanguageOptions({ 180 attributeSetting: this.attributeSetting 181 }); 182 // 若attributeSetting为true，表示scrollNode支持通过非ArkTS语言进行属性设置，否则为不支持 183 this.getCrossLanguageOptions = JSON.stringify(this.myNodeController.scrollNode?.getCrossLanguageOptions()); 184 }) 185 Text("CrossLanguageOptions: " + this.getCrossLanguageOptions) 186 } 187 }.scrollBarColor(Color.Transparent) 188 } 189 .width('100%') 190 .height(350) 191 .backgroundColor(0xeeeeee) 192 .id('Part_TS') 193 194 Column() { 195 ContentSlot(this.rootSlot) 196 } 197 .width(500) 198 .height(400) 199 .id('Part_C') 200 } 201 .width('100%') 202 }.scrollBarColor(Color.Transparent) 203 } 204 } 205 ``` 206 2072. 新建`CrossLanguageExample.h`文件，在其中获取到目标节点（该节点在ArkTS侧创建），并设置属性。 208 ```c 209 #ifndef MYAPPLICATION_CROSSLANGUAGEEXAMPLE_H 210 #define MYAPPLICATION_CROSSLANGUAGEEXAMPLE_H 211 212 #include "ArkUINode.h" 213 #include <hilog/log.h> 214 215 namespace NativeModule { 216 217 std::shared_ptr<ArkUIBaseNode> CreateCrossLanguageExample() { 218 auto nodeAPI = NativeModuleInstance::GetInstance()->GetNativeNodeAPI(); 219 220 // 创建根节点Scroll 221 ArkUI_NodeHandle scroll = nodeAPI->createNode(ARKUI_NODE_SCROLL); 222 ArkUI_NumberValue length_value[] = {{.f32 = 480}}; 223 ArkUI_AttributeItem length_item = {length_value, sizeof(length_value) / sizeof(ArkUI_NumberValue)}; 224 nodeAPI->setAttribute(scroll, NODE_WIDTH, &length_item); 225 ArkUI_NumberValue length_value1[] = {{.f32 = 650}}; 226 ArkUI_AttributeItem length_item1 = {length_value1, sizeof(length_value1) / sizeof(ArkUI_NumberValue)}; 227 nodeAPI->setAttribute(scroll, NODE_HEIGHT, &length_item1); 228 ArkUI_AttributeItem scroll_id = {.string = "Scroll_CAPI"}; 229 nodeAPI->setAttribute(scroll, NODE_ID, &scroll_id); 230 231 // 创建Column 232 ArkUI_NodeHandle column = nodeAPI->createNode(ARKUI_NODE_COLUMN); 233 ArkUI_NumberValue value[] = {480}; 234 ArkUI_AttributeItem item = {value, sizeof(value) / sizeof(ArkUI_NumberValue)}; 235 nodeAPI->setAttribute(column, NODE_WIDTH, &item); 236 ArkUI_NumberValue column_bc[] = {{.u32 = 0xFFF00BB}}; 237 ArkUI_AttributeItem column_item = {column_bc, 1}; 238 nodeAPI->setAttribute(column, NODE_BACKGROUND_COLOR, &column_item); 239 ArkUI_AttributeItem column_id = {.string = "Column_CAPI"}; 240 nodeAPI->setAttribute(column, NODE_ID, &column_id); 241 242 // 创建Text 243 ArkUI_NodeHandle text0 = nodeAPI->createNode(ARKUI_NODE_TEXT); 244 ArkUI_NumberValue text_width[] = {300}; 245 ArkUI_AttributeItem text_item0 = {text_width, sizeof(text_width) / sizeof(ArkUI_NumberValue)}; 246 nodeAPI->setAttribute(text0, NODE_WIDTH, &text_item0); 247 ArkUI_NumberValue text_height[] = {50}; 248 ArkUI_AttributeItem text_item1 = {text_height, sizeof(text_height) / sizeof(ArkUI_NumberValue)}; 249 nodeAPI->setAttribute(text0, NODE_HEIGHT, &text_item1); 250 ArkUI_AttributeItem text_item = {.string = "C设置TS创建的节点属性"}; 251 nodeAPI->setAttribute(text0, NODE_TEXT_CONTENT, &text_item); 252 ArkUI_NumberValue margin[] = {10}; 253 ArkUI_AttributeItem item_margin = {margin, sizeof(margin) / sizeof(ArkUI_NumberValue)}; 254 nodeAPI->setAttribute(text0, NODE_MARGIN, &item_margin); 255 256 // 创建Row 257 ArkUI_NodeHandle row0 = nodeAPI->createNode(ARKUI_NODE_ROW); 258 ArkUI_NumberValue width_value[] = {{.f32=330}}; 259 ArkUI_AttributeItem width_item = {width_value, sizeof(width_value) / sizeof(ArkUI_NumberValue)}; 260 nodeAPI->setAttribute(row0, NODE_WIDTH, &width_item); 261 nodeAPI->setAttribute(row0, NODE_HEIGHT, &text_item1); 262 nodeAPI->setAttribute(row0, NODE_MARGIN, &item_margin); 263 264 // 创建Button 265 ArkUI_NodeHandle bt0 = nodeAPI->createNode(ARKUI_NODE_BUTTON); 266 ArkUI_NumberValue btn_width[] = {150}; 267 ArkUI_AttributeItem btn_item0 = {btn_width, sizeof(btn_width) / sizeof(ArkUI_NumberValue)}; 268 nodeAPI->setAttribute(bt0, NODE_WIDTH, &btn_item0); 269 nodeAPI->setAttribute(bt0, NODE_HEIGHT, &text_item1); 270 nodeAPI->setAttribute(bt0, NODE_MARGIN, &item_margin); 271 ArkUI_AttributeItem bt0_item = {.string = "scrollBarColor"}; 272 nodeAPI->setAttribute(bt0, NODE_BUTTON_LABEL, &bt0_item); 273 nodeAPI->registerNodeEvent(bt0, NODE_ON_CLICK, 0, nullptr); 274 275 ArkUI_NodeHandle bt1 = nodeAPI->createNode(ARKUI_NODE_BUTTON); 276 nodeAPI->setAttribute(bt1, NODE_WIDTH, &btn_item0); 277 nodeAPI->setAttribute(bt1, NODE_HEIGHT, &text_item1); 278 nodeAPI->setAttribute(bt1, NODE_MARGIN, &item_margin); 279 ArkUI_AttributeItem bt1_item = {.string = "scrollBarWidth"}; 280 nodeAPI->setAttribute(bt1, NODE_BUTTON_LABEL, &bt1_item); 281 nodeAPI->registerNodeEvent(bt1, NODE_ON_CLICK, 1, nullptr); 282 283 // 注册事件 284 auto onClick = [](ArkUI_NodeEvent *event) { 285 ArkUI_NodeHandle node = OH_ArkUI_NodeEvent_GetNodeHandle(event); 286 auto nodeAPI = NativeModuleInstance::GetInstance()->GetNativeNodeAPI(); 287 288 if (OH_ArkUI_NodeEvent_GetTargetId(event) == 0) { // scrollBarColor 289 ArkUI_NodeHandle node_ptr = nullptr; 290 OH_ArkUI_NodeUtils_GetAttachedNodeHandleById("scroll", &node_ptr); 291 try { 292 ArkUI_NumberValue scroll_color_value[] = {{.u32 = 0xff00ff00}}; 293 ArkUI_AttributeItem scroll_color_item = {scroll_color_value, sizeof(scroll_color_value) / sizeof(ArkUI_NumberValue)}; 294 nodeAPI->setAttribute(node_ptr, NODE_SCROLL_BAR_COLOR, &scroll_color_item); 295 } catch (...) { 296 OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "CrossLanguageExample", "crossLanguage setAttribute error"); 297 } 298 } 299 300 if (OH_ArkUI_NodeEvent_GetTargetId(event) == 1) { // scrollBarWidth 301 ArkUI_NodeHandle node_ptr = nullptr; 302 OH_ArkUI_NodeUtils_GetAttachedNodeHandleById("scroll", &node_ptr); 303 try { 304 ArkUI_NumberValue scroll_width_value[] = {{20}}; 305 ArkUI_AttributeItem scroll_width_item = {scroll_width_value, sizeof(scroll_width_value) / sizeof(ArkUI_NumberValue)}; 306 nodeAPI->setAttribute(node_ptr, NODE_SCROLL_BAR_WIDTH, &scroll_width_item); 307 } catch (...) { 308 OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "CrossLanguageExample", "crossLanguage setAttribute error"); 309 } 310 } 311 }; 312 nodeAPI->registerNodeEventReceiver(onClick); 313 314 // 节点添加 315 nodeAPI->addChild(scroll, column); 316 nodeAPI->addChild(column, text0); 317 nodeAPI->addChild(column, row0); 318 nodeAPI->addChild(row0, bt0); 319 nodeAPI->addChild(row0, bt1); 320 321 return std::make_shared<ArkUINode>(scroll); 322 } 323 } // namespace NativeModule 324 325 #endif //MYAPPLICATION_CROSSLANGUAGEEXAMPLE_H 326 ``` 327 3283. 在`NativeEntry.cpp`中，挂载Native节点。 329 ```c 330 // NativeEntry.cpp 331 332 333 #include <arkui/native_node_napi.h> 334 #include <hilog/log.h> 335 #include <js_native_api.h> 336 #include "NativeEntry.h" 337 #include "CrossLanguageExample.h" 338 339 340 namespace NativeModule { 341 342 343 napi_value CreateNativeRoot(napi_env env, napi_callback_info info) { 344 size_t argc = 1; 345 napi_value args[1] = {nullptr}; 346 347 348 napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 349 350 351 // 获取NodeContent 352 ArkUI_NodeContentHandle contentHandle; 353 OH_ArkUI_GetNodeContentFromNapiValue(env, args[0], &contentHandle); 354 NativeEntry::GetInstance()->SetContentHandle(contentHandle); 355 356 357 // 创建节点 358 auto node = CreateCrossLanguageExample(); 359 360 361 // 保持Native侧对象到管理类中，维护生命周期。 362 NativeEntry::GetInstance()->SetRootNode(node); 363 return nullptr; 364 } 365 366 367 napi_value DestroyNativeRoot(napi_env env, napi_callback_info info) { 368 // 从管理类中释放Native侧对象。 369 NativeEntry::GetInstance()->DisposeRootNode(); 370 return nullptr; 371 } 372 373 374 } // namespace NativeModule 375 ``` 376 3774. 运行程序，在ArkTS侧点击按钮，设置当前attributeSetting为true，在Native侧点击按钮，设置ArkTS侧Scroll组件滚动条的颜色和粗细属性。 378 379 380 381## 支持跨语言设置属性的节点类型 382 383仅以下节点类型支持跨语言设置节点属性。 384 385| ArkTS侧[TypedFrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md#typedframenode12)类型 | Native侧[ArkUI_NodeType](../reference/apis-arkui/capi-native-node-h.md#arkui_nodetype)类型 | ArkTS属性获取接口 | ArkTS控制器获取/绑定接口 | 386| -------- | -------- | -------- | -------- | 387| [Button](../reference/apis-arkui/js-apis-arkui-frameNode.md#button12) | ARKUI_NODE_BUTTON | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributebutton20) | NA | 388| [Checkbox](../reference/apis-arkui/js-apis-arkui-frameNode.md#checkbox18) | ARKUI_NODE_CHECKBOX | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributecheckbox20) | NA | 389| [Radio](../reference/apis-arkui/js-apis-arkui-frameNode.md#radio18) | ARKUI_NODE_RADIO | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributeradio20) | NA | 390| [Slider](../reference/apis-arkui/js-apis-arkui-frameNode.md#slider18) | ARKUI_NODE_SLIDER | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributeslider20) | NA | 391| [Toggle](../reference/apis-arkui/js-apis-arkui-frameNode.md#toggle18) | ARKUI_NODE_TOGGLE | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributetoggle20) | NA | 392| [Progress](../reference/apis-arkui/js-apis-arkui-frameNode.md#progress12) | ARKUI_NODE_PROGRESS | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributeprogress20) | NA | 393| [LoadingProgress](../reference/apis-arkui/js-apis-arkui-frameNode.md#loadingprogress12) | ARKUI_NODE_LOADING_PROGRESS | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributeloadingprogress20) | NA | 394| [Image](../reference/apis-arkui/js-apis-arkui-frameNode.md#image12) | ARKUI_NODE_IMAGE | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributeimage20) | NA | 395| [XComponent](../reference/apis-arkui/js-apis-arkui-frameNode.md#xcomponent12) | ARKUI_NODE_XCOMPONENT | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributexcomponent20) | getController | 396| [Column](../reference/apis-arkui/js-apis-arkui-frameNode.md#column12) | ARKUI_NODE_COLUMN | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributecolumn20) | NA | 397| [Row](../reference/apis-arkui/js-apis-arkui-frameNode.md#row12) | ARKUI_NODE_ROW | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributerow20) | NA | 398| [Stack](../reference/apis-arkui/js-apis-arkui-frameNode.md#stack12) | ARKUI_NODE_STACK | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributestack20) | NA | 399| [Flex](../reference/apis-arkui/js-apis-arkui-frameNode.md#flex12) | ARKUI_NODE_FLEX | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributeflex20) | NA | 400| [RelativeContainer](../reference/apis-arkui/js-apis-arkui-frameNode.md#relativecontainer12) | ARKUI_NODE_RELATIVE_CONTAINER | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributerelativecontainer20) | NA | 401| [Swiper](../reference/apis-arkui/js-apis-arkui-frameNode.md#swiper12) | ARKUI_NODE_SWIPER | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributeswiper20) | [bindController](../reference/apis-arkui/js-apis-arkui-frameNode.md#bindcontrollerswiper20) | 402| [Scroll](../reference/apis-arkui/js-apis-arkui-frameNode.md#scroll12) | ARKUI_NODE_SCROLL | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributescroll15) | [bindController](../reference/apis-arkui/js-apis-arkui-frameNode.md#bindcontrollerscroll15) | 403| [List](../reference/apis-arkui/js-apis-arkui-frameNode.md#list12) | ARKUI_NODE_LIST | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributelist20) | [bindController](../reference/apis-arkui/js-apis-arkui-frameNode.md#bindcontrollerlist20) | 404| [ListItem](../reference/apis-arkui/js-apis-arkui-frameNode.md#listitem12) | ARKUI_NODE_LIST_ITEM | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributelistitem20) | NA | 405| [ListItemGroup](../reference/apis-arkui/js-apis-arkui-frameNode.md#listitemgroup12) | ARKUI_NODE_LIST_ITEM_GROUP | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributelistitemgroup20) | NA | 406| [WaterFlow](../reference/apis-arkui/js-apis-arkui-frameNode.md#waterflow12) | ARKUI_NODE_WATER_FLOW | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributewaterflow20) | [bindController](../reference/apis-arkui/js-apis-arkui-frameNode.md#bindcontrollerwaterflow20) | 407| [FlowItem](../reference/apis-arkui/js-apis-arkui-frameNode.md#flowitem12) | ARKUI_NODE_FLOW_ITEM | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributeflowitem20) | NA | 408| [Grid](../reference/apis-arkui/js-apis-arkui-frameNode.md#grid14) | ARKUI_NODE_GRID | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributegrid20) | [bindController](../reference/apis-arkui/js-apis-arkui-frameNode.md#bindcontrollergrid20) | 409| [GridItem](../reference/apis-arkui/js-apis-arkui-frameNode.md#griditem14) | ARKUI_NODE_GRID_ITEM | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributegriditem20) | NA | 410| [Text](../reference/apis-arkui/js-apis-arkui-frameNode.md#text12) | ARKUI_NODE_TEXT | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributetext20) | [bindController](../reference/apis-arkui/js-apis-arkui-frameNode.md#bindcontrollertext20) | 411| [TextInput](../reference/apis-arkui/js-apis-arkui-frameNode.md#textinput12) | ARKUI_NODE_TEXT_INPUT | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributetextinput20) | [bindController](../reference/apis-arkui/js-apis-arkui-frameNode.md#bindcontrollertextinput20) | 412| [TextArea](../reference/apis-arkui/js-apis-arkui-frameNode.md#textarea14) | ARKUI_NODE_TEXT_AREA | [getAttribute](../reference/apis-arkui/js-apis-arkui-frameNode.md#getattributetextarea20) | [bindController](../reference/apis-arkui/js-apis-arkui-frameNode.md#bindcontrollertextarea20) |
