diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/TextArea_font_scale1.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/TextArea_font_scale1.png new file mode 100644 index 0000000000000000000000000000000000000000..0edf9c97ac9cd6be8afdd6aebcdad5c0d44209bc Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/TextArea_font_scale1.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/TextArea_font_scale2.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/TextArea_font_scale2.png new file mode 100644 index 0000000000000000000000000000000000000000..d1868bae0e60a5e34750f4381b2a28351e4e6660 Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/TextArea_font_scale2.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/TextInput_font_scale1.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/TextInput_font_scale1.png new file mode 100644 index 0000000000000000000000000000000000000000..8d70231e7dea2d6f1d9e8628b6623728373e7f50 Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/TextInput_font_scale1.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/TextInput_font_scale2.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/TextInput_font_scale2.png new file mode 100644 index 0000000000000000000000000000000000000000..45e6568b69c25e1438c4018df1a3e0f7bbd1af14 Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/TextInput_font_scale2.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/textAreaEllipsisMode.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/textAreaEllipsisMode.png index 5f7874fd236872e67e98f9f8e3eb91ab8c6c4880..bf1297795e01e92aa509a56e13d4887570bfb393 100644 Binary files a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/textAreaEllipsisMode.png and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/textAreaEllipsisMode.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/textInputEllipsisMode.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/textInputEllipsisMode.png index e685a19e094fab10f7ccd5e962712b735a32ec2a..4eeb52e2b38403d11f080fc69d3eb80cee692a5b 100644 Binary files a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/textInputEllipsisMode.png and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/textInputEllipsisMode.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-text.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-text.md index cd2ba89402719f2879b771e218a2bdaafa650a0c..1d4516c450931944a618ef5e7d71bb1d9c0cfa32 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-text.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-text.md @@ -418,7 +418,7 @@ draggable(value: boolean) 不能和[onDragStart](ts-universal-events-drag-drop.md#ondragstart)事件同时使用。 -需配合[CopyOptions](ts-appendix-enums.md#copyoptions9)使用，设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice，并且draggable设置为true时，支持对选中文本的拖拽及复制到输入框。 +当draggable设置为true时，需配合[CopyOptions](ts-appendix-enums.md#copyoptions9)使用，设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice，支持对选中文本的拖拽及复制到输入框。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md index fdc69d6e2ec69629eb7a52e05c70bf37a7d0b3ba..38a1a24b63c39562549bbf98b072d55f43643b46 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md @@ -1908,10 +1908,10 @@ struct EllipsisModeExample { @State maxLinesStr: string[] = ['1', '2', '3']; @State styleAreaIndex: number = 0; @State styleArea: TextContentStyle[] = [TextContentStyle.INLINE, TextContentStyle.DEFAULT]; - @State styleAreaStr: string[] = ['Inline', 'Default']; + @State styleAreaStr: string[] = ['INLINE', 'DEFAULT']; build() { - Column() { + Column({ space: 20 }) { TextArea({ text: this.text }) .textOverflow(this.textOverflow[this.textOverflowIndex]) .ellipsisMode(this.ellipsisMode[this.ellipsisModeIndex]) @@ -1944,7 +1944,7 @@ struct EllipsisModeExample { this.styleAreaIndex = 0; } }).fontSize(20) - }.height(600).width('100%').padding({ left: 35, right: 35, top: 35 }) + }.height(600).width('100%') } } ``` @@ -2025,10 +2025,10 @@ struct TextAreaExample { } ``` ![textCustomPaste](figures/textarea_custom_paste.PNG) - + ### 示例17（设置最小字体范围与最大字体范围） -该示例通过minFontScale、maxFontScale设置字体显示最小与最大范围。 +该示例通过minFontScale、maxFontScale设置字体显示最小与最大范围（该示例使用系统接口，应用类型需调整为系统应用，可参考HarmonyAppProvision的[系统接口说明](../../../reference/development-intro.md#系统接口说明)）。 ```json // 开启应用缩放跟随系统 @@ -2060,27 +2060,73 @@ struct TextAreaExample { ```ts // xxx.ets +import { abilityManager, Configuration } from '@kit.AbilityKit'; +import { BusinessError } from '@kit.BasicServicesKit'; + @Entry @Component struct TextAreaExample { + @State currentFontSizeScale: number = 1; @State minFontScale: number = 0.85; @State maxFontScale: number = 2; + // 设置字体大小 + async setFontScale(scale: number): Promise { + let configInit: Configuration = { + language: 'zh-Ch', + fontSizeScale: scale, + }; + // 更新配置-字体大小，调用系统接口更新字体配置 + // 需在工程的module.json5文件的requestPermissions字段配置权限：ohos.permission.UPDATE_CONFIGURATION + abilityManager.updateConfiguration(configInit, (err: BusinessError) => { + if (err) { + console.error(`updateConfiguration fail, err: ${JSON.stringify(err)}`); + } else { + this.currentFontSizeScale = scale; + console.log('updateConfiguration success.'); + } + }); + } + build() { Column() { Column({ space: 30 }) { - Text("系统字体变大变小，变大变小aaaaaaaAAAAAA") + Text("通过minFontScale、maxFontScale调整文本显示的最大和最小字体缩放倍数。") TextArea({ placeholder: 'The text area can hold an unlimited amount of text. input your word...', + text: '通过minFontScale、maxFontScale调整文本显示的最大和最小字体缩放倍数。' }) .minFontScale(this.minFontScale)// 设置最小字体缩放倍数，参数为undefined则跟随系统默认倍数缩放 - .maxFontScale(this.maxFontScale)// 设置最大字体缩放倍数，参数为undefined则跟随系统默认倍数缩放 + .maxFontScale(this.maxFontScale) // 设置最大字体缩放倍数，参数为undefined则跟随系统默认倍数缩放 }.width('100%') + + Column() { + Row() { + Button('1倍').onClick(() => { + this.setFontScale(1) + }).margin(10) + Button('1.75倍').onClick(() => { + this.setFontScale(1.75) + }).margin(10) + } + + Row() { + Button('2倍').onClick(() => { + this.setFontScale(2) + }).margin(10) + Button('3.2倍').onClick(() => { + this.setFontScale(3.2) + }).margin(10) + } + }.margin({ top: 50 }) } } } ``` - +| 系统字体缩放倍数为2倍 | 系统字体缩放倍数为3.2倍 | +| ---------------------------------- | ------------------------------------ | +| ![](figures/TextArea_font_scale1.png) | ![](figures/TextArea_font_scale2.png) | + ### 示例18（设置选中指定区域的文本内容） 该示例通过setTextSelection方法展示如何设置选中指定区域的文本内容以及菜单的显隐策略。 diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md index 14e318483688ab6a2949ad16a202f0a070777e5a..aee759d08a2117d233a5d43eba5986ff7d405c21 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md @@ -2524,7 +2524,8 @@ struct EllipsisModeExample { " pink, and lavender, creating a breath taking tapestry that stretches as far as the eye can see." + "The air is filled with the sweet scent of blooming flowers, mingling with the earthy aroma of freshly turned soil."; @State ellipsisModeIndex: number = 0; - @State ellipsisMode: (EllipsisMode | undefined | null)[] = [EllipsisMode.END, EllipsisMode.START, EllipsisMode.CENTER]; + @State ellipsisMode: (EllipsisMode | undefined | null)[] = + [EllipsisMode.END, EllipsisMode.START, EllipsisMode.CENTER]; @State ellipsisModeStr: string[] = ['END ', 'START', 'CENTER']; @State textOverflowIndex: number = 0; @State textOverflow: TextOverflow[] = [TextOverflow.Ellipsis, TextOverflow.Clip]; @@ -2532,13 +2533,13 @@ struct EllipsisModeExample { @State styleInputIndex: number = 0; @State styleInput: TextInputStyle[] = [TextInputStyle.Inline, TextInputStyle.Default]; @State styleInputStr: string[] = ['Inline', 'Default']; + build() { Row() { Column({ space: 20 }) { - Text('测试TextInput').fontSize(30) - TextInput({ text: this.text}) - .textOverflow( this.textOverflow[this.textOverflowIndex]) - .ellipsisMode( this.ellipsisMode[this.ellipsisModeIndex]) + TextInput({ text: this.text }) + .textOverflow(this.textOverflow[this.textOverflowIndex]) + .ellipsisMode(this.ellipsisMode[this.ellipsisModeIndex]) .style(this.styleInput[this.styleInputIndex]) .fontSize(30) .margin(30) @@ -2676,10 +2677,10 @@ struct TextInputExample { ``` ![TextInputEditChange](figures/TextInputEditChange.png) - + ### 示例18（设置最小字体范围与最大字体范围） -该示例通过minFontScale、maxFontScale设置字体显示最小与最大范围。 +该示例通过minFontScale、maxFontScale设置字体显示最小与最大范围（该示例使用系统接口，应用类型需调整为系统应用，可参考HarmonyAppProvision的[系统接口说明](../../../reference/development-intro.md#系统接口说明)）。 ```json // 开启应用缩放跟随系统 @@ -2711,27 +2712,73 @@ struct TextInputExample { ```ts // xxx.ets +import { abilityManager, Configuration } from '@kit.AbilityKit'; +import { BusinessError } from '@kit.BasicServicesKit'; + @Entry @Component struct TextInputExample { + @State currentFontSizeScale: number = 1; @State minFontScale: number = 0.85; @State maxFontScale: number = 2; + // 设置字体大小 + async setFontScale(scale: number): Promise { + let configInit: Configuration = { + language: 'zh-Ch', + fontSizeScale: scale, + }; + // 更新配置-字体大小，调用系统接口更新字体配置 + // 需在工程的module.json5文件的requestPermissions字段配置权限：ohos.permission.UPDATE_CONFIGURATION + abilityManager.updateConfiguration(configInit, (err: BusinessError) => { + if (err) { + console.error(`updateConfiguration fail, err: ${JSON.stringify(err)}`); + } else { + this.currentFontSizeScale = scale; + console.log('updateConfiguration success.'); + } + }); + } + build() { Column() { Column({ space: 30 }) { - Text("系统字体变大变小，变大变小aaaaaaaAAAAAA") + Text("通过minFontScale、maxFontScale调整文本显示的最大和最小字体缩放倍数。") TextInput({ placeholder: 'The text area can hold an unlimited amount of text. input your word...', + text: '通过minFontScale、maxFontScale调整文本显示的最大和最小字体缩放倍数。' }) .minFontScale(this.minFontScale)// 设置最小字体缩放倍数，参数为undefined则跟随系统默认倍数缩放 - .maxFontScale(this.maxFontScale)// 设置最大字体缩放倍数，参数为undefined则跟随系统默认倍数缩放 + .maxFontScale(this.maxFontScale) // 设置最大字体缩放倍数，参数为undefined则跟随系统默认倍数缩放 }.width('100%') + + Column() { + Row() { + Button('1倍').onClick(() => { + this.setFontScale(1) + }).margin(10) + Button('1.75倍').onClick(() => { + this.setFontScale(1.75) + }).margin(10) + } + + Row() { + Button('2倍').onClick(() => { + this.setFontScale(2) + }).margin(10) + Button('3.2倍').onClick(() => { + this.setFontScale(3.2) + }).margin(10) + } + }.margin({ top: 50 }) } } } ``` - +| 系统字体缩放倍数为2倍 | 系统字体缩放倍数为3.2倍 | +| ---------------------------------- | ------------------------------------ | +| ![](figures/TextInput_font_scale1.png) | ![](figures/TextInput_font_scale2.png) | + ### 示例19（设置选中指定区域的文本内容） 该示例通过setTextSelection方法展示如何设置选中指定区域的文本内容以及菜单的显隐策略。