We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.

Cookie Settings
Only Essential Cookies
Accept All
MaterialsConsole

HarmonyOS

输入关键字搜索
HMS Core
AppGallery Connect
HUAWEI HiAI
CTRL+K
GuidesApplication FrameworkArkTSArkTS ConcurrencyMultithreaded DevelopmentMultithreaded Development Practice CasesArkUI Data Updates

ArkUI Data Updates

Last updated: 2026-09-04 06:52

When data, regardless of whether it is downloaded from the Internet or generated locally, needs to be sent to the UI thread for display, the annotations and the @Sendable decorator in ArkUI cannot simultaneously decorate variables and objects. Therefore, it is necessary to use makeObserved to import observable Sendable data into ArkUI.

This example describes the following scenarios:

  • When makeObserved is used with @Sendable data, it enables observability of changes that can trigger UI refreshes.
  • Data is fetched from a child thread and used to replace the observable data in the UI thread entirely.
  • The data fetched from the child thread is reprocessed with makeObserved to become observable.
  • Only non-observable data is passed from the UI main thread back to the child thread. The return value of makeObserved cannot be directly passed to child threads.
Collapse
Word wrap
Dark theme
Copy code
  1. // SendableData.ets
  2. @Sendable
  3. export class SendableData {
  4.   name: string = 'Tom';
  5.   age: number = 20;
  6.   gender: number = 1;
  7.   likes: number = 1;
  8.   follow: boolean = false;
  9. }
Collapse
Word wrap
Dark theme
Copy code
  1. import { taskpool } from '@kit.ArkTS';
  2. import { SendableData } from './SendableData';
  3. import { UIUtils } from '@kit.ArkUI';
  4. 

  5. @Concurrent
  6. function threadGetData(param: string): SendableData {
  7.   // Process data in the child thread.
  8.   let ret = new SendableData();
  9.   console.info(`Concurrent threadGetData, param ${param}`);
  10.   ret.name = param + "-o";
  11.   ret.age = Math.floor(Math.random() * 40);
  12.   ret.likes = Math.floor(Math.random() * 100);
  13.   return ret;
  14. }
  15. 

  16. @Entry
  17. @ComponentV2
  18. struct Index {
  19.   // Use makeObserved to add observation to a regular object or a @Sendable object.
  20.   @Local send: SendableData = UIUtils.makeObserved(new SendableData());
  21. 

  22.   build() {
  23.     Column() {
  24.       Text(this.send.name)
  25.       Button("change name").onClick(() => {
  26.         // Changes to properties are observable.
  27.         this.send.name += "0";
  28.       })
  29. 

  30.       Button("task").onClick(() => {
  31.         // Enqueue the function to be executed in the task pool, waiting to be dispatched to a worker thread.
  32.         // Data construction and processing can be done in the child thread, but observable data cannot be passed to the child thread (observable data can only be manipulated in the UI main thread).
  33.         // Therefore, only the 'name' property of 'this.send' is passed to the child thread.
  34.         taskpool.execute(threadGetData, this.send.name).then(val => {
  35.           // Used together with @Local to observe changes to 'this.send'.
  36.           this.send = UIUtils.makeObserved(val as SendableData);
  37.         })
  38.       })
  39.     }
  40.   }
  41. }
SendableData.ets
Global Configuration
C++ Inter-Thread Data Sharing
English
©2026 HUAWEI Developers. All rights reserved.
Terms of Use
Statement About HUAWEI Developers and Privacy
Cookies
Cookie Settings
Open-Source Software Notice
Search in Guides
Enter a keyword.