diff --git a/README.en.md b/README.en.md index 89642ec4244799cfb2b93aafe645056f3e3400b2..eccf887f3de365f39f9c9e1391126b9458fd409c 100644 --- a/README.en.md +++ b/README.en.md @@ -1,22 +1,19 @@ -# Rich text expands and collapses +# Rich Text Expand and Collapse -#### ### Overview +### 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. +This sample demonstrates use cases such as blog posts and comments in a list. When displaying text content that spans multiple lines, it is often necessary to provide expanding/collapsing functionalities. -### ### Preview +### 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 | +| Home Page | Expand Button for Rich Text Display | Collapse Button for Rich Text Display | Collapse Button for Plain Text Display | Expand Button for Plain Text Display | |----------------------------------------|-------------------------------------------------|-----------------------------------------------|-----------------------------------------------|-------------------------------------------------| | ![](./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: +How to Use -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. +1. Open the application and tap the Expand/Collapse Rich Text button on the home page. The rich text display page is displayed. Tap the expand button to expand the list and tap the collapse button to collapse the list. +2. Open the application and tap the Expand/Collapse Plain Text button on the home page. The plain text display page is displayed. Tap the expand button to expand the list and tap the collapse button to collapse the list. ### Project Directory @@ -25,48 +22,41 @@ Instructions: │ ├──entryability │ │ └──EntryAbility.ets │ ├──pages -│ │ ├──index .ets // home -│ │ ├──RichTextExpand .ets // Rich text scenes -│ │ ├──TextExpand.ets // Plain text scenes +│ │ ├──index .ets // Home page. +│ │ ├──RichTextExpand .ets // Rich text scenario. +│ │ ├──TextExpand.ets // Plain text scenario. │ ├──utils -│ │ ├──Models .ets // Data model -│ │ ├──TextUtils .ets // Text processing tools +│ │ ├──Models .ets // Data model. +│ │ ├──TextUtils .ets // Text processing utility. │ └──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 +│ ├──ItemPart.ets // List data display component in the plain text scenario. +│ ├──RichItemPart.ets // List data display component in the rich text scenario. +│ ├──RichTextExpandView.ets // Encapsulated rich text expansion and folding. +│ ├──TextExpandView.ets // Encapsulated plain text expansion and folding. └──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. +1. Use [MeasureText](https://developer.huawei.com/consumer/en/doc/harmonyos-references/js-components-canvas-canvasrenderingcontext2d#measuretext) to pre-typeset the text content and measure and calculate the position of the folding and unfolding button to implement the expanding/collapsing functionalities. +2. Use [ParagraphBuilder](https://developer.huawei.com/consumer/en/doc/harmonyos-references/js-apis-graphics-text#paragraphbuilder) to typeset paragraphs and calculate the truncation position based on the typesetting content to implement the expanding/collapsing functionalities. ### Required Permissions N/A. -### Dependency +### Dependencies N/A. ### Constraints -1. The sample is supported only on Huawei phones with standard systems. +1. This sample is only supported on Huawei phones running standard systems. -2. The HarmonyOS version must be HarmonyOS 5.0.5 Release or later. +2. HarmonyOS: HarmonyOS 5.0.5 Release or later. -3. The DevEco Studio version must be DevEco Studio 5.0.5 Release or later. +3. DevEco Studio: DevEco Studio 5.0.5 Release or later. -4. The HarmonyOS SDK version must be HarmonyOS 5.0.5 Release SDK or later. +4. HarmonyOS SDK: HarmonyOS 5.0.5 Release SDK or later.