DEV Community: Studotie Handwer

[Dev Notes] Word Segmentation and Smear-to-Select Feature

Studotie Handwer — Wed, 14 May 2025 08:14:46 +0000

Preface

Recently, I've been working on an emoji search feature. Since it's a search, emojis need some recognizable attributes—so assigning each emoji a name field makes sense. But a user might have thousands of emojis—naming them one by one would be a nightmare. That’s why we need OCR for emojis. However, OCR isn’t always reliable, so we also need to allow users to manually adjust the names afterward.

But tapping to open an input box and then editing text is still too much friction. Inspired by Luo Yonghao’s “Big Bang” feature, selecting segmented text by smearing (dragging across it) offers a much better interaction experience.

Target Effect

Let’s look at the effect first:

Each segmented word is placed inside a box. Selected words are highlighted. Tapping or swiping lets you select/deselect them, with support for select all / deselect all.

Implementation Details

Refer to my previous post where I explain the implementation and logic behind swipe-to-select:

Previous Article Link (Huawei Developer Blog)

We’ll modify that implementation for our needs.

The biggest challenge here is dealing with the irregular layout of word blocks from left to right. For those familiar with web development, Flex layout’s flex-wrap property immediately comes to mind!

This official flex-wrap demo is exactly what we want.

Once the tech stack is set, we begin coding.

First, let’s extract and refine the swipe selection logic from the previous article into a basic library:

@ObservedV2
class GridSlideSelectInfo {
  ...
}
@ObservedV2
export class SlideToSelectGridViewModel {
  ...
}

Next, we create a component framework. The parameters needed: words to hold all the segments, and selectedIndex to track which words are selected.

@ComponentV2
export struct WordDividerContent {
  @Param @Require words: string[]
  @Param @Require selectedIndex: Set<number>

  build() {}
}

Quick note on how to do the word segmentation: if you have your own server, just request results from there. Otherwise, check out HarmonyOS AI’s textProcessing API:
HarmonyOS Word Segmentation Docs

textProcessing.getWordSegment(text)
  .then((res) => {
    this.aiDividedWords = res.map(val => val.word).filter(val => !val.includes('\n'))
  })

This gives you aiDividedWords: string[].

Now, onto the UI.

First, use Flex layout with flex-wrap to handle word block layout:

build() {
  Column() {
    Scroll() {
      Flex({
        direction: FlexDirection.Row,
        wrap: FlexWrap.Wrap,
        ...
      }) {
        ForEach(this.words, (val: string, index) => {
          Text(val).selectedStyle(<selection logic>)
        })
      }
    }
  }
}

Custom style based on whether a word is selected:

@Extend(Text) function selectedStyle(selected: boolean) {
  .backgroundColor(selected ? ThemeManager.getBrand() : $r('sys.color.background_tertiary'))
  ...
}

Add logic for click-to-select:

Text(val)
  .selectedStyle(this.judgeSelected(index))
  .onClick(() => {
    ...
  })

Then we add area tracking and pan gesture handling:

@Local slideVM: SlideToSelectGridViewModel = new SlideToSelectGridViewModel()
private wordArea: Area[] = []

aboutToAppear(): void {
  this.wordArea = new Array(this.words.length)
}

Add onAreaChange to each word block to track its area:

Text(val)
  .onAreaChange((_o, area) => { this.wordArea[index] = area })

Track the full component’s area and bind gestures:

.onAreaChange((_, nv) => {
  this.slideVM.pageArea = nv
})
.gesture(PanGesture().onActionStart(...).onActionUpdate(...).onActionEnd(...))

Now implement swipe-to-select logic, including a finder to locate which block a touch point is over:

private finder = (vx: number, vy: number) => {
  return this.wordArea.findIndex(val => this.slideVM.checkIsInArea(vx, vy, val))
}

Update judgeSelected() to handle swipe states:

judgeSelected(index: number) {
  ...
}

Handle gesture callbacks:

this.slideVM.onSlideActionStart(...)
this.slideVM.onSlideActionMove(...)
this.slideVM.onSlideActionEnd(...)

Gesture logic is encapsulated in the view model for cleanliness:

class SlideToSelectGridViewModel {
  public onSlideActionStart = ...
  public onSlideActionMove = ...
  public onSlideActionEnd = ...
}

Finally, add two buttons for “Select All” and “Deselect All”:

Row() {
  ActionButton({ title: 'Deselect All', clickAction: () => { ... } })
  ActionButton({ title: 'Select All', clickAction: () => { ... } })
}

