# TextExpand

**Repository Path**: doujigit/TextExpand

## Basic Information

- **Project Name**: TextExpand
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2025-05-30
- **Last Updated**: 2025-06-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Rich text expands and collapses

#### ### Overview

In this example, when you display more than multiple lines of text content, you often need to provide the functions of "
expanding" and "collapsing" the blog posts and comments in the display list.

### ### Preview

| home                                   | Rich text displays the expand button            | Rich text displays the collapse button        | Plain text displays the collapse button       | Plain text displays the expand button           |
|----------------------------------------|-------------------------------------------------|-----------------------------------------------|-----------------------------------------------|-------------------------------------------------|
| ![](./screenshots/devices/home_en.png) | ![](./screenshots/devices/rich_collapse_en.png) | ![](./screenshots/devices/rich_expand_en.png) | ![](./screenshots/devices/text_expand_en.png) | ![](./screenshots/devices/text_collapse_en.png) |

Instructions:

1. Open the app, click the rich text fold on the home page to jump to the rich text display page, click the expand
   button to expand the list, and click the collapse button to collapse the list.
2. Open the app, click Plain Text Collapse on the home page to jump to the plain text display page, click the Expand
   button to expand the list, and click the Collapse button to collapse the list.

### Project Directory

```
├──ets
│  ├──entryability
│  │  └──EntryAbility.ets
│  ├──pages
│  │  ├──index .ets              // home
│  │  ├──RichTextExpand .ets     // Rich text scenes
│  │  ├──TextExpand.ets          // Plain text scenes
│  ├──utils
│  │  ├──Models .ets             // Data model
│  │  ├──TextUtils .ets          // Text processing tools
│  └──view
│     ├──ItemPart.ets            // The plain text scene List data display component
│     ├──RichItemPart.ets        // The data display component of the rich text scene List
│     ├──RichTextExpandView.ets  // Encapsulated rich text expands the collapse component
│     ├──TextExpandView.ets      // Encapsulated plain text expands the collapse component
└──resources
```

### How to Implement

1.
Use[MeasureText](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-canvasrenderingcontext2d#measuretext)
The text content is pretypeset, and the position of the folding and unfolding button is measured and calculated, so as
to realize the folding and unfolding function.

2.
Use[ParagraphBuilder](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-graphics-text#paragraphbuilder)
Carry out paragraph layout, calculate the truncation position according to the typesetting content, and then realize the
folding and unfolding function.

### Required Permissions

N/A.

### Dependency

N/A.

### Constraints

1. The sample is supported only on Huawei phones with standard systems.

2. The HarmonyOS version must be HarmonyOS 5.0.5 Release or later.

3. The DevEco Studio version must be DevEco Studio 5.0.5 Release or later.

4. The HarmonyOS SDK version must be HarmonyOS 5.0.5 Release SDK or later.