diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/richEditorLineBreak.gif b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/richEditorLineBreak.gif new file mode 100644 index 0000000000000000000000000000000000000000..905f7eeefbaad508a55b27081e12d773a735874b Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/richEditorLineBreak.gif differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-appendix-enums.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-appendix-enums.md index 5d6f34c85ba376f23f9f0d20f020566e6392a508..87dbd980e3ff81d275e8bc89f0def618a91fda44 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-appendix-enums.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-appendix-enums.md @@ -636,6 +636,13 @@ Nullable\ { | BREAK_ALL | 对于Non-CJK的文本,可在任意2个字符间断行。对于CJK与NORMAL效果一致。| | BREAK_WORD | 与BREAK_ALL相同,对于Non-CJK的文本可在任意2个字符间断行,一行文本中有断行破发点(如空白符)时,优先按破发点换行,保障单词优先完整显示。若整一行文本均无断行破发点时,则在任意2个字符间断行。对于CJK与NORMAL效果一致。| +## LineBreakStrategy12+ +| 名称 | 描述 | +| ------------ | ------------------------------------------------------------ | +| GREEDY | 使每一行尽量显示多的字符,直到这一行不能显示更多字符再进行折行。 | +| HIGH_QUALITY | 在BALANCED的基础上,尽可能填满行,在最后一行的权重上比较低,可能会出现最后一行留白比较多。 | +| BALANCED | 尽可能保证在不拆词的情况下,使一个段落中每一行的宽度相同。 | + ## GestureJudgeResult11+ | 名称 | 描述 | | ----- | -------------------------------------- | diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md index ff72910774c0fd9d5bd8bc4bdd8234c9727e3fe0..8dc05d42d2cc7773a9303bd1bbea1eeacb3cea79 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md @@ -910,6 +910,7 @@ SymbolSpan样式选项。 | textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 否 | 设置文本段落在水平方向的对齐方式。 | | leadingMargin | [Dimension](ts-types.md#dimension10) \| [LeadingMarginPlaceholder](#leadingmarginplaceholder11) | 否 | 设置文本段落缩进,不支持设置百分比,图片放在段首时不支持。 | | wordBreak12+ | [WordBreak](ts-appendix-enums.md#wordbreak11) | 否 | 设置断行规则。
默认值:WordBreak.BREAK_WORD | +| lineBreakStrategy12+ | [LineBreakStrategy](ts-appendix-enums.md#linebreakstrategy12) | 否 | 设置折行规则。
默认值:LineBreakStrategy.GREEDY
在wordBreak不等于breakAll的时候生效,不支持连字符,当开发者配置为非法属性值时,会按照默认值GREEDY生效。 | ## LeadingMarginPlaceholder11+ @@ -3420,4 +3421,82 @@ struct SoftKeyboardEnterTypeExample { } ``` -![SoftKeyboardEnterType](figures/richeditorentertype.gif) \ No newline at end of file +![SoftKeyboardEnterType](figures/richeditorentertype.gif) + +### 示例19 +lineBreakStrategy属性值设置、更新、查询使用示例。 + +```ts +@Entry +@Component +struct LineBreakStrategyExample { + controller: RichEditorController = new RichEditorController(); + private spanParagraphs: RichEditorParagraphResult[] = []; + @State lineBreakOptionStr: string[] = ['GREEDY', 'HIGH_QUALITY', 'BALANCED'] + @State attributeValue: string = "" + @State testStr: string = "0123456789,0123456789,0123456789,0123456789,0123456789." + build() { + Column() { + RichEditor({ controller: this.controller }) + .onReady(() => { + this.controller.addTextSpan(this.testStr, { + style: { + fontColor: Color.Black, + fontSize: "32", + }, + paragraphStyle: { + textAlign: TextAlign.Start, + lineBreakStrategy: LineBreakStrategy.GREEDY + } + }) + }) + .width(400) + .height(300) + .margin({bottom:20}) + .draggable(false) + Column(){ + Text('linebreak属性值为:' + this.attributeValue).fontSize(20).fontColor(Color.Black) + }.margin({bottom: 10}) + Column({ space: 10 }) { + Button("设置折行类型GREEDY").onClick(() => { + this.controller.updateParagraphStyle({ start: -1, end: -1, + style: { + lineBreakStrategy: LineBreakStrategy.GREEDY, + } + }) + }) + Button("设置折行类型HIGH_QUALITY").onClick(() => { + this.controller.updateParagraphStyle({ start: -1, end: -1, + style: { + lineBreakStrategy: LineBreakStrategy.HIGH_QUALITY, + } + }) + }) + Button("设置折行类型BALANCED").onClick(() => { + this.controller.updateParagraphStyle({ start: -1, end: -1, + style: { + lineBreakStrategy: LineBreakStrategy.BALANCED, + } + }) + }) + Divider() + Row(){ + Button("获取linebreak属性值").onClick(() => { + this.spanParagraphs = this.controller.getParagraphs({ start: -1, end: -1 }) + console.log("RichEditor getParagraphs:" + JSON.stringify(this.spanParagraphs)) + this.spanParagraphs.forEach(item => { + if(typeof(item as RichEditorParagraphResult)['style'] != 'undefined'){ + this.attributeValue = "" + console.info('lineBreakStrategy:'+ JSON.stringify((item as RichEditorParagraphResult)['style'])) + this.attributeValue += this.lineBreakOptionStr[Number((item as RichEditorParagraphResult)['style'].lineBreakStrategy)]; + } + }) + }) + } + } + } + } +} +``` + +![LineBreakStrategy](figures\richEditorLineBreak.gif)