And we’re done!

[Dev Notes] Implementing Photo-Gallery-Style Sliding Multi-Select with Custom Gestures

Studotie Handwer — Wed, 14 May 2025 08:11:47 +0000

This feature has been deployed in the latest release of QuickieSticker — feel free to download and try it out!

Preface

When I was first asked to implement multi-selection for stickers, I flat-out refused. I had barely used Grid, didn’t know how to adapt multi-selection for it, and besides, the app’s existing functionality conflicted with Grid’s built-in multi-select, so I just deleted it altogether. As a result, sticker multi-selection had always felt like a technical challenge I’d been avoiding. It wasn’t until I was filming the promo video and needed to batch edit sticker info that I realized multi-selection was actually a very real need.

After I finished the basic multi-select, I hit another problem: tapping one by one was still too tedious. Could we make it more like the photo album app — support drag selection and select all?

Due to personal coding habits, I’d been using a Set<string> to track selected sticker UIDs and leaving visual toggle state to the Toggle component. Luckily, ArkUI’s State Management V2 supports reactive tracking of Set and Map, so my existing code migrated seamlessly into a stateful structure. Once the state system is in place, a lot of more advanced logic becomes possible.

Final Result

Let’s get to the point — the goal is to implement photo-gallery-style sliding multi-select, as shown in the GIF below:

(unfortunately the gif was always failed to upload so only static img here)

Specifically, we aim to achieve the following:

A white overlay to indicate selected state
Drag gesture to select/deselect stickers
Auto-scroll when dragging to the top/bottom edge of the screen

Core Principle

This implementation does not use Grid's built-in multi-selection. Grid is used purely for the layout — all functionality is custom.

Each grid item is structured as follows:

@ObservedV2
class ViewModel {
    uid: string
    @Trace img: string
}

@Builder singleItemBuilder(item: ViewModel, index: number) {
    Image(item.img)
    .aspectRatio(1)
}

Selection State

Selection overlay is simple: stack a semi-transparent white layer over the image, along with a Toggle component. We use a Set<string> to keep track of selected UIDs, made reactive via ArkUI's state system:

@Local selectedImgs: Set<string> = new Set()

@Builder singleItemBuilder(item: ViewModel, index: number) {
    Stack({alignContent: Alignment.BottomEnd}) {
        Image(item.img)
          .aspectRatio(1)
        if (this.isMultiSelecting) {
            // Semi-transparent overlay
            Column() {}.width('100%').height('100%')
              .backgroundColor(this.selectedImgs.has(item.uid) ? '#33ffffff' : undefined)
              .onClick(() => {
                  if (!this.selectedImgs.has(item.uid)) 
                    this.selectedImgs.add(item.uid)
                  else this.selectedImgs.delete(item.uid)
              })
            // Toggle checkbox
            Toggle({isOn: this.selectedImgs.has(item.uid)}, type: ToggleType.Checkbox)
              .onChange((isOn) => {
                  if (!isOn) this.selectedImgs.add(item.uid)
                  else this.selectedImgs.delete(item.uid)
              }).margin({right: 8, bottom: 8})
        }
    }
}

Sliding Multi-Selection

Problem: How do we determine which item is touched?

Options:

onTouch or PanGesture on each GridItem: only tracks gestures on that item; doesn't work if dragging out of bounds.
PanGesture on the Grid parent container: doesn’t know which item is being touched — only gives coordinates.

We go with option 3 and manually map global touch coordinates to the grid item.

Each item's Area is captured via onAreaChange, and stored in its ViewModel:

@ObservedV2
class ViewModel {
    uid: string
    @Trace img: string
    inGridArea: Area | undefine
}

Grid() {
    ForEach(..., (val: ViewModel, index) => {
        GridItem() {
            this.singleItemBuilder(val, index)
        }.aspectRatio(1)
        .onAreaChange((_, nw) => {
            val.inGridArea = nw
        })
    })
}

Touch Coordinate to Grid Item Index

private checkIsInArea(x: number, y: number, area: Area) {
    let lx = area.globalPosition.x!.valueOf(), rx = lx + area.width!.valueOf();
    let uy = area.globalPosition.y!.valueOf(), dy = uy + area.height!.valueOf();
    return lx <= x && x <= rx && uy <= y && y <= dy;
}

private findInGridIndex(x: number, y: number) {
    return this.itemDataArray.findIndex((val) => {
        return this.checkIsInArea(x, y, val.inGridArea!)
    })
}

