diff --git a/frameworks/bridge/declarative_frontend/ark_component/src/ArkColumn.ts b/frameworks/bridge/declarative_frontend/ark_component/src/ArkColumn.ts
index f9665fd541d0f10f8ab1908745c059a5403df130..b65f1ec04ac51a6f74df821ccf67f073bd9ea6cb 100644
--- a/frameworks/bridge/declarative_frontend/ark_component/src/ArkColumn.ts
+++ b/frameworks/bridge/declarative_frontend/ark_component/src/ArkColumn.ts
@@ -48,10 +48,36 @@ class ColumnJustifyContentModifier extends ModifierWithKey<number> {
   }
 }
 
+class ColumnSpaceModifier extends ModifierWithKey<string | number> {
+  constructor(value: string | number) {
+    super(value);
+  }
+  static identity:Symbol = Symbol('columnSpace');
+  applyPeer(node: KNode, reset: boolean): void {
+    if (reset) {
+      getUINativeModule().column.resetSpace(node);
+    }
+    else {
+      getUINativeModule().column.setSpace(node, this.value);
+    }
+  }
+  checkObjectDiff() : boolean {
+    return this.stageValue !== this.value;
+  }
+}
+interface ColumnParam {
+  space: string | number;
+}
 class ArkColumnComponent extends ArkComponent implements CommonMethod<ColumnAttribute> {
   constructor(nativePtr: KNode, classType?: ModifierType) {
     super(nativePtr, classType);
   }
+  initialize(value: Object[]): ColumnAttribute {
+    if (value[0] !== undefined) {
+      modifierWithKey(this._modifiersWithKeys, ColumnSpaceModifier.identity, ColumnSpaceModifier, (value[0] as ColumnParam).space);
+    }
+    return this
+  }
   alignItems(value: HorizontalAlign): ColumnAttribute {
     modifierWithKey(this._modifiersWithKeys, ColumnAlignItemsModifier.identity, ColumnAlignItemsModifier, value);
     return this;
diff --git a/frameworks/bridge/declarative_frontend/ark_component/src/ArkComponent.ts b/frameworks/bridge/declarative_frontend/ark_component/src/ArkComponent.ts
index 6699998a54751b893c541c94ab3a1ce515d47cb7..3a0fe4d9e384f60d4062de043d32152f7eec00f0 100644
--- a/frameworks/bridge/declarative_frontend/ark_component/src/ArkComponent.ts
+++ b/frameworks/bridge/declarative_frontend/ark_component/src/ArkComponent.ts
@@ -24,11 +24,69 @@ function getUINativeModule(): any {
 
 enum ModifierType {
   ORIGIN = 0,
-  STATE = 1
+  STATE = 1,
+  FRAME_NODE = 2
 }
 
 type AttributeModifierWithKey = ModifierWithKey<number | string | boolean | object>;
 
+class ObservedMap {
+  private map_: Map<Symbol, AttributeModifierWithKey>;
+  private changeCallback: ((key: Symbol, value: AttributeModifierWithKey) => void) | undefined;
+
+  constructor() {
+    this.map_ = new Map();
+  }
+
+  public clear(): void {
+    this.map_.clear();
+  }
+
+  public delete(key: Symbol): boolean {
+    return this.map_.delete(key);
+  }
+
+  public forEach(callbackfn: (value: AttributeModifierWithKey, key: Symbol,
+    map: Map<Symbol, AttributeModifierWithKey>) => void, thisArg?: any): void {
+    this.map_.forEach(callbackfn, thisArg);
+  }
+  public get(key: Symbol): AttributeModifierWithKey | undefined {
+    return this.map_.get(key);
+  }
+  public has(key: Symbol): boolean {
+    return this.map_.has(key);
+  }
+  public set(key: Symbol, value: AttributeModifierWithKey): this {
+    const _a = this.changeCallback;
+    this.map_.set(key, value);
+    _a === null || _a === void 0 ? void 0 : _a(key, value);
+    return this;
+  }
+  public get size(): number {
+    return this.map_.size;
+  }
+  public entries(): IterableIterator<[Symbol, AttributeModifierWithKey]> {
+    return this.map_.entries();
+  }
+  public keys(): IterableIterator<Symbol> {
+    return this.map_.keys();
+  }
+  public values(): IterableIterator<AttributeModifierWithKey> {
+    return this.map_.values();
+  }
+  public [Symbol.iterator](): IterableIterator<[Symbol, AttributeModifierWithKey]> {
+    return this.map_.entries();
+  }
+  public get [Symbol.toStringTag](): string {
+    return 'ObservedMapTag';
+  }
+  public setOnChange(callback: (key: Symbol, value: AttributeModifierWithKey) => void): void {
+    if (this.changeCallback === undefined) {
+      this.changeCallback = callback;
+    }
+  }
+}
+
 const UI_STATE_NORMAL = 0;
 const UI_STATE_PRESSED = 1;
 const UI_STATE_FOCUSED = 1 << 1;
@@ -2648,16 +2706,31 @@ class ArkComponent implements CommonMethod<CommonAttribute> {
 
   constructor(nativePtr: KNode, classType?: ModifierType) {
     this._modifiers = new Map();
-    this._modifiersWithKeys = new Map();
     this.nativePtr = nativePtr;
     this._changed = false;
     this._classType = classType;
+    if (classType === ModifierType.FRAME_NODE) {
+      this._modifiersWithKeys = new ObservedMap();
+      (this._modifiersWithKeys as ObservedMap).setOnChange((key, value) => {
+        if (this.nativePtr === undefined) {
+          return;
+        }
+        value.applyStage(this.nativePtr);
+        getUINativeModule().frameNode.propertyUpdate(this.nativePtr);
+      })
+    } else {
+      this._modifiersWithKeys = new Map();
+    }
     if (classType === ModifierType.STATE) {
       this._weakPtr = getUINativeModule().nativeUtils.createNativeWeakRef(nativePtr);
     }
     this._nativePtrChanged = false;
   }
 
+  setNodePtr(nodePtr: KNode) {
+    this.nativePtr = nodePtr;
+  }
+
   getOrCreateGestureEvent() {
     if (this._gestureEvent !== null) {
       this._gestureEvent = new UIGestureEvent();
diff --git a/frameworks/bridge/declarative_frontend/ark_component/src/ArkRow.ts b/frameworks/bridge/declarative_frontend/ark_component/src/ArkRow.ts
index 19697a6c9269c2ad8a72ee5cbdc326084bdfa3e7..7c991e1163621670b716463aba809e7f634f9af7 100644
--- a/frameworks/bridge/declarative_frontend/ark_component/src/ArkRow.ts
+++ b/frameworks/bridge/declarative_frontend/ark_component/src/ArkRow.ts
@@ -48,10 +48,37 @@ class RowJustifyContentlModifier extends ModifierWithKey<number> {
   }
 }
 
+class RowSpaceModifier extends ModifierWithKey<string | number> {
+  constructor(value: string | number) {
+    super(value);
+  }
+  static identity:Symbol = Symbol('rowSpace');
+  applyPeer(node: KNode, reset: boolean): void {
+    if (reset) {
+      getUINativeModule().row.resetSpace(node);
+    }
+    else {
+      getUINativeModule().row.setSpace(node, this.value);
+    }
+  }
+  checkObjectDiff() : boolean {
+    return this.stageValue !== this.value;
+  }
+}
+interface RowParam {
+  space: string | number;
+}
+
 class ArkRowComponent extends ArkComponent implements RowAttribute {
   constructor(nativePtr: KNode, classType?: ModifierType) {
     super(nativePtr, classType);
   }
+  initialize(value: Object[]): RowAttribute {
+    if (value[0] !== undefined) {
+      modifierWithKey(this._modifiersWithKeys, RowSpaceModifier.identity, RowSpaceModifier, (value[0] as RowParam).space);
+    }
+    return this
+  }
   alignItems(value: VerticalAlign): RowAttribute {
     modifierWithKey(this._modifiersWithKeys, RowAlignItemsModifier.identity, RowAlignItemsModifier, value);
     return this;
diff --git a/frameworks/bridge/declarative_frontend/ark_component/src/ArkStack.ts b/frameworks/bridge/declarative_frontend/ark_component/src/ArkStack.ts
index 5fc5ec79c200463d885d12d335997c7e0064f78b..90817eecffb80463909cfc06a4205bb9efcc461b 100644
--- a/frameworks/bridge/declarative_frontend/ark_component/src/ArkStack.ts
+++ b/frameworks/bridge/declarative_frontend/ark_component/src/ArkStack.ts
@@ -14,10 +14,21 @@
  */
 
 /// <reference path='./import.ts' />
+
+interface StackParam {
+  alignContent: Alignment
+}
+
 class ArkStackComponent extends ArkComponent implements StackAttribute {
   constructor(nativePtr: KNode, classType?: ModifierType) {
     super(nativePtr, classType);
   }
+  initialize(value: Object[]): StackAttribute {
+    if (value[0] !== undefined) {
+      this.alignContent((value[0] as StackParam).alignContent);
+    }
+    return this
+  }
   alignContent(value: Alignment): StackAttribute {
     modifierWithKey(this._modifiersWithKeys, StackAlignContentModifier.identity, StackAlignContentModifier, value);
     return this;
diff --git a/frameworks/bridge/declarative_frontend/ark_component/src/ArkText.ts b/frameworks/bridge/declarative_frontend/ark_component/src/ArkText.ts
index 252f0b6e74f6f76dbdc9dec6f2c523e8281788e3..3d9869b7fa05e2f6b26a77c1a9fac3c134c303e1 100644
--- a/frameworks/bridge/declarative_frontend/ark_component/src/ArkText.ts
+++ b/frameworks/bridge/declarative_frontend/ark_component/src/ArkText.ts
@@ -540,10 +540,29 @@ class TextFontFeatureModifier extends ModifierWithKey<FontFeature> {
   }
 }
 
+class TextContentModifier extends ModifierWithKey<string | Resource> {
+  constructor(value: string | Resource) {
+    super(value);
+  }
+  static identity: Symbol = Symbol('textContent');
+  applyPeer(node: KNode, reset: boolean): void {
+    if (reset) {
+      getUINativeModule().text.setContent(node, "");
+    }
+    else {
+      getUINativeModule().text.setContent(node, this.value);
+    }
+  }
+}
+
 class ArkTextComponent extends ArkComponent implements TextAttribute {
   constructor(nativePtr: KNode, classType?: ModifierType) {
     super(nativePtr, classType);
   }
+  initialize(value: Object[]) {
+    modifierWithKey(this._modifiersWithKeys, TextContentModifier.identity, TextContentModifier, value[0]);
+    return this;
+  }
   enableDataDetector(value: boolean): this {
     modifierWithKey(this._modifiersWithKeys, TextEnableDataDetectorModifier.identity, TextEnableDataDetectorModifier, value);
     return this;
diff --git a/frameworks/bridge/declarative_frontend/ark_node/src/frame_node.ts b/frameworks/bridge/declarative_frontend/ark_node/src/frame_node.ts
index dd817d2c86e8a20e8d7224bab9c4ca856f3ac6c7..f2b6f00061e35e2a7d3b72e84ccbd30c3196c9ff 100644
--- a/frameworks/bridge/declarative_frontend/ark_node/src/frame_node.ts
+++ b/frameworks/bridge/declarative_frontend/ark_node/src/frame_node.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2023-2024 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -12,83 +12,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class FrameNodeAttributeMap {
-  private map_: Map<Symbol, ModifierWithKey<number | string | boolean | object>>;
-  private changeCallback: ((key: Symbol, value: ModifierWithKey<number | string | boolean | object>) => void) | undefined;
-
-  constructor() {
-    this.map_ = new Map();
-  }
-
-  public clear(): void {
-    this.map_.clear();
-  }
-
-  public delete(key: Symbol): boolean {
-    return this.map_.delete(key);
-  }
-
-  public forEach(callbackfn: (value: ModifierWithKey<number | string | boolean | object>, key: Symbol,
-    map: Map<Symbol, ModifierWithKey<number | string | boolean | object>>) => void, thisArg?: any): void {
-    this.map_.forEach(callbackfn, thisArg);
-  }
-  public get(key: Symbol): ModifierWithKey<number | string | boolean | object> | undefined {
-    return this.map_.get(key);
-  }
-  public has(key: Symbol): boolean {
-    return this.map_.has(key);
-  }
-  public set(key: Symbol, value: ModifierWithKey<number | string | boolean | object>): this {
-    const _a = this.changeCallback;
-    this.map_.set(key, value);
-    _a === null || _a === void 0 ? void 0 : _a(key, value);
-    return this;
-  }
-  public get size(): number {
-    return this.map_.size;
-  }
-  public entries(): IterableIterator<[Symbol, ModifierWithKey<number | string | boolean | object>]> {
-    return this.map_.entries();
-  }
-  public keys(): IterableIterator<Symbol> {
-    return this.map_.keys();
-  }
-  public values(): IterableIterator<ModifierWithKey<number | string | boolean | object>> {
-    return this.map_.values();
-  }
-  public [Symbol.iterator](): IterableIterator<[Symbol, ModifierWithKey<number | string | boolean | object>]> {
-    return this.map_.entries();
-  }
-  public get [Symbol.toStringTag](): string {
-    return 'FrameNodeAttributeMapTag';
-  }
-  public setOnChange(callback: (key: Symbol, value: ModifierWithKey<number | string | boolean | object>) => void): void {
-    if (this.changeCallback === undefined) {
-      this.changeCallback = callback;
-    }
-  }
-}
-
-class FrameNodeModifier extends ArkComponent {
-  constructor(nodePtr: NodePtr) {
-    super(nodePtr);
-    this._modifiersWithKeys = new FrameNodeAttributeMap();
-    this._modifiersWithKeys.setOnChange((key, value) => {
-      if (this.nativePtr === undefined) {
-        return;
-      }
-      value.applyStage(this.nativePtr);
-      getUINativeModule().frameNode.propertyUpdate(this.nativePtr);
-    })
-  }
-  setNodePtr(nodePtr: NodePtr): void {
-    this.nativePtr = nodePtr;
-  }
-}
 
 class FrameNode {
   public _nodeId: number;
-  protected _commonAttribute: FrameNodeModifier;
+  protected _commonAttribute: ArkComponent;
   protected _commonEvent: UICommonEvent;
   protected _childList: Map<number, FrameNode>;
   protected _nativeRef: NativeStrongRef | NativeWeakRef;
@@ -119,15 +46,20 @@ class FrameNode {
     if (type === 'ProxyFrameNode') {
       return;
     }
-    this.renderNode_ = new RenderNode('CustomFrameNode');
+    let result;
     __JSScopeUtil__.syncInstanceId(this.instanceId_);
-    let result = getUINativeModule().frameNode.createFrameNode(this);
+    if (type === undefined || type === "CustomFrameNode") {
+      this.renderNode_ = new RenderNode('CustomFrameNode');
+      result = getUINativeModule().frameNode.createFrameNode(this);
+    } else {
+      result = getUINativeModule().frameNode.createTypedFrameNode(this, type);
+    }
     __JSScopeUtil__.restoreInstanceId();
     this._nativeRef = result?.nativeStrongRef;
     this._nodeId = result?.nodeId;
     this.nodePtr_ = this._nativeRef?.getNativeHandle();
-    this.renderNode_.setNodePtr(result?.nativeStrongRef);
-    this.renderNode_.setFrameNode(new WeakRef(this));
+    this.renderNode_?.setNodePtr(result?.nativeStrongRef);
+    this.renderNode_?.setFrameNode(new WeakRef(this));
     if (result === undefined || this._nodeId === -1) {
       return;
     }
@@ -390,35 +322,35 @@ class FrameNode {
   }
 
   getUserConfigSize(): SizeT<LengthMetrics> {
-      const size = getUINativeModule().frameNode.getConfigSize(this.getNodePtr());
-      return {
-        width: new LengthMetrics(size[0], size[1]),
-        height: new LengthMetrics(size[2], size[3])
+    const size = getUINativeModule().frameNode.getConfigSize(this.getNodePtr());
+    return {
+      width: new LengthMetrics(size[0], size[1]),
+      height: new LengthMetrics(size[2], size[3])
     };
   }
 
   getId(): string {
-      return getUINativeModule().frameNode.getId(this.getNodePtr());
+    return getUINativeModule().frameNode.getId(this.getNodePtr());
   }
 
   getNodeType(): string {
-      return getUINativeModule().frameNode.getNodeType(this.getNodePtr());
+    return getUINativeModule().frameNode.getNodeType(this.getNodePtr());
   }
 
   getOpacity(): number {
-      return getUINativeModule().frameNode.getOpacity(this.getNodePtr());
+    return getUINativeModule().frameNode.getOpacity(this.getNodePtr());
   }
 
   isVisible(): boolean {
-      return getUINativeModule().frameNode.isVisible(this.getNodePtr());
+    return getUINativeModule().frameNode.isVisible(this.getNodePtr());
   }
 
   isClipToFrame(): boolean {
-      return getUINativeModule().frameNode.isClipToFrame(this.getNodePtr());
+    return getUINativeModule().frameNode.isClipToFrame(this.getNodePtr());
   }
 
   isAttached(): boolean {
-      return getUINativeModule().frameNode.isAttached(this.getNodePtr());
+    return getUINativeModule().frameNode.isAttached(this.getNodePtr());
   }
 
   getInspectorInfo(): Object {
@@ -429,7 +361,7 @@ class FrameNode {
 
   get commonAttribute(): ArkComponent {
     if (this._commonAttribute === undefined) {
-      this._commonAttribute = new FrameNodeModifier(this.nodePtr_);
+      this._commonAttribute = new ArkComponent(this.nodePtr_, ModifierType.FRAME_NODE);
     }
     this._commonAttribute.setNodePtr(this.nodePtr_);
     return this._commonAttribute;
@@ -467,7 +399,7 @@ class ImmutableFrameNode extends FrameNode {
   }
   get commonAttribute(): ArkComponent {
     if (this._commonAttribute === undefined) {
-      this._commonAttribute = new FrameNodeModifier(undefined);
+      this._commonAttribute = new ArkComponent(undefined, ModifierType.FRAME_NODE);
     }
     this._commonAttribute.setNodePtr(undefined);
     return this._commonAttribute;
@@ -542,3 +474,60 @@ class FrameNodeUtils {
     return null;
   }
 }
+
+class TypedFrameNode<T extends ArkComponent> extends FrameNode {
+  attribute_: T;
+  attrCreator_: (node: NodePtr, type: ModifierType) => T
+
+  constructor(uiContext: UIContext, type: string, attrCreator: (node: NodePtr, type: ModifierType) => T) {
+    super(uiContext, type)
+    this.attrCreator_ = attrCreator;
+  }
+
+  initialize(...args: Object[]): T {
+    return this.attribute.initialize(args);
+  }
+
+  get attribute(): T {
+    if (this.attribute_ === undefined) {
+      this.attribute_ = this.attrCreator_(this.nodePtr_, ModifierType.FRAME_NODE);
+    }
+    this.attribute_.setNodePtr(this.nodePtr_);
+    return this.attribute_;
+  }
+}
+
+const __creatorMap__ = new Map<string, (context: UIContext) => FrameNode>(
+  [
+    ["Text", (context: UIContext) => {
+      return new TypedFrameNode(context, "Text", (node: NodePtr, type: ModifierType) => {
+        return new ArkTextComponent(node, type);
+      })
+    }],
+    ["Column", (context: UIContext) => {
+      return new TypedFrameNode(context, "Column", (node: NodePtr, type: ModifierType) => {
+        return new ArkColumnComponent(node, type);
+      })
+    }],
+    ["Row", (context: UIContext) => {
+      return new TypedFrameNode(context, "Row", (node: NodePtr, type: ModifierType) => {
+        return new ArkRowComponent(node, type);
+      })
+    }],
+    ["Stack", (context: UIContext) => {
+      return new TypedFrameNode(context, "Stack", (node: NodePtr, type: ModifierType) => {
+        return new ArkStackComponent(node, type);
+      })
+    }],
+  ]
+)
+
+class TypedNode {
+  static createNode(context: UIContext, type: string): FrameNode {
+    let creator = __creatorMap__.get(type)
+    if (creator === undefined) {
+      return undefined
+    }
+    return creator(context);
+  }
+}
diff --git a/frameworks/bridge/declarative_frontend/ark_node/src/index.d.ts b/frameworks/bridge/declarative_frontend/ark_node/src/index.d.ts
index 15d902c76a3ca105a0aef19c0ad9913d6b02d440..b489e9e27f0e3c984f6b75a1e8e1fa910427e865 100644
--- a/frameworks/bridge/declarative_frontend/ark_node/src/index.d.ts
+++ b/frameworks/bridge/declarative_frontend/ark_node/src/index.d.ts
@@ -103,12 +103,27 @@ declare interface CommonAttribute { }
 
 declare interface AttributeModifier<T> { }
 
+declare enum ModifierType {
+  ORIGIN = 0,
+  STATE = 1,
+  FRAME_NODE = 2,
+}
+
 declare class ArkComponent {
   nativePtr: NodePtr;
-  _modifiersWithKeys: FrameNodeAttributeMap;
-  constructor(nativePtr: NodePtr);
+  constructor(nativePtr: NodePtr, classType?: ModifierType);
+  setNodePtr(noed: NodePtr);
+  initialize(...args: Object[]);
 }
 
+declare class ArkTextComponent extends ArkComponent {}
+
+declare class ArkColumnComponent extends ArkComponent {}
+
+declare class ArkRowComponent extends ArkComponent {}
+
+declare class ArkStackComponent extends ArkComponent {}
+
 declare class UICommonEvent {
   private _nodePtr: NodePtr;
   private _instanceId: number;
diff --git a/frameworks/bridge/declarative_frontend/engine/arkComponent.js b/frameworks/bridge/declarative_frontend/engine/arkComponent.js
index b1c0e86fcc2323dacb25cb0fbd9cc0e6e9accb47..9b69af7db409c5a90ac625f390f9ae1c06dd7ef1 100644
--- a/frameworks/bridge/declarative_frontend/engine/arkComponent.js
+++ b/frameworks/bridge/declarative_frontend/engine/arkComponent.js
@@ -25,6 +25,7 @@ let ModifierType;
 (function (ModifierType) {
     ModifierType[ModifierType['ORIGIN'] = 0] = 'ORIGIN';
     ModifierType[ModifierType['STATE'] = 1] = 'STATE';
+    ModifierType[ModifierType['FRAME_NODE'] = 1] = 'FRAME_NODE';
 })(ModifierType || (ModifierType = {}));
 const UI_STATE_NORMAL = 0;
 const UI_STATE_PRESSED = 1;
@@ -2569,18 +2570,83 @@ function modifierWithKey(modifiers, identity, modifierClass, value) {
     modifiers.set(identity, new modifierClass(value));
   }
 }
+
+class ObservedMap {
+  constructor() {
+      this.map_ = new Map();
+  }
+  clear() {
+      this.map_.clear();
+  }
+  delete(key) {
+      return this.map_.delete(key);
+  }
+  forEach(callbackfn, thisArg) {
+      this.map_.forEach(callbackfn, thisArg);
+  }
+  get(key) {
+      return this.map_.get(key);
+  }
+  has(key) {
+      return this.map_.has(key);
+  }
+  set(key, value) {
+      const _a = this.changeCallback;
+      this.map_.set(key, value);
+      _a === null || _a === void 0 ? void 0 : _a(key, value);
+      return this;
+  }
+  get size() {
+      return this.map_.size;
+  }
+  entries() {
+      return this.map_.entries();
+  }
+  keys() {
+      return this.map_.keys();
+  }
+  values() {
+      return this.map_.values();
+  }
+  [Symbol.iterator]() {
+      return this.map_.entries();
+  }
+  get [Symbol.toStringTag]() {
+      return 'ObservedMapTag';
+  }
+  setOnChange(callback) {
+      if (this.changeCallback === undefined) {
+          this.changeCallback = callback;
+      }
+  }
+}
+
 class ArkComponent {
   constructor(nativePtr, classType) {
     this._modifiers = new Map();
-    this._modifiersWithKeys = new Map();
     this.nativePtr = nativePtr;
     this._changed = false;
     this._classType = classType;
+    if (classType === ModifierType.FRAME_NODE) {
+      this._modifiersWithKeys = new ObservedMap();
+      this._modifiersWithKeys.setOnChange((key, value) => {
+        if (this.nativePtr === undefined) {
+          return;
+        }
+        value.applyStage(this.nativePtr);
+        getUINativeModule().frameNode.propertyUpdate(this.nativePtr);
+      })
+    } else {
+      this._modifiersWithKeys = new Map();
+    }
     if (classType === ModifierType.STATE) {
       this._weakPtr = getUINativeModule().nativeUtils.createNativeWeakRef(nativePtr);
     }
     this._nativePtrChanged = false;
   }
+  setNodePtr(nodePtr) {
+    this.nativePtr = nodePtr;
+  }
   getOrCreateGestureEvent() {
     if (this._gestureEvent !== null) {
       this._gestureEvent = new UIGestureEvent();
@@ -4141,10 +4207,35 @@ class ColumnJustifyContentModifier extends ModifierWithKey {
   }
 }
 ColumnJustifyContentModifier.identity = Symbol('columnJustifyContent');
+
+class ColumnSpaceModifier extends ModifierWithKey {
+  constructor(value) {
+    super(value);
+  }
+  applyPeer(node, reset) {
+    if (reset) {
+      getUINativeModule().column.resetSpace(node);
+    }
+    else {
+      getUINativeModule().column.setSpace(node, this.value);
+    }
+  }
+  checkObjectDiff() {
+    return this.stageValue !== this.value;
+  }
+}
+ColumnSpaceModifier.identity = Symbol('columnSpace');
+
 class ArkColumnComponent extends ArkComponent {
   constructor(nativePtr, classType) {
     super(nativePtr, classType);
   }
+  initialize(value) {
+    if (value[0] !== undefined) {
+      modifierWithKey(this._modifiersWithKeys, ColumnSpaceModifier.identity, ColumnSpaceModifier, value[0].space);
+    }
+    return this
+  }
   alignItems(value) {
     modifierWithKey(this._modifiersWithKeys, ColumnAlignItemsModifier.identity, ColumnAlignItemsModifier, value);
     return this;
@@ -6248,10 +6339,35 @@ class RowJustifyContentlModifier extends ModifierWithKey {
   }
 }
 RowJustifyContentlModifier.identity = Symbol('rowJustifyContent');
+
+class RowSpaceModifier extends ModifierWithKey {
+  constructor(value) {
+    super(value);
+  }
+  applyPeer(node, reset) {
+    if (reset) {
+      getUINativeModule().row.resetSpace(node);
+    }
+    else {
+      getUINativeModule().row.setSpace(node, this.value);
+    }
+  }
+  checkObjectDiff() {
+    return this.stageValue !== this.value;
+  }
+}
+RowSpaceModifier.identity = Symbol('rowSpace');
+
 class ArkRowComponent extends ArkComponent {
   constructor(nativePtr, classType) {
     super(nativePtr, classType);
   }
+  initialize(value) {
+    if (value[0] !== undefined) {
+      modifierWithKey(this._modifiersWithKeys, RowSpaceModifier.identity, RowSpaceModifier, value[0].space);
+    }
+    return this
+  }
   alignItems(value) {
     modifierWithKey(this._modifiersWithKeys, RowAlignItemsModifier.identity, RowAlignItemsModifier, value);
     return this;
@@ -7912,6 +8028,12 @@ class ArkStackComponent extends ArkComponent {
   constructor(nativePtr, classType) {
     super(nativePtr, classType);
   }
+  initialize(value) {
+    if (value[0] !== undefined) {
+      this.alignContent(value[0].alignContent);
+    }
+    return this
+  }
   alignContent(value) {
     modifierWithKey(this._modifiersWithKeys, StackAlignContentModifier.identity, StackAlignContentModifier, value);
     return this;
@@ -8478,10 +8600,30 @@ class TextClipModifier extends ModifierWithKey {
   }
 }
 TextClipModifier.identity = Symbol('textClip');
+
+class TextContentModifier extends ModifierWithKey {
+  constructor(value) {
+    super(value);
+  }
+  applyPeer(node, reset) {
+    if (reset) {
+      getUINativeModule().text.setContent(node, "");
+    }
+    else {
+      getUINativeModule().text.setContent(node, this.value);
+    }
+  }
+}
+TextContentModifier.identity = Symbol('textContent');
+
 class ArkTextComponent extends ArkComponent {
   constructor(nativePtr, classType) {
     super(nativePtr, classType);
   }
+  initialize(content) {
+    modifierWithKey(this._modifiersWithKeys, TextContentModifier.identity, TextContentModifier, content[0]);
+    return this;
+  }
   enableDataDetector(value) {
     modifierWithKey(this._modifiersWithKeys, TextEnableDataDetectorModifier.identity, TextEnableDataDetectorModifier, value);
     return this;
diff --git a/frameworks/bridge/declarative_frontend/engine/jsXNode.js b/frameworks/bridge/declarative_frontend/engine/jsXNode.js
index e1dea97f5577222aa0b0ab885b2854ca3ab73444..9bc0f42c307b5721616470ca310d57ed53783b33 100644
--- a/frameworks/bridge/declarative_frontend/engine/jsXNode.js
+++ b/frameworks/bridge/declarative_frontend/engine/jsXNode.js
@@ -390,7 +390,7 @@ class NodeController {
     }
 }
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2023-2024 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -403,74 +403,9 @@ class NodeController {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class FrameNodeAttributeMap {
-    constructor() {
-        this.map_ = new Map();
-    }
-    clear() {
-        this.map_.clear();
-    }
-    delete(key) {
-        return this.map_.delete(key);
-    }
-    forEach(callbackfn, thisArg) {
-        this.map_.forEach(callbackfn, thisArg);
-    }
-    get(key) {
-        return this.map_.get(key);
-    }
-    has(key) {
-        return this.map_.has(key);
-    }
-    set(key, value) {
-        const _a = this.changeCallback;
-        this.map_.set(key, value);
-        _a === null || _a === void 0 ? void 0 : _a(key, value);
-        return this;
-    }
-    get size() {
-        return this.map_.size;
-    }
-    entries() {
-        return this.map_.entries();
-    }
-    keys() {
-        return this.map_.keys();
-    }
-    values() {
-        return this.map_.values();
-    }
-    [Symbol.iterator]() {
-        return this.map_.entries();
-    }
-    get [Symbol.toStringTag]() {
-        return 'FrameNodeAttributeMapTag';
-    }
-    setOnChange(callback) {
-        if (this.changeCallback === undefined) {
-            this.changeCallback = callback;
-        }
-    }
-}
-class FrameNodeModifier extends ArkComponent {
-    constructor(nodePtr) {
-        super(nodePtr);
-        this._modifiersWithKeys = new FrameNodeAttributeMap();
-        this._modifiersWithKeys.setOnChange((key, value) => {
-            if (this.nativePtr === undefined) {
-                return;
-            }
-            value.applyStage(this.nativePtr);
-            getUINativeModule().frameNode.propertyUpdate(this.nativePtr);
-        });
-    }
-    setNodePtr(nodePtr) {
-        this.nativePtr = nodePtr;
-    }
-}
 class FrameNode {
     constructor(uiContext, type) {
-        var _b;
+        var _a, _b, _c;
         if (uiContext === undefined) {
             throw Error('Node constructor error, param uiContext error');
         }
@@ -491,15 +426,21 @@ class FrameNode {
         if (type === 'ProxyFrameNode') {
             return;
         }
-        this.renderNode_ = new RenderNode('CustomFrameNode');
+        let result;
         __JSScopeUtil__.syncInstanceId(this.instanceId_);
-        let result = getUINativeModule().frameNode.createFrameNode(this);
+        if (type === undefined || type === "CustomFrameNode") {
+            this.renderNode_ = new RenderNode('CustomFrameNode');
+            result = getUINativeModule().frameNode.createFrameNode(this);
+        }
+        else {
+            result = getUINativeModule().frameNode.createTypedFrameNode(this, type);
+        }
         __JSScopeUtil__.restoreInstanceId();
         this._nativeRef = result === null || result === void 0 ? void 0 : result.nativeStrongRef;
         this._nodeId = result === null || result === void 0 ? void 0 : result.nodeId;
-        this.nodePtr_ = (_b = this._nativeRef) === null || _b === void 0 ? void 0 : _b.getNativeHandle();
-        this.renderNode_.setNodePtr(result === null || result === void 0 ? void 0 : result.nativeStrongRef);
-        this.renderNode_.setFrameNode(new WeakRef(this));
+        this.nodePtr_ = (_a = this._nativeRef) === null || _a === void 0 ? void 0 : _a.getNativeHandle();
+        (_b = this.renderNode_) === null || _b === void 0 ? void 0 : _b.setNodePtr(result === null || result === void 0 ? void 0 : result.nativeStrongRef);
+        (_c = this.renderNode_) === null || _c === void 0 ? void 0 : _c.setFrameNode(new WeakRef(this));
         if (result === undefined || this._nodeId === -1) {
             return;
         }
@@ -516,8 +457,8 @@ class FrameNode {
         return 'CustomFrameNode';
     }
     setRenderNode(nativeRef) {
-        var _b;
-        (_b = this.renderNode_) === null || _b === void 0 ? void 0 : _b.setNodePtr(nativeRef);
+        var _a;
+        (_a = this.renderNode_) === null || _a === void 0 ? void 0 : _a.setNodePtr(nativeRef);
     }
     getRenderNode() {
         if (this.renderNode_ !== undefined &&
@@ -542,24 +483,24 @@ class FrameNode {
         FrameNodeFinalizationRegisterProxy.register(this, this._nodeId);
     }
     resetNodePtr() {
-        var _b;
+        var _a;
         FrameNodeFinalizationRegisterProxy.ElementIdToOwningFrameNode_.delete(this._nodeId);
         this._nodeId = -1;
         this._nativeRef = null;
         this.nodePtr_ = null;
-        (_b = this.renderNode_) === null || _b === void 0 ? void 0 : _b.resetNodePtr();
+        (_a = this.renderNode_) === null || _a === void 0 ? void 0 : _a.resetNodePtr();
     }
     setBaseNode(baseNode) {
-        var _b;
+        var _a;
         this.baseNode_ = baseNode;
-        (_b = this.renderNode_) === null || _b === void 0 ? void 0 : _b.setBaseNode(baseNode);
+        (_a = this.renderNode_) === null || _a === void 0 ? void 0 : _a.setBaseNode(baseNode);
     }
     getNodePtr() {
         return this.nodePtr_;
     }
     dispose() {
-        var _b;
-        (_b = this.renderNode_) === null || _b === void 0 ? void 0 : _b.dispose();
+        var _a;
+        (_a = this.renderNode_) === null || _a === void 0 ? void 0 : _a.dispose();
         FrameNodeFinalizationRegisterProxy.ElementIdToOwningFrameNode_.delete(this._nodeId);
         this._nodeId = -1;
         this._nativeRef = null;
@@ -777,7 +718,7 @@ class FrameNode {
     }
     get commonAttribute() {
         if (this._commonAttribute === undefined) {
-            this._commonAttribute = new FrameNodeModifier(this.nodePtr_);
+            this._commonAttribute = new ArkComponent(this.nodePtr_, ModifierType.FRAME_NODE);
         }
         this._commonAttribute.setNodePtr(this.nodePtr_);
         return this._commonAttribute;
@@ -813,7 +754,7 @@ class ImmutableFrameNode extends FrameNode {
     }
     get commonAttribute() {
         if (this._commonAttribute === undefined) {
-            this._commonAttribute = new FrameNodeModifier(undefined);
+            this._commonAttribute = new ArkComponent(undefined, ModifierType.FRAME_NODE);
         }
         this._commonAttribute.setNodePtr(undefined);
         return this._commonAttribute;
@@ -848,8 +789,8 @@ class ProxyFrameNode extends ImmutableFrameNode {
         return this.nodePtr_;
     }
     dispose() {
-        var _b;
-        (_b = this.renderNode_) === null || _b === void 0 ? void 0 : _b.dispose();
+        var _a;
+        (_a = this.renderNode_) === null || _a === void 0 ? void 0 : _a.dispose();
         FrameNodeFinalizationRegisterProxy.ElementIdToOwningFrameNode_.delete(this._nodeId);
         this._nodeId = -1;
         this._nativeRef = undefined;
@@ -882,6 +823,53 @@ class FrameNodeUtils {
         return null;
     }
 }
+class TypedFrameNode extends FrameNode {
+    constructor(uiContext, type, attrCreator) {
+        super(uiContext, type);
+        this.attrCreator_ = attrCreator;
+    }
+    initialize(...args) {
+        return this.attribute.initialize(args);
+    }
+    get attribute() {
+        if (this.attribute_ === undefined) {
+            this.attribute_ = this.attrCreator_(this.nodePtr_, ModifierType.FRAME_NODE);
+        }
+        this.attribute_.setNodePtr(this.nodePtr_);
+        return this.attribute_;
+    }
+}
+const __creatorMap__ = new Map([
+    ["Text", (context) => {
+            return new TypedFrameNode(context, "Text", (node, type) => {
+                return new ArkTextComponent(node, type);
+            });
+        }],
+    ["Column", (context) => {
+            return new TypedFrameNode(context, "Column", (node, type) => {
+                return new ArkColumnComponent(node, type);
+            });
+        }],
+    ["Row", (context) => {
+            return new TypedFrameNode(context, "Row", (node, type) => {
+                return new ArkRowComponent(node, type);
+            });
+        }],
+    ["Stack", (context) => {
+            return new TypedFrameNode(context, "Stack", (node, type) => {
+                return new ArkStackComponent(node, type);
+            });
+        }],
+]);
+class TypedNode {
+    static createNode(context, type) {
+        let creator = __creatorMap__.get(type);
+        if (creator === undefined) {
+            return undefined;
+        }
+        return creator(context);
+    }
+}
 /*
  * Copyright (c) 2023 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1492,5 +1480,5 @@ class ComponentContent {
 export default {
     NodeController, BuilderNode, BaseNode, RenderNode, FrameNode, FrameNodeUtils,
     NodeRenderType, XComponentNode, LengthMetrics, ColorMetrics, LengthUnit, ShapeMask,
-    edgeColors, edgeWidths, borderStyles, borderRadiuses, ComponentContent
+    edgeColors, edgeWidths, borderStyles, borderRadiuses, ComponentContent, TypedNode
 };
diff --git a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_api_impl_bridge.cpp b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_api_impl_bridge.cpp
index 53ef0cb7caf82c9bea68a18f36b5474d6c2bdf7a..4d665d95920b3305dc3da8eab0ab8ddfb5b65376 100644
--- a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_api_impl_bridge.cpp
+++ b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_api_impl_bridge.cpp
@@ -812,6 +812,10 @@ ArkUINativeModuleValue ArkUINativeModule::GetArkUINativeModule(ArkUIRuntimeCallI
         panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), RowBridge::SetJustifyContent));
     row->Set(vm, panda::StringRef::NewFromUtf8(vm, "resetJustifyContent"),
         panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), RowBridge::ResetJustifyContent));
+    row->Set(vm, panda::StringRef::NewFromUtf8(vm, "setSpace"),
+        panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), RowBridge::SetSpace));
+    row->Set(vm, panda::StringRef::NewFromUtf8(vm, "resetSpace"),
+        panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), RowBridge::ResetSpace));
     object->Set(vm, panda::StringRef::NewFromUtf8(vm, "row"), row);
 
     auto rowSplit = panda::ObjectRef::New(vm);
@@ -884,6 +888,8 @@ ArkUINativeModuleValue ArkUINativeModule::GetArkUINativeModule(ArkUIRuntimeCallI
         panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), TextBridge::ResetCopyOption));
     text->Set(vm, panda::StringRef::NewFromUtf8(vm, "setTextShadow"),
         panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), TextBridge::SetTextShadow));
+    text->Set(vm, panda::StringRef::NewFromUtf8(vm, "setContent"),
+        panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), TextBridge::SetContent));
     text->Set(vm, panda::StringRef::NewFromUtf8(vm, "resetTextShadow"),
         panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), TextBridge::ResetTextShadow));
     text->Set(vm, panda::StringRef::NewFromUtf8(vm, "setHeightAdaptivePolicy"),
@@ -1127,6 +1133,10 @@ ArkUINativeModuleValue ArkUINativeModule::GetArkUINativeModule(ArkUIRuntimeCallI
         panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), ColumnBridge::SetAlignItems));
     column->Set(vm, panda::StringRef::NewFromUtf8(vm, "resetAlignItems"),
         panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), ColumnBridge::ResetAlignItems));
+    column->Set(vm, panda::StringRef::NewFromUtf8(vm, "setSpace"),
+        panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), ColumnBridge::SetSpace));
+    column->Set(vm, panda::StringRef::NewFromUtf8(vm, "resetSpace"),
+        panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), ColumnBridge::ResetSpace));
     object->Set(vm, panda::StringRef::NewFromUtf8(vm, "column"), column);
 
     auto gridRow = panda::ObjectRef::New(vm);
@@ -2443,6 +2453,8 @@ void ArkUINativeModule::RegisterFrameNodeAttributes(Local<panda::ObjectRef> obje
         panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), FrameNodeBridge::IsModifiable));
     frameNode->Set(vm, panda::StringRef::NewFromUtf8(vm, "createFrameNode"),
         panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), FrameNodeBridge::CreateFrameNode));
+        frameNode->Set(vm, panda::StringRef::NewFromUtf8(vm, "createTypedFrameNode"),
+        panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), FrameNodeBridge::CreateTypedFrameNode));
     frameNode->Set(vm, panda::StringRef::NewFromUtf8(vm, "invalidate"),
         panda::FunctionRef::New(const_cast<panda::EcmaVM*>(vm), FrameNodeBridge::Invalidate));
     frameNode->Set(vm, panda::StringRef::NewFromUtf8(vm, "appendChild"),
diff --git a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_column_bridge.cpp b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_column_bridge.cpp
index 961bd7557bcaf930e639bcb3485f9c3c9eb110ae..bf9a09c0f008ea534fb7edf2b7e1ececfecc79d0 100644
--- a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_column_bridge.cpp
+++ b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_column_bridge.cpp
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 #include "bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_column_bridge.h"
+
+#include "bridge/declarative_frontend/engine/jsi/nativeModule/arkts_utils.h"
 #include "core/components/common/layout/constants.h"
 
 namespace OHOS::Ace::NG {
@@ -66,8 +68,7 @@ ArkUINativeModuleValue ColumnBridge::SetAlignItems(ArkUIRuntimeCallInfo* runtime
         value = secondArg->Int32Value(vm);
         if ((value == static_cast<int32_t>(FlexAlign::FLEX_START)) ||
             (value == static_cast<int32_t>(FlexAlign::FLEX_END)) ||
-            (value == static_cast<int32_t>(FlexAlign::CENTER)) ||
-            (value == static_cast<int32_t>(FlexAlign::STRETCH))) {
+            (value == static_cast<int32_t>(FlexAlign::CENTER)) || (value == static_cast<int32_t>(FlexAlign::STRETCH))) {
             GetArkUINodeModifiers()->getColumnModifier()->setColumnAlignItems(nativeNode, value);
         } else if (Container::GreatOrEqualAPIVersion(PlatformVersion::VERSION_TEN)) {
             GetArkUINodeModifiers()->getColumnModifier()->resetColumnAlignItems(nativeNode);
@@ -87,4 +88,33 @@ ArkUINativeModuleValue ColumnBridge::ResetAlignItems(ArkUIRuntimeCallInfo* runti
     GetArkUINodeModifiers()->getColumnModifier()->resetColumnAlignItems(nativeNode);
     return panda::JSValueRef::Undefined(vm);
 }
+
+ArkUINativeModuleValue ColumnBridge::SetSpace(ArkUIRuntimeCallInfo* runtimeCallInfo)
+{
+    EcmaVM* vm = runtimeCallInfo->GetVM();
+    CHECK_NULL_RETURN(vm, panda::NativePointerRef::New(vm, nullptr));
+    Local<JSValueRef> firstArg = runtimeCallInfo->GetCallArgRef(NUM_0);
+    Local<JSValueRef> secondArg = runtimeCallInfo->GetCallArgRef(NUM_1);
+    auto nativeNode = nodePtr(firstArg->ToNativePointer(vm)->Value());
+    CalcDimension space;
+    ArkTSUtils::ParseJsDimensionVp(vm, secondArg, space, false);
+    if (LessNotEqual(space.Value(), 0.0)) {
+        GetArkUINodeModifiers()->getColumnModifier()->resetColumnSpace(nativeNode);
+        return panda::JSValueRef::Undefined(vm);
+    }
+    GetArkUINodeModifiers()->getColumnModifier()->setColumnSpace(
+        nativeNode, space.Value(), static_cast<int>(space.Unit()));
+    return panda::JSValueRef::Undefined(vm);
 }
+
+ArkUINativeModuleValue ColumnBridge::ResetSpace(ArkUIRuntimeCallInfo* runtimeCallInfo)
+{
+    EcmaVM* vm = runtimeCallInfo->GetVM();
+    CHECK_NULL_RETURN(vm, panda::NativePointerRef::New(vm, nullptr));
+    Local<JSValueRef> firstArg = runtimeCallInfo->GetCallArgRef(NUM_0);
+    auto nativeNode = nodePtr(firstArg->ToNativePointer(vm)->Value());
+    GetArkUINodeModifiers()->getColumnModifier()->resetColumnSpace(nativeNode);
+    return panda::JSValueRef::Undefined(vm);
+}
+
+} // namespace OHOS::Ace::NG
diff --git a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_column_bridge.h b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_column_bridge.h
index e0a6c98a97fee100c2e25f26d5aaafb31cb8264a..5940dfb67c6c8df4b708bcdcda3d5972677e0558 100644
--- a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_column_bridge.h
+++ b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_column_bridge.h
@@ -25,6 +25,8 @@ public:
     static ArkUINativeModuleValue ResetJustifyContent(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue SetAlignItems(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue ResetAlignItems(ArkUIRuntimeCallInfo* runtimeCallInfo);
+    static ArkUINativeModuleValue SetSpace(ArkUIRuntimeCallInfo* runtimeCallInfo);
+    static ArkUINativeModuleValue ResetSpace(ArkUIRuntimeCallInfo* runtimeCallInfo);
 };
 }
 
diff --git a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_frame_node_bridge.cpp b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_frame_node_bridge.cpp
index a9d21f21a0953838b592cd9e87d22893df552f3c..ced66d89d9ee4349ccfd7d7bf717027042476f63 100644
--- a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_frame_node_bridge.cpp
+++ b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_frame_node_bridge.cpp
@@ -17,12 +17,16 @@
 
 #include "jsnapi_expo.h"
 
+#include "base/memory/ace_type.h"
+#include "base/utils/utils.h"
 #include "bridge/declarative_frontend/engine/jsi/jsi_types.h"
 #include "bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_render_node_bridge.h"
 #include "bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_utils_bridge.h"
+#include "core/components_ng/base/frame_node.h"
 #include "core/components_ng/base/view_abstract.h"
 #include "core/components_ng/pattern/custom_frame_node/custom_frame_node.h"
 #include "core/components_ng/pattern/custom_frame_node/custom_frame_node_pattern.h"
+#include "core/interfaces/arkoala/arkoala_api.h"
 
 namespace OHOS::Ace::NG {
 ArkUINodeHandle FrameNodeBridge::GetFrameNode(ArkUIRuntimeCallInfo* runtimeCallInfo)
@@ -110,19 +114,14 @@ ArkUINativeModuleValue FrameNodeBridge::MakeFrameNodeInfo(EcmaVM* vm, ArkUINodeH
     return obj;
 }
 
-ArkUINativeModuleValue FrameNodeBridge::CreateFrameNode(ArkUIRuntimeCallInfo* runtimeCallInfo)
+void AddAttachFuncCallback(EcmaVM* vm, const RefPtr<FrameNode>& node)
 {
-    EcmaVM* vm = runtimeCallInfo->GetVM();
-    auto nodeId = ElementRegister::GetInstance()->MakeUniqueId();
-    auto node = NG::CustomFrameNode::GetOrCreateCustomFrameNode(nodeId);
-    node->SetExclusiveEventForChild(true);
-    auto pattern = node->GetPattern<NG::CustomFrameNodePattern>();
     auto global = JSNApi::GetGlobalObject(vm);
     auto funcName = panda::StringRef::NewFromUtf8(vm, "__AttachToMainTree__");
     auto obj = global->Get(vm, funcName);
     panda::Local<panda::FunctionRef> attachFunc = obj;
     if (obj->IsFunction()) {
-        pattern->SetOnAttachFunc([vm, func = panda::CopyableGlobal(vm, attachFunc)](int32_t nodeId) {
+        node->SetOnAttachFunc([vm, func = panda::CopyableGlobal(vm, attachFunc)](int32_t nodeId) {
             panda::Local<panda::JSValueRef> params[] = { panda::NumberRef::New(vm, nodeId) };
             func->Call(vm, func.ToLocal(), params, ArraySize(params));
         });
@@ -131,11 +130,20 @@ ArkUINativeModuleValue FrameNodeBridge::CreateFrameNode(ArkUIRuntimeCallInfo* ru
     obj = global->Get(vm, funcName);
     panda::Local<panda::FunctionRef> detachFunc = obj;
     if (detachFunc->IsFunction()) {
-        pattern->SetOnDetachFunc([vm, func = panda::CopyableGlobal(vm, detachFunc)](int32_t nodeId) {
+        node->SetOnDetachFunc([vm, func = panda::CopyableGlobal(vm, detachFunc)](int32_t nodeId) {
             panda::Local<panda::JSValueRef> params[] = { panda::NumberRef::New(vm, nodeId) };
             func->Call(vm, func.ToLocal(), params, ArraySize(params));
         });
     }
+}
+
+ArkUINativeModuleValue FrameNodeBridge::CreateFrameNode(ArkUIRuntimeCallInfo* runtimeCallInfo)
+{
+    EcmaVM* vm = runtimeCallInfo->GetVM();
+    auto nodeId = ElementRegister::GetInstance()->MakeUniqueId();
+    auto node = NG::CustomFrameNode::GetOrCreateCustomFrameNode(nodeId);
+    node->SetExclusiveEventForChild(true);
+    AddAttachFuncCallback(vm, node);
     FrameNodeBridge::SetDrawFunc(node, runtimeCallInfo);
     const char* keys[] = { "nodeId", "nativeStrongRef" };
     Local<JSValueRef> values[] = { panda::NumberRef::New(vm, nodeId), NativeUtilsBridge::CreateStrongRef(vm, node) };
@@ -143,6 +151,37 @@ ArkUINativeModuleValue FrameNodeBridge::CreateFrameNode(ArkUIRuntimeCallInfo* ru
     return reslut;
 }
 
+ArkUINativeModuleValue FrameNodeBridge::CreateTypedFrameNode(ArkUIRuntimeCallInfo* runtimeCallInfo)
+{
+    EcmaVM* vm = runtimeCallInfo->GetVM();
+    auto nodeId = ElementRegister::GetInstance()->MakeUniqueId();
+    Local<JSValueRef> firstArg = runtimeCallInfo->GetCallArgRef(1);
+    std::string type = firstArg->IsString() ? firstArg->ToString(vm)->ToString() : "";
+    static const std::unordered_map<std::string, ArkUINodeType> typeMap = { { "Text", ARKUI_TEXT },
+        { "Column", ARKUI_COLUMN }, { "Row", ARKUI_ROW }, { "Stack", ARKUI_STACK } };
+    ArkUINodeType nodeType = ARKUI_CUSTOM;
+    RefPtr<FrameNode> node;
+    auto iter = typeMap.find(type);
+    if (iter != typeMap.end()) {
+        nodeType = iter->second;
+        if (nodeType != ARKUI_CUSTOM) {
+            auto nodePtr = GetArkUIFullNodeAPI()->getBasicAPI()->createNode(nodeType, nodeId, 0);
+            // let 'node' take the reference, so decrease ref of C node
+            node = AceType::Claim(reinterpret_cast<FrameNode*>(nodePtr));
+            node->DecRefCount();
+            if (node) {
+                node->SetExclusiveEventForChild(true);
+                AddAttachFuncCallback(vm, node);
+            }
+        }
+    }
+
+    const char* keys[] = { "nodeId", "nativeStrongRef" };
+    Local<JSValueRef> values[] = { panda::NumberRef::New(vm, nodeId), NativeUtilsBridge::CreateStrongRef(vm, node) };
+    auto reslut = panda::ObjectRef::NewWithNamedProperties(vm, ArraySize(keys), keys, values);
+    return reslut;
+}
+
 ArkUINativeModuleValue FrameNodeBridge::Invalidate(ArkUIRuntimeCallInfo* runtimeCallInfo)
 {
     EcmaVM* vm = runtimeCallInfo->GetVM();
@@ -356,8 +395,8 @@ ArkUINativeModuleValue FrameNodeBridge::GetConfigBorderWidth(ArkUIRuntimeCallInf
     Local<Framework::ArrayRef> valueArray = Framework::ArrayRef::New(vm, 8);
     ArkUI_Float32 borderWidthValue[4];
     ArkUI_Int32 borderWidthUnit[4];
-    GetArkUINodeModifiers()->getCommonModifier()->getBorderWidthDimension(nativeNode, borderWidthValue,
-        borderWidthUnit);
+    GetArkUINodeModifiers()->getCommonModifier()->getBorderWidthDimension(
+        nativeNode, borderWidthValue, borderWidthUnit);
     for (int i = 0; i < 4; i++) {
         Framework::ArrayRef::SetValueAt(vm, valueArray, i * 2, panda::NumberRef::New(vm, borderWidthValue[i]));
         Framework::ArrayRef::SetValueAt(vm, valueArray, i * 2 + 1, panda::NumberRef::New(vm, borderWidthUnit[i]));
diff --git a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_frame_node_bridge.h b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_frame_node_bridge.h
index f9e9b91d0a5303ad0a46385c6314c6583cffb4ae..0002a9a94ab69663c77b3e72ed8582fe092a0e2c 100644
--- a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_frame_node_bridge.h
+++ b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_frame_node_bridge.h
@@ -33,6 +33,7 @@ public:
     static ArkUINativeModuleValue MakeFrameNodeInfo(EcmaVM* vm, ArkUINodeHandle frameNode);
     static ArkUINativeModuleValue IsModifiable(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue CreateFrameNode(ArkUIRuntimeCallInfo* runtimeCallInfo);
+    static ArkUINativeModuleValue CreateTypedFrameNode(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue Invalidate(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue AppendChild(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue InsertChildAfter(ArkUIRuntimeCallInfo* runtimeCallInfo);
diff --git a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_row_bridge.cpp b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_row_bridge.cpp
index 95b6a8b9f1937b905cd60475e377bff060b83132..e4c847750ee370a315a413f67eef1256b634a5aa 100644
--- a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_row_bridge.cpp
+++ b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_row_bridge.cpp
@@ -13,7 +13,9 @@
  * limitations under the License.
  */
 #include "bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_row_bridge.h"
+
 #include "base/geometry/dimension.h"
+#include "bridge/declarative_frontend/engine/jsi/nativeModule/arkts_utils.h"
 
 namespace OHOS::Ace::NG {
 ArkUINativeModuleValue RowBridge::SetAlignItems(ArkUIRuntimeCallInfo* runtimeCallInfo)
@@ -83,4 +85,32 @@ ArkUINativeModuleValue RowBridge::ResetJustifyContent(ArkUIRuntimeCallInfo* runt
     GetArkUINodeModifiers()->getRowModifier()->resetRowJustifyContent(nativeNode);
     return panda::JSValueRef::Undefined(vm);
 }
+
+ArkUINativeModuleValue RowBridge::SetSpace(ArkUIRuntimeCallInfo* runtimeCallInfo)
+{
+    EcmaVM* vm = runtimeCallInfo->GetVM();
+    CHECK_NULL_RETURN(vm, panda::NativePointerRef::New(vm, nullptr));
+    Local<JSValueRef> firstArg = runtimeCallInfo->GetCallArgRef(0);
+    Local<JSValueRef> secondArg = runtimeCallInfo->GetCallArgRef(1);
+    auto nativeNode = nodePtr(firstArg->ToNativePointer(vm)->Value());
+    CalcDimension space;
+    ArkTSUtils::ParseJsDimensionVp(vm, secondArg, space, false);
+    if (LessNotEqual(space.Value(), 0.0)) {
+        GetArkUINodeModifiers()->getRowModifier()->resetRowSpace(nativeNode);
+        return panda::JSValueRef::Undefined(vm);
+    }
+    GetArkUINodeModifiers()->getRowModifier()->setRowSpace(nativeNode, space.Value(), static_cast<int>(space.Unit()));
+    return panda::JSValueRef::Undefined(vm);
+}
+
+ArkUINativeModuleValue RowBridge::ResetSpace(ArkUIRuntimeCallInfo* runtimeCallInfo)
+{
+    EcmaVM* vm = runtimeCallInfo->GetVM();
+    CHECK_NULL_RETURN(vm, panda::NativePointerRef::New(vm, nullptr));
+    Local<JSValueRef> firstArg = runtimeCallInfo->GetCallArgRef(0);
+    auto nativeNode = nodePtr(firstArg->ToNativePointer(vm)->Value());
+    GetArkUINodeModifiers()->getRowModifier()->resetRowSpace(nativeNode);
+    return panda::JSValueRef::Undefined(vm);
 }
+
+} // namespace OHOS::Ace::NG
diff --git a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_row_bridge.h b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_row_bridge.h
index 74a9f2c2c4bb65c17938a4d4a7b7ea4c610d7e6b..dd3c0fb8a8320d46ce52505394d53924bf96d6e0 100644
--- a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_row_bridge.h
+++ b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_row_bridge.h
@@ -25,6 +25,8 @@ public:
     static ArkUINativeModuleValue ResetJustifyContent(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue SetAlignItems(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue ResetAlignItems(ArkUIRuntimeCallInfo* runtimeCallInfo);
+    static ArkUINativeModuleValue SetSpace(ArkUIRuntimeCallInfo* runtimeCallInfo);
+    static ArkUINativeModuleValue ResetSpace(ArkUIRuntimeCallInfo* runtimeCallInfo);
 };
 }
 
diff --git a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_text_bridge.cpp b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_text_bridge.cpp
index 1d50a9b7c043d0556444de824606e71d257a7b1e..6cf8a8d0a8b24f3acf7cd1b3b46fca1a61aa8c54 100644
--- a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_text_bridge.cpp
+++ b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_text_bridge.cpp
@@ -559,6 +559,20 @@ ArkUINativeModuleValue TextBridge::ResetTextShadow(ArkUIRuntimeCallInfo* runtime
     return panda::JSValueRef::Undefined(vm);
 }
 
+ArkUINativeModuleValue TextBridge::SetContent(ArkUIRuntimeCallInfo* runtimeCallInfo)
+{
+    EcmaVM* vm = runtimeCallInfo->GetVM();
+    CHECK_NULL_RETURN(vm, panda::NativePointerRef::New(vm, nullptr));
+    Local<JSValueRef> firstArg = runtimeCallInfo->GetCallArgRef(NUM_0);
+    Local<JSValueRef> secondArg = runtimeCallInfo->GetCallArgRef(NUM_1);
+    auto nativeNode = nodePtr(firstArg->ToNativePointer(vm)->Value());
+    std::string content;
+    if (ArkTSUtils::ParseJsString(vm, secondArg, content)) {
+        GetArkUINodeModifiers()->getTextModifier()->setContent(nativeNode, content.c_str());
+    }
+    return panda::JSValueRef::Undefined(vm);
+}
+
 ArkUINativeModuleValue TextBridge::SetHeightAdaptivePolicy(ArkUIRuntimeCallInfo* runtimeCallInfo)
 {
     EcmaVM* vm = runtimeCallInfo->GetVM();
diff --git a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_text_bridge.h b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_text_bridge.h
index d2559f871037fdd2ab56ec22395e6ea7b53c41b1..353bb4db4c04143b6c1d861b03c96a2bc416f8a9 100644
--- a/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_text_bridge.h
+++ b/frameworks/bridge/declarative_frontend/engine/jsi/nativeModule/arkts_native_text_bridge.h
@@ -53,6 +53,7 @@ public:
     static ArkUINativeModuleValue ResetCopyOption(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue SetTextShadow(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue ResetTextShadow(ArkUIRuntimeCallInfo* runtimeCallInfo);
+    static ArkUINativeModuleValue SetContent(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue SetHeightAdaptivePolicy(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue ResetHeightAdaptivePolicy(ArkUIRuntimeCallInfo* runtimeCallInfo);
     static ArkUINativeModuleValue SetTextIndent(ArkUIRuntimeCallInfo* runtimeCallInfo);
diff --git a/frameworks/core/components_ng/base/frame_node.cpp b/frameworks/core/components_ng/base/frame_node.cpp
index 80eb4af895f372cf06054825c8d2da0c08f49cd9..26a4aa7419e20cdc9e7536090a7b54cfbb4b5020 100644
--- a/frameworks/core/components_ng/base/frame_node.cpp
+++ b/frameworks/core/components_ng/base/frame_node.cpp
@@ -848,6 +848,9 @@ void FrameNode::OnAttachToMainTree(bool recursive)
     eventHub_->FireOnAppear();
     renderContext_->OnNodeAppear(recursive);
     pattern_->OnAttachToMainTree();
+    if (attachFunc_) {
+        attachFunc_(GetId());
+    }
     // node may have been measured before AttachToMainTree
     if (geometryNode_->GetParentLayoutConstraint().has_value() && !UseOffscreenProcess()) {
         layoutProperty_->UpdatePropertyChangeFlag(PROPERTY_UPDATE_MEASURE_SELF);
@@ -941,6 +944,9 @@ void FrameNode::OnDetachFromMainTree(bool recursive)
         }
     }
     pattern_->OnDetachFromMainTree();
+    if (detachFunc_) {
+        detachFunc_(GetId());
+    }
     eventHub_->FireOnDisappear();
     renderContext_->OnNodeDisappear(recursive);
 }
diff --git a/frameworks/core/components_ng/base/frame_node.h b/frameworks/core/components_ng/base/frame_node.h
index db59eba705b4d0a74ee3e949dc3d452c5896d5b7..c7a60b30d160b551d76392df6b0d7f62bf0cb2b6 100644
--- a/frameworks/core/components_ng/base/frame_node.h
+++ b/frameworks/core/components_ng/base/frame_node.h
@@ -422,6 +422,16 @@ public:
 
     void MarkNeedRenderOnly();
 
+    void SetOnAttachFunc(std::function<void(int32_t)>&& attachFunc)
+    {
+        attachFunc_ = std::move(attachFunc);
+    }
+
+    void SetOnDetachFunc(std::function<void(int32_t)>&& detachFunc)
+    {
+        detachFunc_ = std::move(detachFunc);
+    }
+
     void OnDetachFromMainTree(bool recursive) override;
     void OnAttachToMainTree(bool recursive) override;
     void OnAttachToBuilderNode(NodeStatus nodeStatus) override;
@@ -932,6 +942,9 @@ private:
     std::unique_ptr<FrameProxy> frameProxy_;
     WeakPtr<TargetComponent> targetComponent_;
 
+    std::function<void(int32_t)> attachFunc_;
+    std::function<void(int32_t)> detachFunc_;
+
     bool needSyncRenderTree_ = false;
 
     bool isPropertyDiffMarked_ = false;
diff --git a/frameworks/core/components_ng/pattern/custom_frame_node/custom_frame_node_pattern.h b/frameworks/core/components_ng/pattern/custom_frame_node/custom_frame_node_pattern.h
index d43bcb72de93782f4003df359ffc394886d1bd2a..57b9e8c10bf6d640d58e04c24d7de4a0f306a584 100644
--- a/frameworks/core/components_ng/pattern/custom_frame_node/custom_frame_node_pattern.h
+++ b/frameworks/core/components_ng/pattern/custom_frame_node/custom_frame_node_pattern.h
@@ -61,32 +61,6 @@ public:
         return true;
     }
 
-    void SetOnAttachFunc(std::function<void(int32_t)>&& attachFunc)
-    {
-        attachFunc_ = std::move(attachFunc);
-    }
-
-    void SetOnDetachFunc(std::function<void(int32_t)>&& detachFunc)
-    {
-        detachFunc_ = std::move(detachFunc);
-    }
-
-    void OnAttachToMainTree() override
-    {
-        CHECK_NULL_VOID(attachFunc_);
-        auto host = GetHost();
-        CHECK_NULL_VOID(host);
-        attachFunc_(host->GetId());
-    }
-
-    void OnDetachFromMainTree() override
-    {
-        CHECK_NULL_VOID(detachFunc_);
-        auto host = GetHost();
-        CHECK_NULL_VOID(host);
-        detachFunc_(host->GetId());
-    }
-
     RefPtr<PaintProperty> CreatePaintProperty() override
     {
         auto renderNodePaintProperty = MakeRefPtr<RenderNodePaintProperty>();
@@ -121,8 +95,6 @@ public:
 private:
     std::function<void(DrawingContext& context)> drawCallback_;
     RefPtr<RenderNodeModifier> renderNodeModifier_;
-    std::function<void(int32_t)> attachFunc_;
-    std::function<void(int32_t)> detachFunc_;
 };
 } // namespace OHOS::Ace::NG
 #endif // FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERNS_CUSTOM_FRAME_NODE_CUSTOM_FRAME_NODE_PATTERN_H