设置自定义节点跨语言属性
============

#### 概述

ArkUI支持在前端使用ArkTS语言创建命令式节点，即[FrameNode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode)节点，也可以在Native侧使用C语言创建命令式节点，并且可以混合使用两类节点构建页面。

针对上述场景，ArkUI提供命令式节点跨语言属性设置功能，即使用ArkTS语言创建的命令式节点，可以在Native侧进行属性设置。使用C语言创建的节点，可以在ArkTS侧进行属性设置。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/95/v3/T6ePhvTLQNK0ifC5o2dOtw/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073312Z&HW-CC-Expire=86400&HW-CC-Sign=2C66FCF7B4AC0DA8BB6F21C26B4CEDC61206B3D0BBC79650217F0B2117A6C981)

下述示例中，需要先进行Native侧配置，请参考[接入ArkTS页面](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-access-the-arkts-page)完成。

#### 设置和获取跨语言配置

跨语言指的是跨越ArkTS语言和C语言。跨语言配置指的是命令式节点上对于跨语言操作的权限配置。

可以通过[setCrossLanguageOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#setcrosslanguageoptions15)与[OH\_ArkUI\_NodeUtils\_SetCrossLanguageOption](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-node-h#oh_arkui_nodeutils_setcrosslanguageoption)接口设置当前节点的跨语言配置。如果当前节点无法修改或设置跨语言配置，则会抛出异常信息。

可以使用[getCrossLanguageOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getcrosslanguageoptions15)与[OH\_ArkUI\_NodeUtils\_GetCrossLanguageOption](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-node-h#oh_arkui_nodeutils_getcrosslanguageoption)接口获取当前节点的跨语言配置。

以下示例描述了如何设置和获取ArkTS命令式节点的跨语言配置。

// Index.ets
import { NodeController, UIContext, FrameNode, typeNode, BuilderNode } from '@kit.ArkUI';

@Builder
function insideScroll() {
  Column() {
    ForEach(\[1, 2, 3, 4, 5, 6, 7, 8, 9, 10\], (item: number) => {
      Text(item.toString())
        .width("75%")
        .height(50)
        .backgroundColor(0xFFFFFF)
        .borderRadius(15)
        .fontSize(30)
        .textAlign(TextAlign.Center)
        .margin({ top: 10 })
    }, (item: string) => item)
  }
  .width("100%")
}

class MyNodeController extends NodeController {
  uiContext: UIContext | null = null;
  rootNode: FrameNode | null = null;
  scrollNode: FrameNode | null = null;
  scroller: Scroller = new Scroller();

  makeNode(uiContext: UIContext): FrameNode | null {
    this.uiContext = uiContext;
    this.rootNode = new FrameNode(uiContext);
    this.rootNode.commonAttribute.width("80%").height("50%").borderWidth(2).margin(15);
    const scroll = typeNode.createNode(uiContext, 'Scroll');
    scroll.initialize(this.scroller).id("scroll");
    this.scrollNode = scroll;
    this.rootNode.appendChild(this.scrollNode);
    const builderNode = new BuilderNode(uiContext);
    builderNode.build(wrapBuilder(insideScroll));
    this.scrollNode?.appendChild(builderNode.getFrameNode());
    return this.rootNode;
  }
}

@Entry
@Component
struct CrossLanguage {
  myNodeController: MyNodeController = new MyNodeController()
  @State attributeSetting: boolean = false;
  @State getCrossLanguageOptions: string = '{"attributeSetting": false}';

  build() {
    Scroll() {
      Column({ space: 15 }) {
        Column() {
          Scroll() {
            Column() {
              NodeContainer(this.myNodeController)
              Button("setCrossLanguageOptions").margin({ bottom: 15})
                .onClick(() => {
                  this.attributeSetting = !this.attributeSetting;
                  this.myNodeController.scrollNode?.setCrossLanguageOptions({
                    attributeSetting: this.attributeSetting
                  });
                  // 若attributeSetting为true，表示scrollNode支持通过非ArkTS语言进行属性设置，否则为不支持
                  this.getCrossLanguageOptions = JSON.stringify(this.myNodeController.scrollNode?.getCrossLanguageOptions());
                })
              Text("CrossLanguageOptions: " + this.getCrossLanguageOptions)
            }
          }.scrollBarColor(Color.Transparent)
        }
        .width('100%')
        .height(350)
        .backgroundColor(0xeeeeee)
        .id('Part\_TS')
      }
      .width('100%')
    }.scrollBarColor(Color.Transparent)
  }
}

#### 跨语言设置节点属性

获取节点后，若节点的跨语言配置设置为允许属性设置，ArkTS侧可利用getAttribute接口获取修改Native节点属性的对象，Native侧可利用[setAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativenodeapi-1#setattribute)接口修改ArkTS节点属性。

以下示例创建了ArkTS的[Scroll](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#scroll12)类型节点，并在Native侧修改了Scroll的属性。

1.  在ArkTS侧创建组件类型为Scroll的命令式节点。
    
    // Index.ets
    import nativeNode from 'libentry.so';
    import { NodeController, UIContext, FrameNode, typeNode, BuilderNode, NodeContent } from '@kit.ArkUI';
    
    @Builder
    function insideScroll() {
      Column() {
        ForEach(\[1, 2, 3, 4, 5, 6, 7, 8, 9, 10\], (item: number) => {
          Text(item.toString())
            .width("75%")
            .height(50)
            .backgroundColor(0xFFFFFF)
            .borderRadius(15)
            .fontSize(30)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
        }, (item: string) => item)
      }
      .width("100%")
    }
    
    class MyNodeController extends NodeController {
      uiContext: UIContext | null = null;
      rootNode: FrameNode | null = null;
      scrollNode: FrameNode | null = null;
      scroller: Scroller = new Scroller();
    
      makeNode(uiContext: UIContext): FrameNode | null {
        this.uiContext = uiContext;
        this.rootNode = new FrameNode(uiContext);
        this.rootNode.commonAttribute.width("80%").height("50%").borderWidth(2).margin(15);
        const scroll = typeNode.createNode(uiContext, 'Scroll');
        scroll.initialize(this.scroller).id("scroll");
        this.scrollNode = scroll;
        this.rootNode.appendChild(this.scrollNode);
        const builderNode = new BuilderNode(uiContext);
        builderNode.build(wrapBuilder(insideScroll));
        this.scrollNode?.appendChild(builderNode.getFrameNode());
        return this.rootNode;
      }
    }
    
    @Entry
    @Component
    struct CrossLanguage {
      private myNodeController: MyNodeController = new MyNodeController();
      @State attributeSetting: boolean = false;
      @State getCrossLanguageOptions: string = '{"attributeSetting": false}';
      private rootSlot = new NodeContent();
    
      aboutToAppear(): void {
        nativeNode.createNativeRoot(this.rootSlot);
      }
    
      build() {
        Scroll() {
          Column({ space: 15 }) {
            Column() {
              Scroll() {
                Column() {
                  NodeContainer(this.myNodeController)
                  Button("setCrossLanguageOptions").margin({ bottom: 15})
                    .onClick(() => {
                      this.attributeSetting = !this.attributeSetting;
                      this.myNodeController.scrollNode?.setCrossLanguageOptions({
                        attributeSetting: this.attributeSetting
                      });
                      // 若attributeSetting为true，表示scrollNode支持通过非ArkTS语言进行属性设置，否则为不支持
                      this.getCrossLanguageOptions = JSON.stringify(this.myNodeController.scrollNode?.getCrossLanguageOptions());
                    })
                  Text("CrossLanguageOptions: " + this.getCrossLanguageOptions)
                }
              }.scrollBarColor(Color.Transparent)
            }
            .width('100%')
            .height(350)
            .backgroundColor(0xeeeeee)
            .id('Part\_TS')
    
            Column() {
              ContentSlot(this.rootSlot)
            }
            .width(500)
            .height(400)
            .id('Part\_C')
          }
          .width('100%')
        }.scrollBarColor(Color.Transparent)
      }
    }
    
2.  新建CrossLanguageExample.h文件，在其中获取到目标节点（该节点在ArkTS侧创建），并设置属性。
    
    // CrossLanguageExample.h
    #ifndef MYAPPLICATION\_CROSSLANGUAGEEXAMPLE\_H
    #define MYAPPLICATION\_CROSSLANGUAGEEXAMPLE\_H
    
    #include "ArkUINode.h"
    #include <hilog/log.h>
    
    namespace NativeModule {
    
    std::shared\_ptr<ArkUIBaseNode> CreateCrossLanguageExample() {
        auto nodeAPI = NativeModuleInstance::GetInstance()->GetNativeNodeAPI();
        
        // 创建根节点Scroll
        ArkUI\_NodeHandle scroll = nodeAPI->createNode(ARKUI\_NODE\_SCROLL);
        ArkUI\_NumberValue length\_value\[\] = {{.f32 = 480}};
        ArkUI\_AttributeItem length\_item = {length\_value, sizeof(length\_value) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(scroll, NODE\_WIDTH, &length\_item);
        ArkUI\_NumberValue length\_value1\[\] = {{.f32 = 650}};
        ArkUI\_AttributeItem length\_item1 = {length\_value1, sizeof(length\_value1) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(scroll, NODE\_HEIGHT, &length\_item1);
        ArkUI\_AttributeItem scroll\_id = {.string = "Scroll\_CAPI"};
        nodeAPI->setAttribute(scroll, NODE\_ID, &scroll\_id);
        
        // 创建Column
        ArkUI\_NodeHandle column = nodeAPI->createNode(ARKUI\_NODE\_COLUMN);
        ArkUI\_NumberValue value\[\] = {480};
        ArkUI\_AttributeItem item = {value, sizeof(value) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(column, NODE\_WIDTH, &item);
        ArkUI\_NumberValue column\_bc\[\] = {{.u32 = 0xFFF00BB}};
        ArkUI\_AttributeItem column\_item = {column\_bc, 1};
        nodeAPI->setAttribute(column, NODE\_BACKGROUND\_COLOR, &column\_item);
        ArkUI\_AttributeItem column\_id = {.string = "Column\_CAPI"};
        nodeAPI->setAttribute(column, NODE\_ID, &column\_id);
        
        // 创建Text
        ArkUI\_NodeHandle text0 = nodeAPI->createNode(ARKUI\_NODE\_TEXT);
        ArkUI\_NumberValue text\_width\[\] = {300};
        ArkUI\_AttributeItem text\_item0 = {text\_width, sizeof(text\_width) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(text0, NODE\_WIDTH, &text\_item0);
        ArkUI\_NumberValue text\_height\[\] = {50};
        ArkUI\_AttributeItem text\_item1 = {text\_height, sizeof(text\_height) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(text0, NODE\_HEIGHT, &text\_item1);
        ArkUI\_AttributeItem text\_item = {.string = "C设置TS创建的节点属性"};
        nodeAPI->setAttribute(text0, NODE\_TEXT\_CONTENT, &text\_item);
        ArkUI\_NumberValue margin\[\] = {10};
        ArkUI\_AttributeItem item\_margin = {margin, sizeof(margin) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(text0, NODE\_MARGIN, &item\_margin);
        
        // 创建Row
        ArkUI\_NodeHandle row0 = nodeAPI->createNode(ARKUI\_NODE\_ROW);
        ArkUI\_NumberValue width\_value\[\] = {{.f32=330}};
        ArkUI\_AttributeItem width\_item = {width\_value, sizeof(width\_value) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(row0, NODE\_WIDTH, &width\_item);
        nodeAPI->setAttribute(row0, NODE\_HEIGHT, &text\_item1);
        nodeAPI->setAttribute(row0, NODE\_MARGIN, &item\_margin);
        
        // 创建Button
        ArkUI\_NodeHandle bt0 = nodeAPI->createNode(ARKUI\_NODE\_BUTTON);
        ArkUI\_NumberValue btn\_width\[\] = {150};
        ArkUI\_AttributeItem btn\_item0 = {btn\_width, sizeof(btn\_width) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(bt0, NODE\_WIDTH, &btn\_item0);
        nodeAPI->setAttribute(bt0, NODE\_HEIGHT, &text\_item1);
        nodeAPI->setAttribute(bt0, NODE\_MARGIN, &item\_margin);
        ArkUI\_AttributeItem bt0\_item = {.string = "scrollBarColor"};
        nodeAPI->setAttribute(bt0, NODE\_BUTTON\_LABEL, &bt0\_item);
        nodeAPI->registerNodeEvent(bt0, NODE\_ON\_CLICK, 0, nullptr);
        
        ArkUI\_NodeHandle bt1 = nodeAPI->createNode(ARKUI\_NODE\_BUTTON);
        nodeAPI->setAttribute(bt1, NODE\_WIDTH, &btn\_item0);
        nodeAPI->setAttribute(bt1, NODE\_HEIGHT, &text\_item1);
        nodeAPI->setAttribute(bt1, NODE\_MARGIN, &item\_margin);
        ArkUI\_AttributeItem bt1\_item = {.string = "scrollBarWidth"};
        nodeAPI->setAttribute(bt1, NODE\_BUTTON\_LABEL, &bt1\_item);
        nodeAPI->registerNodeEvent(bt1, NODE\_ON\_CLICK, 1, nullptr);
        
        // 注册事件
        auto onClick = \[\](ArkUI\_NodeEvent \*event) {
            ArkUI\_NodeHandle node = OH\_ArkUI\_NodeEvent\_GetNodeHandle(event);
            auto nodeAPI = NativeModuleInstance::GetInstance()->GetNativeNodeAPI();
            
            if (OH\_ArkUI\_NodeEvent\_GetTargetId(event) == 0) {  // scrollBarColor
                ArkUI\_NodeHandle node\_ptr = nullptr;
                OH\_ArkUI\_NodeUtils\_GetAttachedNodeHandleById("scroll", &node\_ptr);
                try {
                    ArkUI\_NumberValue scroll\_color\_value\[\] = {{.u32 = 0xff00ff00}};
                    ArkUI\_AttributeItem scroll\_color\_item = {scroll\_color\_value, sizeof(scroll\_color\_value) / sizeof(ArkUI\_NumberValue)};
                    nodeAPI->setAttribute(node\_ptr, NODE\_SCROLL\_BAR\_COLOR, &scroll\_color\_item);
                } catch (...) {
                    OH\_LOG\_Print(LOG\_APP, LOG\_ERROR, 0xFF00, "CrossLanguageExample", "crossLanguage setAttribute error");
                }
            }
            
            if (OH\_ArkUI\_NodeEvent\_GetTargetId(event) == 1) {  // scrollBarWidth
                ArkUI\_NodeHandle node\_ptr = nullptr;
                OH\_ArkUI\_NodeUtils\_GetAttachedNodeHandleById("scroll", &node\_ptr);
                try {
                    ArkUI\_NumberValue scroll\_width\_value\[\] = {{20}};
                    ArkUI\_AttributeItem scroll\_width\_item = {scroll\_width\_value, sizeof(scroll\_width\_value) / sizeof(ArkUI\_NumberValue)};
                    nodeAPI->setAttribute(node\_ptr, NODE\_SCROLL\_BAR\_WIDTH, &scroll\_width\_item);
                } catch (...) {
                    OH\_LOG\_Print(LOG\_APP, LOG\_ERROR, 0xFF00, "CrossLanguageExample", "crossLanguage setAttribute error");
                }
            }
        };
        nodeAPI->registerNodeEventReceiver(onClick);
        
        // 节点添加
        nodeAPI->addChild(scroll, column);
        nodeAPI->addChild(column, text0);
        nodeAPI->addChild(column, row0);
        nodeAPI->addChild(row0, bt0);
        nodeAPI->addChild(row0, bt1);
        
        return std::make\_shared<ArkUINode>(scroll);
    }
    } // namespace NativeModule
    
    #endif // MYAPPLICATION\_CROSSLANGUAGEEXAMPLE\_H
    
3.  在NativeEntry.cpp中，挂载Native节点。
    
    // NativeEntry.cpp
    
    
    #include <arkui/native\_node\_napi.h>
    #include <js\_native\_api.h>
    #include "NativeEntry.h"
    #include "CrossLanguageExample.h"
    
    
    namespace NativeModule {
    
    
    napi\_value CreateNativeRoot(napi\_env env, napi\_callback\_info info) {
        size\_t argc = 1;
        napi\_value args\[1\] = {nullptr};
    
    
        napi\_get\_cb\_info(env, info, &argc, args, nullptr, nullptr);
    
    
        // 获取NodeContent
        ArkUI\_NodeContentHandle contentHandle;
        OH\_ArkUI\_GetNodeContentFromNapiValue(env, args\[0\], &contentHandle);
        NativeEntry::GetInstance()->SetContentHandle(contentHandle);
    
    
        // 创建节点
        auto node = CreateCrossLanguageExample();
    
    
        // 保持Native侧对象到管理类中，维护生命周期。
        NativeEntry::GetInstance()->SetRootNode(node);
        return nullptr;
    }
    
    
    napi\_value DestroyNativeRoot(napi\_env env, napi\_callback\_info info) {
        // 从管理类中释放Native侧对象。
        NativeEntry::GetInstance()->DisposeRootNode();
        return nullptr;
    }
    
    
    } // namespace NativeModule
    
4.  修改CMakeLists.txt，添加链接库。
    
    // CMakeLists.txt
    # the minimum version of CMake.
    cmake\_minimum\_required(VERSION 3.5.0)
    project(CAPI\_DEMO)
    
    set(NATIVERENDER\_ROOT\_PATH ${CMAKE\_CURRENT\_SOURCE\_DIR})
    
    if(DEFINED PACKAGE\_FIND\_FILE)
        include(${PACKAGE\_FIND\_FILE})
    endif()
    
    include\_directories(${NATIVERENDER\_ROOT\_PATH}
                      ${NATIVERENDER\_ROOT\_PATH}/include)
    
    add\_library(entry SHARED napi\_init.cpp NativeEntry.cpp)
    target\_link\_libraries(entry PUBLIC libace\_napi.z.so libace\_ndk.z.so hilog\_ndk.z.so)
    
5.  运行程序，在ArkTS侧点击按钮，设置当前attributeSetting为true，在Native侧点击按钮，设置ArkTS侧Scroll组件滚动条的颜色和粗细属性。
    

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2b/v3/GFAn0PcST3COk899rXwa0w/zh-cn_image_0000002594828136.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073312Z&HW-CC-Expire=86400&HW-CC-Sign=2381789A56B49FD125F18255FAB92D6D9C79888D8FFCCB04C7120E50E46F7080)

#### 支持跨语言设置属性的节点类型

仅以下节点类型支持跨语言设置节点属性。

| ArkTS侧[TypedFrameNode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#typedframenode12)类型 | Native侧[ArkUI\_NodeType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-node-h#arkui_nodetype)类型 | ArkTS属性获取接口 | ArkTS控制器获取/绑定接口 |
| :-- | :-- | :-- | :-- |
| [Button](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#button12) | ARKUI\_NODE\_BUTTON | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributebutton20) | NA |
| [Checkbox](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#checkbox18) | ARKUI\_NODE\_CHECKBOX | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributecheckbox20) | NA |
| [Radio](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#radio18) | ARKUI\_NODE\_RADIO | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributeradio20) | NA |
| [Slider](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#slider18) | ARKUI\_NODE\_SLIDER | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributeslider20) | NA |
| [Toggle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#toggle18) | ARKUI\_NODE\_TOGGLE | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributetoggle20) | NA |
| [Progress](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#progress12) | ARKUI\_NODE\_PROGRESS | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributeprogress20) | NA |
| [LoadingProgress](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#loadingprogress12) | ARKUI\_NODE\_LOADING\_PROGRESS | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributeloadingprogress20) | NA |
| [Image](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#image12) | ARKUI\_NODE\_IMAGE | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributeimage20) | NA |
| [XComponent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#xcomponent12) | ARKUI\_NODE\_XCOMPONENT | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributexcomponent20) | getController |
| [Column](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#column12) | ARKUI\_NODE\_COLUMN | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributecolumn20) | NA |
| [Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#row12) | ARKUI\_NODE\_ROW | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributerow20) | NA |
| [Stack](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#stack12) | ARKUI\_NODE\_STACK | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributestack20) | NA |
| [Flex](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#flex12) | ARKUI\_NODE\_FLEX | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributeflex20) | NA |
| [RelativeContainer](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#relativecontainer12) | ARKUI\_NODE\_RELATIVE\_CONTAINER | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributerelativecontainer20) | NA |
| [Swiper](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#swiper12) | ARKUI\_NODE\_SWIPER | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributeswiper20) | [bindController](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#bindcontrollerswiper20) |
| [Scroll](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#scroll12) | ARKUI\_NODE\_SCROLL | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributescroll15) | [bindController](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#bindcontrollerscroll15) |
| [List](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#list12) | ARKUI\_NODE\_LIST | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributelist20) | [bindController](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#bindcontrollerlist20) |
| [ListItem](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#listitem12) | ARKUI\_NODE\_LIST\_ITEM | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributelistitem20) | NA |
| [ListItemGroup](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#listitemgroup12) | ARKUI\_NODE\_LIST\_ITEM\_GROUP | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributelistitemgroup20) | NA |
| [WaterFlow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#waterflow12) | ARKUI\_NODE\_WATER\_FLOW | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributewaterflow20) | [bindController](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#bindcontrollerwaterflow20) |
| [FlowItem](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#flowitem12) | ARKUI\_NODE\_FLOW\_ITEM | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributeflowitem20) | NA |
| [Grid](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#grid14) | ARKUI\_NODE\_GRID | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributegrid20) | [bindController](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#bindcontrollergrid20) |
| [GridItem](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#griditem14) | ARKUI\_NODE\_GRID\_ITEM | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributegriditem20) | NA |
| [Text](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#text12) | ARKUI\_NODE\_TEXT | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributetext20) | [bindController](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#bindcontrollertext20) |
| [TextInput](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#textinput12) | ARKUI\_NODE\_TEXT\_INPUT | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributetextinput20) | [bindController](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#bindcontrollertextinput20) |
| [TextArea](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#textarea14) | ARKUI\_NODE\_TEXT\_AREA | [getAttribute](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#getattributetextarea20) | [bindController](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode#bindcontrollertextarea20) |