Sliding State ViewModel

@ObservedV2
class GridSlideSelectInfo {
  @Trace slideState: boolean = false
  @Trace slideIsAdd: boolean = false
  @Trace firstCellIndex: number = -1
  @Trace lastCellIndex: number = -1

  judgeCellIsActive(index: number) {
    return (this.firstCellIndex <= index && index <= this.lastCellIndex) || 
           (this.firstCellIndex >= index && index >= this.lastCellIndex)
  }

  get first() {
    return Math.min(this.firstCellIndex, this.lastCellIndex)
  }

  get last() {
    return Math.max(this.firstCellIndex, this.lastCellIndex)
  }
}

Gesture Lifecycle: Start

PanGesture().onActionStart((event) => {
  if (!this.isMultiSelecting || event.fingerList.length !== 1) return
  this.slideState.slideState = true

  let vx = event.fingerList[0].globalX, vy = event.fingerList[0].globalY
  let firstCellIndex = this.findInGridIndex(vx, vy)
  if (firstCellIndex === -1) return

  this.slideState.firstCellIndex = this.slideState.lastCellIndex = firstCellIndex
  this.slideState.slideIsAdd = !this.selectedImgUids.has(this.stickersData[firstCellIndex].uid)
})

Gesture Move

.onActionUpdate((event) => {
  if (!this.isMultiSelecting || event.fingerList.length !== 1) return
  let vx = event.fingerList[0].globalX, vy = event.fingerList[0].globalY
  this.slideState.lastCellIndex = this.findInGridIndex(vx, vy)
})

Is Item Selected?

private judgeIsSelected(uid: string, index: number) {
    if (!this.slideState.slideState) return this.selectedImgUids.has(uid)
    if (this.slideState.slideIsAdd) {
      return this.selectedImgUids.has(uid) || this.slideState.judgeCellIsActive(index)
    } else {
      if (this.slideState.judgeCellIsActive(index)) return false
      return this.selectedImgUids.has(uid)
    }
}

Update your builder:

@Builder singleItemBuilder(item: ViewModel, index: number) {
    Stack({alignContent: Alignment.BottomEnd}) {
        Image(item.img).aspectRatio(1)
        if (this.isMultiSelecting) {
            Column().width('100%').height('100%')
              .backgroundColor(this.judgeIsSelected(item.uid,index) ? '#33ffffff' : undefined)
              .onClick(() => {
                  if (!this.selectedImgs.has(item.uid)) 
                    this.selectedImgs.add(item.uid)
                  else this.selectedImgs.delete(item.uid)
              })
            Toggle({
                isOn: this.judgeIsSelected(item.uid,index),
                type: ToggleType.Checkbox
            })
              .margin({right: 8, bottom: 8})
              .hitTestBehavior(HitTestMode.None)
        }
    }
}

Gesture End

.onActionEnd((event) => {
  if (!this.isMultiSelecting || event.fingerList.length !== 1) return
  let vx = event.fingerList[0].globalX, vy = event.fingerList[0].globalY
  this.slideState.lastCellIndex = this.findInGridIndex(vx, vy)

  let first = this.slideState.first, last = this.slideState.last
  let adds = this.stickersData.slice(first, last + 1).map(val => val.uid)

  for (let uid of adds) {
    if (this.slideState.slideIsAdd) {
      this.selectedImgUids.add(uid)
    } else {
      this.selectedImgUids.delete(uid)
    }
  }
  this.slideState = new GridSlideSelectInfo()
})

Auto Scroll at Edge

To auto-scroll, detect whether the finger is near the top or bottom edge of the screen. Then use scroller.scrollEdge() with a dynamic velocity based on distance to the edge.

private checkIsInTopSlideArea(x: number, y: number) {
    return (y <= this.EDGE_SLIDE_HEIGHT)
}
private checkIsInBottomSlideArea(x: number, y: number) {
    let h = this.pageArea!.height!.valueOf()
    return (y >= h - this.EDGE_SLIDE_HEIGHT)
}
private getSlideVelocity(x: number, y: number) {
    let h = this.pageArea!.height!.valueOf()
    let dist = Math.min(y, h - y)
    if (dist <= 25) return 700
    if (dist <= 50) return 400
    if (dist <= 70) return 320
    if (dist <= 90) return 200
    return 100
}

In onActionUpdate:

