#鸿蒙通关秘籍#如何使用component类型的XComponent动态加载内容？

使用component类型的XComponent在HarmonyOS中可以实现内部执行非UI逻辑，步骤如下：

1. 在ArkTS中定义XComponent，并利用其以容器形式动态加载内容：

   @Builder
   function addText(label: string): void {
     Text(label)
     .fontSize(40)
   }
   
   @Entry
   @Component
   struct Index {
     @State message: string = 'Hello XComponent'
     @State messageCommon: string = 'Hello World'
   
     build() {
       Row() {
         Column() {
           XComponent({ id: 'xcomponentId-container', type: 'component' }) {
             addText(this.message)
             Divider()
             .margin(4)
             .strokeWidth(2)
             .color('#F1F3F5')
             .width("80%")
             Column() {
               Text(this.messageCommon)
               .fontSize(30)
             }
           }
         }
         .width('100%')
       }
       .height('100%')
     }
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.
   21.
   22.
   23.
   24.
   25.
   26.
   27.
   28.
   29.
   30.
   31.
   32.
   33.

   复制

2. 在component类型的XComponent内部，编写非UI逻辑封装为函数，并传入XComponent。

3. 利用FlexAlign属性设置布局方式，以实现动态内容加载。