diff --git a/zh-cn/application-dev/ui/arkts-common-components-richeditor.md b/zh-cn/application-dev/ui/arkts-common-components-richeditor.md index 12631c048008f94e6f1d5c5e3e4bb8be8010cb94..f3ba6807ccab0f0edff4c5f4f16156a763579ca6 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-richeditor.md +++ b/zh-cn/application-dev/ui/arkts-common-components-richeditor.md @@ -263,6 +263,78 @@ RichEditor(this.options) ![max Length](figures/RichEditor_maxLength.gif) +### 设置装饰线 +- 通过[decoration](../reference/apis-arkui/arkui-ts/ts-basic-components-span.md#decoration)设置富文本文本装饰线的样式、颜色和粗细。 + + ```ts + private controller: RichEditorController = new RichEditorController(); + RichEditor({ controller: this.controller }) + .onReady(() => { + this.controller.addTextSpan('一段预置的文本', { + style: { + fontSize: 25, + decoration: { + type: TextDecorationType.LineThrough, + color:Color.Blue, + // 设置装饰线粗细比例为6 + thicknessScale: 6 + } + } + }) + }) + ``` + + ![RichEditor_decoration](figures/RichEditor_decoration.jpg) + +- 从API version 20开始，支持开启多装饰线，比如同时设置下划线，中划线。 + + ```ts + RichEditor({ controller: this.styledStringController }) + Button('多装饰线文本') + .fontSize(20) + .onClick(() => { + let mutString: MutableStyledString = new MutableStyledString('设置富文本多装饰线', [ + { + start: 0, + length: 9, + styledKey: StyledStringKey.FONT, + styledValue: new TextStyle({ fontSize: LengthMetrics.vp(25) }) + }, + { + start: 0, + length: 5, + styledKey: StyledStringKey.DECORATION, + styledValue: new DecorationStyle( + { + type: TextDecorationType.Underline, + }, + { + // 开启多装饰线 + enableMultiType: true + } + ) + }, + { + start: 2, + length: 4, + styledKey: StyledStringKey.DECORATION, + styledValue: new DecorationStyle( + { + type: TextDecorationType.LineThrough, + }, + { + // 开启多装饰线 + enableMultiType: true + } + ) + }, + ]) + this.styledStringController.setStyledString(mutString); + }) + ``` + + ![RichEditor_decoration_multi_type](figures/RichEditor_decoration_multi_type.jpg) + ### 默认选中菜单 富文本中的文字被选中时会弹出包含剪切、复制、翻译、分享的菜单。 diff --git a/zh-cn/application-dev/ui/arkts-common-components-text-display.md b/zh-cn/application-dev/ui/arkts-common-components-text-display.md index 9eb46c4dc3e1ea7941e97872c49406e06f95c6b5..d698243ff878d29b0d7c0f615db3b39066419dba 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-text-display.md +++ b/zh-cn/application-dev/ui/arkts-common-components-text-display.md @@ -197,7 +197,7 @@ Text可通过以下两种方式来创建： ![zh-cn_image_0000001511740480](figures/zh-cn_image_0000001511740480.png) -- 通过[decoration](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md#decoration)属性设置文本装饰线样式及其颜色。 +- 通过[decoration](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md#decoration)属性设置文本装饰线样式、颜色及其粗细。 ```ts Text('This is the text') @@ -205,22 +205,51 @@ Text可通过以下两种方式来创建： type: TextDecorationType.LineThrough, color: Color.Red }) - .borderWidth(1).padding(10).margin(5) + .borderWidth(1).padding(15).margin(5) Text('This is the text') .decoration({ type: TextDecorationType.Overline, color: Color.Red }) - .borderWidth(1).padding(10).margin(5) + .borderWidth(1).padding(15).margin(5) Text('This is the text') .decoration({ type: TextDecorationType.Underline, color: Color.Red }) - .borderWidth(1).padding(10).margin(5) + .borderWidth(1).padding(15).margin(5) + Text('This is the text') + .decoration({ + type: TextDecorationType.Underline, + color: Color.Blue, + style: TextDecorationStyle.DASHED + }) + .borderWidth(1).padding(15).margin(5) + Text('This is the text') + .decoration({ + type: TextDecorationType.Underline, + color: Color.Blue, + style: TextDecorationStyle.DOTTED + }) + .borderWidth(1).padding(15).margin(5) + Text('This is the text') + .decoration({ + type: TextDecorationType.Underline, + color: Color.Blue, + style: TextDecorationStyle.DOUBLE + }) + .borderWidth(1).padding(15).margin(5) + Text('This is the text') + .decoration({ + type: TextDecorationType.Underline, + color: Color.Blue, + style: TextDecorationStyle.WAVY, + thicknessScale: 4 + }) + .borderWidth(1).padding(15).margin(5) ``` - ![zh-cn_image_0000001511580888](figures/zh-cn_image_0000001511580888.png) + ![Text_decoration](figures/Text_decoration.jpg) - 通过[baselineOffset](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md#baselineoffset)属性设置文本基线的偏移量。 @@ -354,6 +383,44 @@ Text可通过以下两种方式来创建： ![zh-cn_image_0000001511580868](figures/zh-cn_image_0000001511580868.png) +- 从API version 20开始，支持通过[optimizeTrailingSpace](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md#optimizetrailingspace20)设置是否在文本布局过程中优化每行末尾的空格，可解决行尾空格影响对齐显示效果问题。 + + ```ts + Column() { + //启用优化行尾空格功能 + Text("Trimmed space enabled ") + .fontSize(30) + .fontWeight(FontWeight.Bold) + .margin({ top: 20 }) + .optimizeTrailingSpace(true) + .textAlign(TextAlign.Center) + //不启用优化行尾空格功能 + Text("Trimmed space disabled ") + .fontSize(30) + .fontWeight(FontWeight.Bold) + .margin({ top: 20 }) + .optimizeTrailingSpace(false) + .textAlign(TextAlign.Center) + } + ``` + ![Text_optimize_trailing_space](figures/Text_optimize_trailing_space.jpg) + +- 从API version 20开始，支持通过[lineSpacing](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md#linespacing20)设置文本的行间距。当不配置[LineSpacingOptions](../reference/apis-arkui/arkui-ts/ts-text-common.md#linespacingoptions20对象说明)时，首行上方和尾行下方默认会有行间距，当onlyBetweenLines设置为true时，行间距仅适用于行与行之间，首行上方无额外的行间距。 + + ```ts + function style() { + .width(250) + .height(100) + .maxFontSize(30) + .minFontSize(15) + .border({ width: 1 }) + } + + Text('The line spacing of this context is set to 20_px, and the spacing is effective only between the lines.') + .lineSpacing(LengthMetrics.px(20), { onlyBetweenLines: true }) + .style() + ``` + ![Text_line_spacing](figures/Text_line_spacing.jpg) ## 添加事件 @@ -509,6 +576,97 @@ Text('点我') } ``` +### 屏蔽系统服务类菜单 + +- 从API version 20开始，支持通过[disableSystemServiceMenuItems](../reference/apis-arkui/js-apis-arkui-UIContext.md#disablesystemservicemenuitems20)屏蔽文本选择菜单内所有系统服务菜单项。 + + ```ts + import { TextMenuController } from '@kit.ArkUI'; + // xxx.ets + @Entry + @Component + struct Index { + aboutToAppear(): void { + // 禁用所有系统服务菜单 + TextMenuController.disableSystemServiceMenuItems(true); + } + + aboutToDisappear(): void { + // 页面消失恢复系统服务菜单 + TextMenuController.disableSystemServiceMenuItems(false); + } + + build() { + Row() { + Column() { + Text("这是一段文本，长按弹出文本选择菜单") + .height(60) + .fontStyle(FontStyle.Italic) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .copyOption(CopyOptions.InApp) + .editMenuOptions({ + onCreateMenu: (menuItems: Array) => { + // menuItems不包含被屏蔽的系统菜单项 + return menuItems; + }, + onMenuItemClick: (menuItem: TextMenuItem, textRange: TextRange) => { + return false; + } + }) + }.width('100%') + } + .height('100%') + } + } + ``` + + ![text_disable_system_service_menuItems](figures/text_disable_system_service_menuItems.jpg) + +- 从API version 20开始，支持通过[disableMenuItems](../reference/apis-arkui/js-apis-arkui-UIContext.md#disablemenuitems20)屏蔽文本选择菜单内指定的系统服务菜单项。 + + ```ts + import { TextMenuController } from '@kit.ArkUI'; + // xxx.ets + @Entry + @Component + struct Index { + aboutToAppear(): void { + // 禁用搜索菜单 + TextMenuController.disableMenuItems([TextMenuItemId.SEARCH]) + } + + aboutToDisappear(): void { + // 恢复系统服务菜单 + TextMenuController.disableMenuItems([]) + } + + build() { + Row() { + Column() { + Text("这是一段文本，长按弹出文本选择菜单") + .height(60) + .fontStyle(FontStyle.Italic) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .copyOption(CopyOptions.InApp) + .editMenuOptions({ + onCreateMenu: (menuItems: Array) => { + // menuItems不包含搜索 + return menuItems; + }, + onMenuItemClick: (menuItem: TextMenuItem, textRange: TextRange) => { + return false + } + }) + }.width('100%') + } + .height('100%') + } + } + ``` + + ![text_disable_menuItems](figures/text_disable_menuItems.jpg) ## 设置AI菜单 diff --git a/zh-cn/application-dev/ui/arkts-common-components-text-input.md b/zh-cn/application-dev/ui/arkts-common-components-text-input.md index 58200342441574ac4dbfa94f671e28c85f23378d..2b9a2819c5c2b71f48333068e5a639fcffc75d99 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-text-input.md +++ b/zh-cn/application-dev/ui/arkts-common-components-text-input.md @@ -233,21 +233,38 @@ TextInput({ placeholder: '输入你的邮箱...' }) .contentType(ContentType.EMAIL_ADDRESS) ``` -## 设置省略属性 +## 设置属性 -输入框可以通过[ellipsisMode](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md#ellipsismode18)属性设置省略位置。 +- 设置省略属性。 -ellipsisMode属性需要配合overflow设置为TextOverflow.Ellipsis使用，单独设置ellipsisMode属性不生效。 + 输入框可以通过[ellipsisMode](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md#ellipsismode18)属性设置省略位置。 -```ts -TextInput({ text: '这是一段文本，用来展示省略模式'}) - .textOverflow(TextOverflow.Ellipsis) - .ellipsisMode(EllipsisMode.END) - .style(TextInputStyle.Inline) - .fontSize(30) - .margin(30) -``` -![TextInput_ellipsismode](figures/TextInput_ellipsismode.jpg) + ellipsisMode属性需要配合overflow设置为TextOverflow.Ellipsis使用，单独设置ellipsisMode属性不生效。 + + ```ts + TextInput({ text: '这是一段文本，用来展示省略模式'}) + .textOverflow(TextOverflow.Ellipsis) + .ellipsisMode(EllipsisMode.END) + .style(TextInputStyle.Inline) + .fontSize(30) + .margin(30) + ``` + ![TextInput_ellipsismode](figures/TextInput_ellipsismode.jpg) + +- 设置文本描边属性。 + + 从API version 20开始，输入框可以通过[strokeWidth](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md#strokewidth20)和[strokeColor](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md#strokecolor20)属性设置文本的描边宽度及颜色。 + + ```ts + TextInput({ text: 'Text with stroke' }) + .width('100%') + .height(60) + .borderWidth(1) + .fontSize(40) + .strokeWidth(LengthMetrics.px(3.0)) + .strokeColor(Color.Red) + ``` + ![TextInput_stroke](figures/TextInput_stroke.jpg) ## 键盘避让 diff --git a/zh-cn/application-dev/ui/arkts-styled-string.md b/zh-cn/application-dev/ui/arkts-styled-string.md index 8b8ff9656dccb030172d3006ce7386dc95fe1d17..b61b879eb57084fe7e6584b5664f24e5c69e77c4 100644 --- a/zh-cn/application-dev/ui/arkts-styled-string.md +++ b/zh-cn/application-dev/ui/arkts-styled-string.md @@ -56,8 +56,8 @@ @Component struct styled_string_demo2 { textStyleAttrs: TextStyle = - new TextStyle({ fontWeight: FontWeight.Bolder, fontSize: LengthMetrics.vp(24), fontStyle: FontStyle.Italic }); - mutableStyledString: MutableStyledString = new MutableStyledString("运动35分钟 目标达成", [ + new TextStyle({ fontWeight: FontWeight.Bolder, fontSize: LengthMetrics.vp(24), fontStyle: FontStyle.Italic, strokeWidth: LengthMetrics.px(5), strokeColor: Color.Green }); + mutableStyledString: MutableStyledString = new MutableStyledString("运动45分钟 目标达成", [ { start: 2, length: 2, @@ -68,7 +68,8 @@ start: 7, length: 4, styledKey: StyledStringKey.FONT, - styledValue: new TextStyle({ fontColor: Color.Orange, fontSize: LengthMetrics.vp(12) }) + styledValue: new TextStyle({ fontColor: Color.Orange, fontSize: LengthMetrics.vp(12), + superscript: SuperscriptStyle.SUPERSCRIPT }) } ]); controller: TextController = new TextController(); @@ -139,8 +140,21 @@ start: 0, length: 3, styledKey: StyledStringKey.DECORATION, - styledValue: new DecorationStyle({ type: TextDecorationType.LineThrough, color: Color.Red }) - } + styledValue: new DecorationStyle({ type: TextDecorationType.LineThrough, color: Color.Red, thicknessScale: 3 }) + }, + { + start: 4, + length: 2, + styledKey: StyledStringKey.DECORATION, + styledValue: new DecorationStyle( + { + type: TextDecorationType.LineThrough, + }, + { + enableMultiType: true + } + ) + }, ]); controller: TextController = new TextController(); @@ -157,7 +171,7 @@ } } ``` - ![StyledString_Decoration](figures/styled_string_decoration.png) + ![StyledString_Decoration](figures/styled_string_decoration.jpg) - 创建及应用文本基线偏移量对象（BaselineOffsetStyle） @@ -617,9 +631,9 @@ ## 格式转换 -可以通过[toHtml](../reference/apis-arkui/arkui-ts/ts-universal-styled-string.md#tohtml14)、[fromHtml](../reference/apis-arkui/arkui-ts/ts-universal-styled-string.md#fromhtml)接口实现属性字符串与HTML格式字符串的相关转换，当前支持转换的HTML标签范围：\