if (this.checkIsInTopSlideArea(vx, vy)) {
  this.scroller.scrollEdge(Edge.Top, {
    velocity: this.getSlideVelocity(vx, vy),
  })
} else if (this.checkIsInBottomSlideArea(vx, vy)) {
  this.scroller.scrollEdge(Edge.Bottom, {
    velocity: this.getSlideVelocity(vx, vy),
  })
} else {
  this.scroller.scrollBy(0, 0)
}

Don’t forget to scrollBy(0, 0) in onActionEnd to stop scrolling.

Conclusion

This wraps up the entire feature! It was a milestone for me — implementing a gesture-heavy UX without any reference code, just based on understanding. I also wanted to share this because HarmonyOS still lacks a lot of community content — hope this helps others on similar paths.

Reference: https://www.jianshu.com/p/c73597d91fab

How do you put data on the storage?

Studotie Handwer — Wed, 14 May 2025 08:00:21 +0000

In modern operating systems, data persistence is a critical concern. Especially on mobile and IoT devices, developers are highly focused on how to efficiently, quickly, and securely persist data to disk to ensure application stability and data reliability.

With the continuous evolution of HarmonyOS, its data persistence solutions have become increasingly rich. The commonly used persistence technologies now include MMKV, relational databases, and distributed key-value (KV) storage.

1. MMKV: Lightweight and Efficient Storage

What is MMKV?

MMKV (Memory Mapped Key-Value) is a lightweight and high-performance local data storage solution. It uses memory-mapped files to achieve efficient disk storage. MMKV’s core strengths are efficiency and low memory usage, making it especially suitable for storing small, frequently accessed key-value data.

Using MMKV for Data Persistence

MMKV is available via ohpm and allows developers to easily persist data to disk. With ArkTS APIs, you can:

Store simple data types like strings, integers, booleans, etc.
Support multi-threaded read/write with consistency and thread safety.
Provide encrypted storage for securing sensitive data.

Advantages of MMKV

High Performance: Based on memory-mapped file technology, reducing IO frequency and improving speed.
Ease of Use: ArkTS offers simple APIs for developers to read/write data with ease.
Encryption Support: Data can be encrypted with minimal configuration to ensure security.

Example Code:

let mmkv = MMKV.defaultMMKV();

mmkv.encodeBool('bool', true);
console.info('bool = ', mmkv.decodeBool('bool'));

mmkv.encodeInt32('int32', Math.pow(2, 31) - 1);
console.info('max int32 = ', mmkv.decodeInt32('int32'));

mmkv.encodeInt64('int', BigInt(2**63) - BigInt(1));
console.info('max int64 = ', mmkv.decodeInt64('int'));

let str: string = 'Hello OpenHarmony from MMKV';
mmkv.encodeString('string', str);
console.info('string = ', mmkv.decodeString('string'));

let arrayBuffer: ArrayBuffer = StringToArrayBuffer('Hello OpenHarmony from MMKV with bytes');
mmkv.encodeBytes('bytes', arrayBuffer);
let bytes = mmkv.decodeBytes('bytes');
console.info('bytes = ', ArrayBufferToString(bytes));

let arr = new Uint8Array([0, 255, 1, 255]);
mmkv.encodeTypedArray('uint8-array', arr);
let newUI8Arr = kv.decodeUint8Array('uint8-array');
console.info('uint8-array = ', newUI8Arr);

2. `rdbStore`: Relational Database Storage

What is rdbStore?

rdbStore is a relational database storage solution provided by HarmonyOS. It is based on SQLite and is suited for scenarios that require storage of complex relational data.

For example:

A class of students with names, student IDs, and grades.
Company employee records with names, employee IDs, positions, etc.

Since the data is highly structured and relational, it is best stored using a relational database.

Using `rdbStore`

Before using, you first need to get a store instance:

relationalStore.getRdbStore(this.context, STORE_CONFIG, (err: BusinessError, rdbStore: relationalStore.RdbStore) => {
  store = rdbStore;
  if (err) {
    console.error(`Get RdbStore failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('Get RdbStore successfully.');
});

STORE_CONFIG includes information like the database file name, security level, and whether encryption is enabled.

Once you get the store, you can perform standard CRUD operations (Create, Read, Update, Delete) via its API:

Initialize a Table

async initTable(context: Context, setVersion: boolean = false) {
  try {
    let store = await this.getRdbStore(context)
    if (store.version === 0) {
      await store.executeSql(this.sqlCreateTable)
      if (setVersion) store.version = DatabaseConsts.STORE_VERSION
    }
  } catch (e){
    Logger.error(this.TAG, `Init table ${this.tableName} failed: ${e}`)
    throw Error(e)
  }
}

Insert Data

async insertData(context: Context, data: ValuesBucket) {
  try {
    let store = await this.getRdbStore(context)
    let res = await store.insert(this.tableName, data)
    Logger.info(this.TAG, `Insert data completed, ret = ${res}`)
  } catch (e) {
    Logger.error(this.TAG, `Insert data failed: ${e}`)
    throw Error(e)
  }
}

Update Data

async updateData(context: Context, predicate: relationalStore.RdbPredicates, data: ValuesBucket): Promise<number> {
  return new Promise((resolve, reject) => {
    this.getRdbStore(context)
      .then((store) => store.update(data, predicate))
      .then((ret) => {
        Logger.info(this.TAG, `Update data completed, ret = ${ret}`)
        resolve(ret)
      }).catch((e: BusinessError) => {
        Logger.error(this.TAG, `Update data failed, err = ${e}`)
        reject(e)
    });
  });
}

Delete Data

async deleteData(context: Context, predicate: relationalStore.RdbPredicates): Promise<number> {
  return new Promise((resolve, reject) => {
    this.getRdbStore(context)
      .then((store) => store.delete(predicate))
      .then((ret) => {
        Logger.info(this.TAG, `Delete data completed, ret = ${ret}`)
        resolve(ret)
      }).catch((e: BusinessError) => {
        Logger.error(this.TAG, `Delete data failed, err = ${e}`)
        reject(e)
    });
  });
}

Query Data

async queryData(context: Context, predicate: relationalStore.RdbPredicates): Promise<relationalStore.ResultSet> {
  return new Promise((resolve, reject) => {
    this.getRdbStore(context)
      .then((store) => store.query(predicate))
      .then((result) => {
        Logger.info(this.TAG, `Query data completed`)
        resolve(result)
      })
      .catch((e: BusinessError) => {
        Logger.error(this.TAG, `Query data failed, err = ${e}`)
        reject(e)
      });
  });
}

Networking in HarmonyOS: HTTP and WebSocket

Studotie Handwer — Wed, 14 May 2025 07:57:53 +0000

In today’s mobile internet era, front-end and back-end communication is an essential part of app development. HTTP and WebSocket are two of the most common communication protocols, each playing a crucial role in enabling interaction between client and server. Therefore, mastering network communication is very important.

Before using networking capabilities, you first need to request permissions:

ohos.permission.INTERNET: Grants the app access to the internet.
ohos.permission.GET_NETWORK_INFO: Allows access to device network information via API.

HTTP

HTTP (HyperText Transfer Protocol) is a protocol used to transfer hypertext from a web server to a local browser. It defines the request and response format between clients and servers. Common HTTP request types include:

1. GET

Purpose: Request to retrieve information about a specified resource.
Characteristics:
- Safe and idempotent: Does not change the server state; repeated requests yield the same result.
- Can be cached.
- Parameters are passed through the URL.
Example: Loading a webpage, fetching API data.

2. POST

Purpose: Submit data to a specified resource for processing.
Characteristics:
- Not safe and not idempotent: May change server state.
- Parameters are usually placed in the request body.
- Used for creating or updating resources.
Example: Submitting forms, uploading files, creating users.

3. PUT

Purpose: Update a specified resource.
Characteristics:
- Idempotent: Repeating the request has the same effect.
- May create a new resource if it doesn’t exist (depends on server).
Example: Updating user information, modifying configuration files.

4. DELETE

Purpose: Delete a specified resource.
Characteristics:
- Idempotent: Repeating the request won’t change the outcome.
Example: Deleting users, removing files.

5. HEAD

Purpose: Similar to GET, but only retrieves headers, not the body.
Characteristics:
- Safe and idempotent.
Example: Check if a webpage exists, get file size.

HTTP in ArkTS

In ArkTS, you can use the built-in Remote Communication Kit (RCP) to send HTTP requests. This module provides common APIs for network requests. You just need to create a session and then call the appropriate method.

Example of a GET request:

const session = rcp.createSession();
session.get("http://www.example.com/get").then((response) => {
  console.info(`Response succeeded: ${response}`);
}).catch((err: BusinessError) => {
  console.error(`Response error: Code is ${err.code}, message is ${JSON.stringify(err)}`);
});

There’s also another API set called Network Kit, which offers a more detailed, message-based subscription approach for networking.

Additionally, there are third-party libraries that simplify networking, such as @ohos/axios:

// Send a GET request.
axios<string, AxiosResponse<string>, null>({
  method: "get",
  url: 'https://www.xxx.com/info'
}).then((res: AxiosResponse) => {
  console.info('Result: ' + JSON.stringify(res.data));
}).catch((error: AxiosError) => {
  console.error(error.message);
});

The choice of library is personal preference—“to each their own.” However, the common best practice is to wrap the lower-level networking tools into your own utility layer. This decouples the third-party libraries from your business logic. If you ever need to switch networking stacks, you only need to modify the utility layer without touching the core business logic.

WebSocket Protocol

WebSocket is a protocol that enables full-duplex, bidirectional communication over a single TCP connection. It allows the server to proactively push messages to the client, making it ideal for real-time communication such as:

Online chats
Live stock quotes
Multiplayer games

Apps like Xiaohongshu use WebSocket for real-time messaging.

Creating a WebSocket Request

Start by creating an instance:

let ws = webSocket.createWebSocket();

Then register a series of callbacks:

ws.on('open', (err: BusinessError, value: Object) => {
  console.log("on open, status: " + JSON.stringify(value));
});

ws.on('message', (err: BusinessError, value: string | ArrayBuffer) => {
  console.log("on message, message: " + value);
});

ws.on('close', (err: BusinessError, value: webSocket.CloseResult) => {
  console.log("on close, code: " + value.code + ", reason: " + value.reason);
});

ws.on('error', (err: BusinessError) => {
  console.log("on error, error: " + JSON.stringify(err));
});

Once callbacks are in place, open the WebSocket connection:

ws.connect(Address, (err: BusinessError, value: boolean) => {
  if (!err) {
    console.log("Connected successfully");
  } else {
    console.log("Connection failed. Error: " + JSON.stringify(err));
  }
});

Here, Address refers to the WebSocket endpoint (e.g., ws://example.com/socket).

Sending a Message

Once connected, send messages like this:

ws.send("Hello, server!", (err: BusinessError, value: boolean) => {
  if (!err) {
    console.log("Message sent successfully");
  } else {
    console.log("Failed to send message. Error: " + JSON.stringify(err));
  }
});

Drag-and-Drop: A Signature Feature of HarmonyOS

Studotie Handwer — Wed, 14 May 2025 07:55:19 +0000

Drag-and-drop is one of HarmonyOS’s standout features. Since HarmonyOS 4 introduced the Data Transfer Station and enabled drag by default on the Image component in NEXT, it’s clear that drag gestures are being heavily promoted. Therefore, learning how to configure drag-and-drop properly is essential!

HarmonyOS already provides a set of components with built-in drag-and-drop support, including Search, TextInput, TextArea, RichEditor, Text, Image, and Hyperlink. These components require checking whether the draggable attribute is set—if set to true, drag events can be triggered. A well-known example is the Bilibili feature where you can "drag out" characters 22 and 33—that works because their Image components have draggable set to true by default.

Drag-and-Drop for Custom Components

Enabling Drag Capability

To initiate drag behavior, the key is to implement the onDragStart callback:

.onDragStart((event) => {
    let data: unifiedDataChannel.Image = new unifiedDataChannel.Image();
    data.imageUri = 'common/pic/img.png';
    let unifiedData = new unifiedDataChannel.UnifiedData(data);
    event.setData(unifiedData);

    let dragItemInfo: DragItemInfo = {
        pixelMap: this.pixmap,
        extraInfo: "this is extraInfo",
    };
    // Return custom drag preview image in onDragStart callback
    return dragItemInfo;
})

The unifiedDataChannel shown here refers to the Unified Data Management Framework (UDMF) provided by HarmonyOS. This framework offers standardized data channels for various multi-to-multi, cross-app data sharing scenarios. It allows for standardized data access and reading, making it quick and easy to support cross-app drag-and-drop for files.

In the example above:

A unifiedDataChannel.Image object is created to represent an image being dragged.
unifiedDataChannel offers multiple data types—refer to the UnifiedRecord documentation for details.
The object's information (such as uri) is set, then passed to the drag event using event.setData.

The next part introduces DragItemInfo, which allows customization of the drag preview image.

Custom Drag Preview

There are three key callbacks involved in customizing the drag preview:

onPreDrag: Triggered ~50ms after drag begins to prepare the preview.
onDragStart: Return value provides the preview.
dragPreview: Predefined preview, higher priority than onDragStart.

Both the return value of onDragStart and the value set by dragPreview must be of type DragItemInfo, which represents metadata about the drag item. You can use either pixelMap or CustomBuilder. Since CustomBuilder takes time to compute, for performance reasons it’s generally recommended to use pixelMap.

You can also use the DragPreviewOptions object to configure the drag mode, badges, and other visual elements during the drag operation.

Receiving Drag Events

To receive a drag, the target component must have allowDrop set. This accepts an array that defines the data types it can receive:

.allowDrop([
    uniformTypeDescriptor.UniformDataType.HYPERLINK,
    uniformTypeDescriptor.UniformDataType.PLAIN_TEXT
])

The example above configures the component to accept both hyperlinks and plain text.

Next, implement the onDrop callback to handle the received data:

.onDrop((dragEvent?: DragEvent) => {
    // Retrieve drag data
    this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => {
        let records: Array<unifiedDataChannel.UnifiedRecord> = event.getData().getRecords();
        this.targetImage = (records[0] as unifiedDataChannel.Image).imageUri; // Handle the dropped data

        // Explicitly set result as successful; this result is passed back to the drag source's onDragEnd
        event.setResult(DragResult.DRAG_SUCCESSFUL);
    })
})

The records array contains all the drag data. From here, implement your own business logic to process the drop. Finally, explicitly set the event’s result—this will be sent to the source component via its onDragEnd callback, indicating whether the drag-and-drop operation succeeded or failed.

Example:

.onDragEnd((event) => {
    // The result value here is set by the receiver’s onDrop
    if (event.getResult() === DragResult.DRAG_SUCCESSFUL) {
        promptAction.showToast({ duration: 100, message: 'Drag Success' });
    } else if (event.getResult() === DragResult.DRAG_FAILED) {
        promptAction.showToast({ duration: 100, message: 'Drag failed' });
    }
})

And with that, the full drag-and-drop flow is complete!

The Evolution of ArkTS and ArkUI State Management: From V1 to V2

Studotie Handwer — Wed, 14 May 2025 07:52:36 +0000

After a period of development, ArkTS and ArkUI have moved beyond the stage of merely borrowing strengths from other frameworks. They are now evolving their own distinct styles and taking unique paths. One of the most critical systems in ArkUI's runtime—state management, which handles data and page interaction—has naturally undergone an upgrade from V1 to V2. To keep up with the latest trends, I’ve started a new project fully built using V2 state management. Below is a brief overview of the features I’ve used so far and the pitfalls I’ve encountered.

Differences Between State Management V1 and V2

State Management V1: Proxy Observation Pattern

Core Mechanism: When creating a state variable, a proxy observer is created simultaneously. This observer can only detect changes at the proxy level.

Usage Limitations:

State variables are tightly coupled with the UI and cannot exist independently.
When multiple views proxy the same data, changes made in one view do not notify the others to update.
Observation is shallow—only first-level property changes are detected. Deep observation and listening are not supported.

State Management V2: Data Itself is Observable

Core Mechanism: The data itself becomes observable. Any data changes directly trigger the corresponding view updates.

Advantages:

State variables are independent of the UI, and data changes are instantly reflected across all relevant views, ensuring data and UI are always synchronized.
Supports deep observation and listening, with an optimized observation mechanism that maintains performance.
Enables precise updates at the object property level and minimal updates for array elements, improving efficiency.
Decorators are user-friendly and highly extensible. Input and output within components are clear, facilitating componentized development and maintenance.

State Variables

Let’s start with the basics—creating a state variable. In V1, this was done using @State, but in V2, a new decorator @Local is used:

@Local var: SomeType = SomeValue

Compared to @State, @Local does not allow external initialization, making its role as “internal state” clearer.

Additionally, with the new @ObservedV2 and @Trace capabilities, observing internal state variables is simpler and no longer requires @ObjectLink.

The @ObservedV2 and @Trace decorators are used to decorate classes and their properties, enabling deep observation:

@ObservedV2 and @Trace must be used together; using either one alone has no effect.
When a property decorated with @Trace changes, only components associated with that property are refreshed.
For nested classes, a property must be decorated with @Trace, and the nested class itself must be decorated with @ObservedV2 for UI updates to be triggered.

Example:

@ObservedV2
class Person {
  @Trace age: number = 100;
}

@Entry
@ComponentV2
struct Index {
  father: Person = new Person();

  build() {
    Column() {
      Text(`${this.father.son.age}`)
        .onClick(() => {
          this.father.son.age++;
        })
    }
  }
}

The combination of @ObservedV2 + @Trace supports:

Nested classes
Inherited classes
Arrays of basic/object types
Map and Set types

However, it does not support types that require JSON.stringify serialization.

External Initialization

It’s common for child components to require external parameters. In such cases, the @Param decorator is used. It replaces the older @Prop (initialization with copy) and @Link (initialization with synchronization), unifying them into a one-way synchronization from parent to child. It also allows for local initialization. To enforce required parameters, add the @Require decorator.

Example of a custom component with parameter initialization:

@ComponentV2
export struct ActionButton {
  @Param @Require icon: Resource
  @Param @Require clickAction: () => void

  build() {
    Button() {
      SymbolGlyph(this.icon)
        .fontSize(24)
        .fontColor([$r('sys.color.font_primary')])
    }.onClick(() => { this.clickAction(); })
    .backgroundColor($r('sys.color.comp_background_secondary'))
    .padding(8)
    .clickEffect({
      level: ClickEffectLevel.LIGHT
    })
  }
}

Usage is the same as in V1.

To support one-time initialization without responding to future changes from the parent, V2 introduces the @Once decorator. Use it with @Param to intercept parent data changes.

Two-Way Synchronization

To achieve synchronization from child to parent or bi-directional syncing, V2 provides two mechanisms:

@ Provider and @Consumer: Cross-Component Hierarchical Synchronization

The new provider mechanism is similar to the original @Provide, but with enhanced capabilities:

@Consumer allows local initialization with default values if no matching @Provider is found.
@Consumer supports function types.
@Provider and @Consumer support overloading—multiple @Providers with the same name are allowed, and @Consumer will look up the nearest @Provider.

@Event Decorator: Standardized Component Output

The @Event decorator enables child components to update parent variables. When the parent variable is also the data source for the child’s @Param, changes will be synced back. Since I personally don’t use this pattern much, I won’t elaborate here.

AppStorageV2

The usage of AppStorageV2 is further simplified compared to V1. It no longer uses @StorageProp and @StorageLink. Instead, it adopts a global singleton pattern:

@Local windowAvoidance: WindowAvoidanceData =
    AppStorageV2.connect(WindowAvoidanceData, SCApp.windowAvoidance, () => new WindowAvoidanceData(0, 0))!

In this example (used to record window avoidance values):

The first parameter is the type.
The second is the alias.
The third is the default initialization function.

Since the return value is nullable but we provided a default initializer, we can safely append the !.

DEV Community: Studotie Handwer

[Dev Notes] Word Segmentation and Smear-to-Select Feature

Preface

Target Effect

Implementation Details

[Dev Notes] Implementing Photo-Gallery-Style Sliding Multi-Select with Custom Gestures

Preface

Final Result

Core Principle

Selection State

Sliding Multi-Selection

Problem: How do we determine which item is touched?

Touch Coordinate to Grid Item Index

Sliding State ViewModel

Gesture Lifecycle: Start

Gesture Move

Is Item Selected?

Gesture End

Auto Scroll at Edge

Conclusion

How do you put data on the storage?

1. MMKV: Lightweight and Efficient Storage

What is MMKV?

Using MMKV for Data Persistence

Advantages of MMKV

Example Code:

2. rdbStore: Relational Database Storage

What is rdbStore?

Using rdbStore

Once you get the store, you can perform standard CRUD operations (Create, Read, Update, Delete) via its API:

Initialize a Table

Insert Data

Update Data

Delete Data

Query Data

Networking in HarmonyOS: HTTP and WebSocket

HTTP

1. GET

2. POST

3. PUT

4. DELETE

5. HEAD

HTTP in ArkTS

WebSocket Protocol

Creating a WebSocket Request

Sending a Message

Drag-and-Drop: A Signature Feature of HarmonyOS

Drag-and-Drop for Custom Components

Enabling Drag Capability

Custom Drag Preview

Receiving Drag Events

The Evolution of ArkTS and ArkUI State Management: From V1 to V2

Differences Between State Management V1 and V2

State Management V1: Proxy Observation Pattern

State Management V2: Data Itself is Observable

State Variables

External Initialization

Two-Way Synchronization

@ Provider and @Consumer: Cross-Component Hierarchical Synchronization

@Event Decorator: Standardized Component Output

AppStorageV2

2. `rdbStore`: Relational Database Storage

Using `rdbStore`