、\、\。 +可以通过[toHtml](../reference/apis-arkui/arkui-ts/ts-universal-styled-string.md#tohtml14)、[fromHtml](../reference/apis-arkui/arkui-ts/ts-universal-styled-string.md#fromhtml)接口实现属性字符串与HTML格式字符串的相关转换，当前支持转换的HTML标签范围：\

、\、\、\
、\、\、\、\、\、\、\、\、\、\。 -以下示例展示了如何将属性字符串转换成HTML格式，并展示了如何从HTML格式转换回属性字符串。 +- 以下示例展示了如何将属性字符串转换成HTML格式，并展示了如何从HTML格式转换回属性字符串。 ```ts // xxx.ets import { image } from '@kit.ImageKit'; @@ -693,6 +707,71 @@ struct styled_string_demo8 { ![](figures/styled_string_html.gif) +- 将HTML中\、\、\、\、\、\、\、\、\、\标签及其style属性中的background-color转换为属性字符串并转回HTML。 + ```ts + // xxx.ets + @Entry + @Component + struct HtmlSpanStringDemo { + @State html: string = + "

This is b strong em i u del s www.example red span superscript and subscript

"; + @State spanString: StyledString | undefined = undefined; + @State resultText: string = ""; // 保存结果文本的状态 + controller: TextController = new TextController; + + build() { + Column() { + // 显示转换后的spanString + Text(undefined, { controller: this.controller }).height(100) + + // TextArea显示每个步骤的结果 + TextArea({ text: this.html }) + .width("100%") + .height(100) + .margin(5) + + // 按钮1:将HTML转换为SpanString + Button("Converted HTML to SpanString").onClick(async () => { + this.spanString = await StyledString.fromHtml(this.html); + this.controller.setStyledString(this.spanString); + this.resultText = "Converted HTML to SpanString successfully."; + }).margin(5) + + // 按钮2:将SpanString转换为HTML + Button("Converted SpanString to HTML").onClick(() => { + if (this.spanString) { + // 将spanString转换为HTML并替换当前的HTML状态 + const newHtml = StyledString.toHtml(this.spanString); + if (newHtml !== this.html) { // 通过检查内容是否已经相同来防止重复 + this.html = newHtml; + } + this.resultText = "Converted SpanString to HTML successfully."; + } else { + this.resultText = "SpanString is undefined."; + } + }).margin(5) + + // 按钮3:将HTML转换回SpanString + Button("Converted HTML back to SpanString").onClick(async () => { + this.spanString = await StyledString.fromHtml(this.html); + this.controller.setStyledString(this.spanString); + this.resultText = "Converted HTML back to SpanString successfully."; + }).margin(5) + + // 重置：重置HTML和SpanString + Button("Reset").onClick(() => { + this.html = + "

This is b strong em i u del s www.example red span superscript and subscript

"; + this.spanString = undefined; + this.controller.setStyledString(new StyledString("")); // 使用空的StyledString实例 + this.resultText = "Reset HTML and SpanString successfully."; + }).margin(5) + }.width("100%").padding(20) + } + } + ``` + + ![styled_string_html_2](figures/styled_string_html_2.gif) ## 场景示例 diff --git a/zh-cn/application-dev/ui/figures/RichEditor_decoration.jpg b/zh-cn/application-dev/ui/figures/RichEditor_decoration.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7de6c71992dba40045d64c33ebf13358e6cac2a7 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/RichEditor_decoration.jpg differ diff --git a/zh-cn/application-dev/ui/figures/RichEditor_decoration_multi_type.jpg b/zh-cn/application-dev/ui/figures/RichEditor_decoration_multi_type.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5a2d129741a78d4c56b458544f55f9bd87924ef7 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/RichEditor_decoration_multi_type.jpg differ diff --git a/zh-cn/application-dev/ui/figures/StyledString_TextStyle.png b/zh-cn/application-dev/ui/figures/StyledString_TextStyle.png index 204717a775b9fb9f86030539f220455a7d7e4c5f..487cb6efafd1a535970a5a7e7d1100bf70c8f89b 100644 Binary files a/zh-cn/application-dev/ui/figures/StyledString_TextStyle.png and b/zh-cn/application-dev/ui/figures/StyledString_TextStyle.png differ diff --git a/zh-cn/application-dev/ui/figures/TextInput_stroke.jpg b/zh-cn/application-dev/ui/figures/TextInput_stroke.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4c7b5c6662b8111c2259a32fcced630c40f3e74c Binary files /dev/null and b/zh-cn/application-dev/ui/figures/TextInput_stroke.jpg differ diff --git a/zh-cn/application-dev/ui/figures/Text_decoration.jpg b/zh-cn/application-dev/ui/figures/Text_decoration.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1fb8f703661262dff083189f46239e5f3539219d Binary files /dev/null and b/zh-cn/application-dev/ui/figures/Text_decoration.jpg differ diff --git a/zh-cn/application-dev/ui/figures/Text_line_spacing.jpg b/zh-cn/application-dev/ui/figures/Text_line_spacing.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0d1ab8f78a1ffa3ecb94ae365299af78a2ad7c19 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/Text_line_spacing.jpg differ diff --git a/zh-cn/application-dev/ui/figures/Text_optimize_trailing_space.jpg b/zh-cn/application-dev/ui/figures/Text_optimize_trailing_space.jpg new file mode 100644 index 0000000000000000000000000000000000000000..35e7590e649a5f71511bca5bf6dc4bc617f2ad56 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/Text_optimize_trailing_space.jpg differ diff --git a/zh-cn/application-dev/ui/figures/styled_string_decoration.jpg b/zh-cn/application-dev/ui/figures/styled_string_decoration.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e88b74202776bba144f935d08a747bb7edf7f917 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/styled_string_decoration.jpg differ diff --git a/zh-cn/application-dev/ui/figures/styled_string_decoration.png b/zh-cn/application-dev/ui/figures/styled_string_decoration.png deleted file mode 100644 index dea979fc94d55e8fbfb4515397f322315651c5f3..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/styled_string_decoration.png and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/styled_string_html_2.gif b/zh-cn/application-dev/ui/figures/styled_string_html_2.gif new file mode 100644 index 0000000000000000000000000000000000000000..823a0684f7b7ed4546c6854e190a3007fbc92c30 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/styled_string_html_2.gif differ diff --git a/zh-cn/application-dev/ui/figures/text_disable_menuItems.jpg b/zh-cn/application-dev/ui/figures/text_disable_menuItems.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2a53c87cbaec9272a99817a16911875ab73c41ba Binary files /dev/null and b/zh-cn/application-dev/ui/figures/text_disable_menuItems.jpg differ diff --git a/zh-cn/application-dev/ui/figures/text_disable_system_service_menuItems.jpg b/zh-cn/application-dev/ui/figures/text_disable_system_service_menuItems.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4c7d024df60edb8c9d845cbe0e541233a42b8667 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/text_disable_system_service_menuItems.jpg differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001511580888.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001511580888.png deleted file mode 100644 index 6496f585a1c53c9f8bf09ad9e875229333fba3d2..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001511580888.png and /dev/null differ