diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/focus.png b/zh-cn/application-dev/reference/arkui-ts/figures/focus.png index 217dcfbca0de33adef4ffa0d90fd167192845c3c..dcd16fbecdce07e04721915ff9d9777590d39e7a 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/focus.png and b/zh-cn/application-dev/reference/arkui-ts/figures/focus.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/keyEvent.png b/zh-cn/application-dev/reference/arkui-ts/figures/keyEvent.png new file mode 100644 index 0000000000000000000000000000000000000000..defa53e2581a56c7fb0933d85c0ce1578ebbfd48 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/keyEvent.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/mouse.png b/zh-cn/application-dev/reference/arkui-ts/figures/mouse.png new file mode 100644 index 0000000000000000000000000000000000000000..28baf4e713b69b4bea0e9ed3498a4a2ce12fc2b3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/mouse.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/mouse1.png b/zh-cn/application-dev/reference/arkui-ts/figures/mouse1.png new file mode 100644 index 0000000000000000000000000000000000000000..dc3ea1fb958f1de66f6310e22b6163ebfbfb7494 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/mouse1.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/patternlock.gif b/zh-cn/application-dev/reference/arkui-ts/figures/patternlock.gif index 5fb034ddcf247a1fecaaeb33e27d103bd8225a91..727c647d243ae4570de18f5e02d86acbe4ab4153 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/patternlock.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/patternlock.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/search.gif b/zh-cn/application-dev/reference/arkui-ts/figures/search.gif new file mode 100644 index 0000000000000000000000000000000000000000..1b4847e0debeea617d8ea9af34112dca636651f2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/search.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/search.png b/zh-cn/application-dev/reference/arkui-ts/figures/search.png deleted file mode 100644 index fddf98d7104f3bd8a370b5be86da322834ff0180..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/search.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textInput.gif b/zh-cn/application-dev/reference/arkui-ts/figures/textInput.gif new file mode 100644 index 0000000000000000000000000000000000000000..d980afbcb988222e44af1b359388a0ed6492264e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/textInput.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264364.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264364.gif deleted file mode 100644 index acbeb39682258aa37a6162230fa5b5bd1ed6a226..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264364.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001179613854.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001179613854.gif index b1724791e4acb31d193a0dce267e42c99288c6bd..aed89b3e86f0846762b81c0e40512d77260c8db7 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001179613854.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001179613854.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001208256092.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001208256092.png deleted file mode 100644 index b15b9d83968672a6771322069b47394cfb3b8c1f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001208256092.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001209874754.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001209874754.gif index f0962619f5df0fec543cd693195045c9203378d9..e83d5b33f9b10e586aa2288f6271c51fd79fab47 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001209874754.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001209874754.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001210353788.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001210353788.gif index b8a7961adce1b592b8fdbce98966c70cf1da68e8..38ffa5ca3c66dc3852f3a6045789473e8bdb0c41 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001210353788.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001210353788.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864151.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864151.gif index c18ae783333765788db1b8bf6107ee0c117ec9e6..4edf113bcfe487f1b10ddd123dfdbb3ab612af92 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864151.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864151.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250678457.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250678457.gif index 96afd9a948c90e22cd52ab4c55218bf97591b3ec..3696c7f08f6c7ef551d16da53ca167ddb8b6a5fa 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250678457.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001250678457.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252667389.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252667389.gif index a5092180309ecb061248cc205e4bd667eb290085..198227c0282462bfb34f5363a7996a6817e1bb83 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252667389.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252667389.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252769643.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252769643.gif deleted file mode 100644 index 9fa5c075ecc4f157f1e66316f4b56f28ffa2007d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001252769643.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md index c832a0840a16df0460aac5e5775460b362144e83..84b7beced4cbbceeec140fab8dab577175b4bcf9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md @@ -1,6 +1,6 @@ # PatternLock -图案密码锁组件，以宫格图案的方式输入密码，用于密码验证。手指触碰图案密码锁时开始进入输入状态，手指离开屏幕时结束输入状态并向应用返回输入的密码。 +图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态，手指离开屏幕时结束输入状态完成密码输入。 > **说明：** > @@ -16,36 +16,36 @@ PatternLock(controller?: PatternLockController) **参数:** -| 参数名 | 参数类型 | 必填 | 描述 | -| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | -| controller | [PatternLockController](#patternlockcontroller) | 否 | 给组件绑定一个控制器，用来控制组件状态重置。
默认值：null | +| 参数名 | 参数类型 | 必填 | 描述 | +| ---------- | ----------------------------------------------- | ---- | --------------------------------------------------- | +| controller | [PatternLockController](#patternlockcontroller) | 否 | 设置PatternLock组件控制器，可用于控制组件状态重置。 | ## 属性 -不支持`backgroundColor`以外的通用属性设置。 +不支持除backgroundColor以外的通用属性设置。 | 名称 | 参数类型 | 描述 | | --------------- | ------------------------------------- | ------------------------------------------------------------ | -| sideLength | [Length](ts-types.md#length) | 设置组件的宽度和高度（相同值）。最小可以设置为0。
默认值：300vp | -| circleRadius | [Length](ts-types.md#length) | 设置宫格圆点的半径。
默认值：14vp | +| sideLength | [Length](ts-types.md#length) | 设置组件的宽度和高度（宽高相同）。设置为0或负数等非法值时组件不显示。
默认值：300vp | +| circleRadius | [Length](ts-types.md#length) | 设置宫格中圆点的半径。
默认值：14vp | | regularColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“未选中”状态的填充颜色。
默认值：Color.Black | | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“选中”状态的填充颜色。
默认值：Color.Black | -| activeColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“激活”状态的填充颜色。
默认值：Color.Black | +| activeColor | [ResourceColor](ts-types.md#resourcecolor) | 设置宫格圆点在“激活”状态的填充颜色（“激活”状态为手指经过圆点但还未选中的状态）。
默认值：Color.Black | | pathColor | [ResourceColor](ts-types.md#resourcecolor) | 设置连线的颜色。
默认值：Color.Blue | -| pathStrokeWidth | number \| string | 设置连线的宽度。最小可以设置为0。
默认值：34vp | -| autoReset | boolean | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。
默认值：true | +| pathStrokeWidth | number \| string | 设置连线的宽度。设置为0或负数等非法值时连线不显示。
默认值：34vp | +| autoReset | boolean | 设置在完成密码输入后再次在组件区域按下时是否重置组件状态。设置为true，完成密码输入后再次在组件区域按下时会重置组件状态（即清除之前输入的密码）；反之若设置为false，则不会重置组件状态。
默认值：true | ## 事件 除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： -| 名称 | 描述 | -| ---------------------------------------- | ---------------------------------------- | -| onPatternComplete(callback: (input: Array\) => void) | 密码输入结束时被调用的回调函数。
input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0到8）。 | +| 名称 | 描述 | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onPatternComplete(callback: (input: Array\) => void) | 密码输入结束时触发该回调。
input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格圆点的索引值（第一行圆点从左往右依次为0,1,2，第二行圆点依次为3,4,5，第三行圆点依次为6,7,8）。 | ## PatternLockController -PatternLock组件的控制器，可以将此对象绑定至PatternLock组件，然后通过它进行状态重置。 +PatternLock组件的控制器，可以通过它进行组件状态重置。 ### 导入对象 @@ -66,44 +66,48 @@ reset(): void @Entry @Component struct PatternLockExample { - @State passwords: Number[] = [] - @State message: string = 'please input password' - private patternLockController: PatternLockController = new PatternLockController() - + @State passwords: Number[] = []; + @State message: string = 'please input password!'; + private patternLockController: PatternLockController = new PatternLockController(); + build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Text(this.message).textAlign(TextAlign.Center) + Column() { + Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20) PatternLock(this.patternLockController) - .sideLength(150) - .circleRadius(7) - .pathStrokeWidth(17) - .backgroundColor(Color.White) + .sideLength(200) + .circleRadius(9) + .pathStrokeWidth(18) + .activeColor('#B0C4DE') + .selectedColor('#228B22') + .pathColor('#90EE90') + .backgroundColor('#F5F5F5') .autoReset(true) .onPatternComplete((input: Array) => { - // 判断输出的密码格式 + // 输入的密码长度小于5时，提示重新输入 if (input === null || input === undefined || input.length < 5) { - this.message = 'The password length needs to be greater than 5.' - // 重新触发该回调 - return + this.message = 'The password length needs to be greater than 5, please enter again.'; + return; } // 判断密码长度是否大于0 if (this.passwords.length > 0) { - // 判断俩次输入的密码是否相等 + // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入 if (this.passwords.toString() === input.toString()) { - this.passwords = input - this.message = 'Set password successfully: ' + this.passwords.toString() + this.passwords = input; + this.message = 'Set password successfully: ' + this.passwords.toString(); } else { - this.message = 'Inconsistent passwords, please enter again.' + this.message = 'Inconsistent passwords, please enter again.'; } } else { - this.passwords = input - this.message = "Please enter again." + // 提示第二次输入密码 + this.passwords = input; + this.message = "Please enter again."; } }) - Button('reset button').margin(30).onClick(() => { - this.patternLockController.reset() - this.passwords = [] - this.message = 'Please input password' + Button('Reset PatternLock').margin(30).onClick(() => { + // 重置密码锁 + this.patternLockController.reset(); + this.passwords = []; + this.message = 'Please input password'; }) }.width('100%').height('100%') } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md index 7c462124413e61c899dd88140eaece424090c9d0..5ef5eb32640819630c1fac3829ca9cfe1e8a1333 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md @@ -1,6 +1,6 @@ # Search -提供搜索框组件，用于提供用户搜索内容的输入区域。 +搜索框组件，适用于浏览器的搜索内容输入框等应用场景。 > **说明：** > @@ -18,37 +18,37 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll | 参数名 | 参数类型 | 必填 | 参数描述 | | ----------- | ---------------- | ---- | ------------------------------------------------------------ | -| value | string | 否 | 搜索文本值。 | -| placeholder | string | 否 | 无输入时的提示文本。 | -| icon | string | 否 | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg、jpg和png。 | -| controller | SearchController | 否 | 控制器。 | +| value | string | 否 | 设置当前显示的搜索文本内容。 | +| placeholder | string | 否 | 设置无输入时的提示文本。 | +| icon | string | 否 | 设置搜索图标路径，默认使用系统搜索图标，图标支持的图源格式: svg、jpg和png。 | +| controller | SearchController | 否 | 设置Search组件控制器。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 名称 | 参数类型 | 描述 | -| ----------------------- | ------------------------------------------------ | ---------------------------------------------- | -| searchButton | string | 搜索框末尾搜索按钮文本值，默认无搜索按钮。 | -| placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | 设置placeholder颜色。 | -| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 | -| textFont | [Font](ts-types.md#font) | 设置搜索框内文本样式。 | -| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 | -| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本对齐方式。
默认值：TextAlign.Start | +| 名称 | 参数类型 | 描述 | +| ----------------------- | ------------------------------------------------ | ---------------------------------------------------------- | +| searchButton | string | 搜索框末尾搜索按钮文本内容，默认无搜索按钮。 | +| placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | 设置placeholder文本颜色。 | +| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 | +| textFont | [Font](ts-types.md#font) | 设置搜索框内输入文本样式。 | +| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置输入的文本是否可复制。 | +| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本在搜索框中的对齐方式。
默认值：TextAlign.Start | ## 事件 -| 名称 | 功能描述 | -| ---------------------------------------- | ---------------------------------------- | -| onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发。
-value: 当前输入文本框的内容。 | -| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发回调。
-value: 当前输入文本框的内容。 | -| onCopy(callback: (value: string) => void) | 组件触发系统剪切板复制操作。
-value: 复制的文本内容。 | -| onCut(callback: (value: string) => void) | 组件触发系统剪切板剪切操作。
-value: 剪切的文本内容。 | -| onPaste(callback: (value: string) => void) | 组件触发系统剪切板粘贴操作。
-value: 粘贴的文本内容。 | +| 名称 | 功能描述 | +| ------------------------------------------- | ------------------------------------------------------------ | +| onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。
-value: 当前搜索框中输入的文本内容。 | +| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。
-value: 当前搜索框中输入的文本内容。 | +| onCopy(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的复制按钮触发该回调。
-value: 复制的文本内容。 | +| onCut(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的剪切按钮触发该回调。
-value: 剪切的文本内容。 | +| onPaste(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的粘贴按钮触发该回调。
-value: 粘贴的文本内容。 | ## SearchController -Search组件的控制器，通过它操作Search组件。 +Search组件的控制器，目前通过它可控制Search组件的光标位置。 ### 导入对象 ``` @@ -73,30 +73,36 @@ caretPosition(value: number): void @Entry @Component struct SearchExample { - @State changeValue: string = '' - @State submitValue: string = '' - controller: SearchController = new SearchController() + @State changeValue: string = ''; + @State submitValue: string = ''; + controller: SearchController = new SearchController(); build() { - Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { - Text(this.submitValue) - Text(this.changeValue) - Search({value: this.changeValue, placeholder: 'Type to search', controller: this.controller}) - .searchButton('Search') + Column() { + Text('onSubmit:' + this.submitValue).fontSize(18).margin(15) + Text('onChange:' + this.changeValue).fontSize(18).margin(15) + Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller }) + .searchButton('SEARCH') .width(400) - .height(35) + .height(40) .backgroundColor(Color.White) .placeholderColor(Color.Grey) - .placeholderFont({ size: 26, weight: 10, family: 'serif', style: FontStyle.Normal }) + .placeholderFont({ size: 14, weight: 400 }) + .textFont({ size: 14, weight: 400 }) .onSubmit((value: string) => { - this.submitValue = value + this.submitValue = value; }) .onChange((value: string) => { - this.changeValue = value + this.changeValue = value; }) - .margin({ top: 30, left:10, right:10 }) - } + .margin(20) + Button('Set caretPosition 1') + .onClick(() => { + // 设置光标位置到输入的第一个字符后 + this.controller.caretPosition(1); + }) + }.width('100%') } } ``` -![search](figures/search.png) \ No newline at end of file +![search](figures/search.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md index 0aa1c8acede3ba6135fd598ac4dc86f4ed43ba4f..e34877a20cf411a45b4e2edf0486da93841c2ad3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -1,6 +1,6 @@ # Slider -滑动条组件，用来快速调节设置值，如音量、亮度等。 +滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。 > **说明：** > @@ -23,10 +23,10 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty | value | number | 否 | 当前进度值。
默认值：0 | | min | number | 否 | 设置最小值。
默认值：0 | | max | number | 否 | 设置最大值。
默认值：100 | -| step | number | 否 | 设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。
默认值：1 | -| style | SliderStyle | 否 | 设置Slider的滑块样式。
默认值：SliderStyle.OutSet | +| step | number | 否 | 设置Slider滑动步长。
默认值：1 | +| style | SliderStyle | 否 | 设置Slider的滑块与滑轨显示样式。
默认值：SliderStyle.OutSet | | direction8+ | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。
默认值：Axis.Horizontal | -| reverse8+ | boolean | 否 | 设置滑动条取值范围是否反向。
默认值：false | +| reverse8+ | boolean | 否 | 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。
默认值：false | ## SliderStyle枚举说明 @@ -38,34 +38,34 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty ## 属性 -不支持触摸热区设置。 +支持除触摸热区以外的通用属性设置。 | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | | blockColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑块的颜色。 | | trackColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的背景颜色。 | -| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动颜色。 | +| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动部分颜色。 | | showSteps | boolean | 设置当前是否显示步长刻度值。
默认值：false | -| showTips | boolean | 设置滑动时是否显示气泡提示百分比。
默认值：false | +| showTips | boolean | 设置滑动时是否显示百分比气泡提示。
默认值：false | | trackThickness | [Length](ts-types.md#length) | 设置滑轨的粗细。 | ## 事件 -通用事件仅支持：OnAppear，OnDisAppear。 +通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。 | 名称 | 功能描述 | | -------- | -------- | -| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Slider滑动时触发事件回调。
value：当前进度值。若返回值有小数，可使用Math.toFixed()将数据处理为想要的精度。
mode：拖动状态。 | +| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Slider滑动时触发事件回调。
value：滑动进度值。若返回值有小数，可使用Math.toFixed()方法将数据处理为预期的精度。
mode：拖动状态。 | ## SliderChangeMode枚举说明 | 名称 | 值 | 描述 | | -------- | -------- | -------- | -| Begin | 0 | 用户开始拖动滑块。 | -| Moving | 1 | 用户拖动滑块中。 | -| End | 2 | 用户结束拖动滑块。 | -| Click | 3 | 用户点击滑动条使滑块位置移动。 | +| Begin | 0 | 开始拖动滑块。 | +| Moving | 1 | 正在拖动滑块过程中。 | +| End | 2 | 结束拖动滑块。 | +| Click | 3 | 点击滑动条使滑块位置移动。 | ## 示例 @@ -75,105 +75,150 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty @Entry @Component struct SliderExample { - @State outSetValue: number = 40 - @State inSetValue: number = 40 - @State outVerticalSetValue: number = 40 - @State inVerticalSetValue: number = 40 + @State outSetValueOne: number = 40; + @State inSetValueOne: number = 40; + @State outSetValueTwo: number = 40; + @State inSetValueTwo: number = 40; + @State vOutSetValueOne: number = 40; + @State vInSetValueOne: number = 40; + @State vOutSetValueTwo: number = 40; + @State vInSetValueTwo: number = 40; build() { - Column({ space: 5 }) { - Text('slider out set').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column({ space: 8 }) { + Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) Row() { Slider({ - value: this.outSetValue, + value: this.outSetValueOne, min: 0, max: 100, - step: 1, style: SliderStyle.OutSet }) - .blockColor(Color.Blue) - .trackColor(Color.Gray) - .selectedColor(Color.Blue) - .showSteps(true) - .showTips(true) - .onChange((value: number, mode: SliderChangeMode) => { - this.outSetValue = value - console.info('value:' + value + 'mode:' + mode.toString()) + .showTips(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.outSetValueOne = value; + console.info('value:' + value + 'mode:' + mode.toString()); + }) + // toFixed(0)将滑动条返回值处理为整数精度 + Text(this.outSetValueOne.toFixed(0)).fontSize(12) + } + .width('80%') + Row() { + Slider({ + value: this.outSetValueTwo, + step: 10, + style: SliderStyle.OutSet }) - Text(this.outSetValue.toFixed(0)).fontSize(16) + .showSteps(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.outSetValueTwo = value; + console.info('value:' + value + 'mode:' + mode.toString()); + }) + Text(this.outSetValueTwo.toFixed(0)).fontSize(12) } - .padding({ top: 50 }) .width('80%') - Text('slider in set').fontSize(9).fontColor(0xCCCCCC).width('90%') + Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) Row() { Slider({ - value: this.inSetValue, + value: this.inSetValueOne, min: 0, max: 100, - step: 1, style: SliderStyle.InSet }) - .blockColor(0xCCCCCC) - .trackColor(Color.Black) - .selectedColor(0xCCCCCC) - .showSteps(false) - .showTips(false) - .onChange((value: number, mode: SliderChangeMode) => { - this.inSetValue = value - console.info('value:' + value + 'mode:' + mode.toString()) - }) - Text(this.inSetValue.toFixed(0)).fontSize(16) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') + .showTips(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.inSetValueOne = value; + console.info('value:' + value + 'mode:' + mode.toString()); + }) + Text(this.inSetValueOne.toFixed(0)).fontSize(12) } .width('80%') - Row() { - Column() { - Text('slider out direction set').fontSize(9).fontColor(0xCCCCCC).width('50%') - Slider({ - value: this.outVerticalSetValue, - min: 0, - max: 100, - step: 1, - style: SliderStyle.OutSet, - direction: Axis.Vertical - }) - .blockColor(Color.Blue) - .trackColor(Color.Gray) - .selectedColor(Color.Blue) + Slider({ + value: this.inSetValueTwo, + step: 10, + style: SliderStyle.InSet + }) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') .showSteps(true) - .showTips(true) .onChange((value: number, mode: SliderChangeMode) => { - this.outVerticalSetValue = value - console.info('value:' + value + 'mode:' + mode.toString()) + this.inSetValueTwo = value; + console.info('value:' + value + 'mode:' + mode.toString()); }) - Text(this.outVerticalSetValue.toFixed(0)).fontSize(16) + Text(this.inSetValueTwo.toFixed(0)).fontSize(12) + } + .width('80%') + + Row() { + Column() { + Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) + Row() { + Slider({ + value: this.vOutSetValueOne, + style: SliderStyle.OutSet, + direction: Axis.Vertical + }) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') + .showTips(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.vOutSetValueOne = value; + console.info('value:' + value + 'mode:' + mode.toString()); + }) + Slider({ + value: this.vOutSetValueTwo, + step: 10, + style: SliderStyle.OutSet, + direction: Axis.Vertical + }) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') + .showSteps(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.vOutSetValueTwo = value; + console.info('value:' + value + 'mode:' + mode.toString()); + }) + } }.width('50%').height(300) Column() { - Text('slider in direction set').fontSize(9).fontColor(0xCCCCCC).width('50%') - Slider({ - value: this.inVerticalSetValue, - min: 0, - max: 100, - step: 1, - style: SliderStyle.InSet, - direction: Axis.Vertical - }) - .blockColor(0xCCCCCC) - .trackColor(Color.Black) - .selectedColor(0xCCCCCC) - .showSteps(false) - .showTips(false) - .onChange((value: number, mode: SliderChangeMode) => { - this.inVerticalSetValue = value - console.info('value:' + value + 'mode:' + mode.toString()) - }) - Text(this.inVerticalSetValue.toFixed(0)).fontSize(16) + Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) + Row() { + Slider({ + value: this.vInSetValueOne, + style: SliderStyle.InSet, + direction: Axis.Vertical, + reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true + }) + .showTips(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.vInSetValueOne = value; + console.info('value:' + value + 'mode:' + mode.toString()); + }) + Slider({ + value: this.vInSetValueTwo, + step: 10, + style: SliderStyle.InSet, + direction: Axis.Vertical, + reverse: true + }) + .showSteps(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.vInSetValueTwo = value; + console.info('value:' + value + 'mode:' + mode.toString()); + }) + } }.width('50%').height(300) } - - }.width('100%').margin({ top: 5 }) + }.width('100%') } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md index 2fef65d34dbd1015a8bcd69b35f331e65d918ea6..2f4d0806b59cbcbdb90073e38f5767c267a5b446 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md @@ -1,6 +1,6 @@ # Stepper -应用步骤方式切换页面的组件。 +步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景。 > **说明：** @@ -24,7 +24,7 @@ Stepper(value?: { index?: number }) | 参数名 | 参数类型 | 必填 | 参数描述 | | ------| -------- | --------------- | -------- | -| index | number | 否 | 设置步骤导航器显示第几个StepperItem。
默认值：0 | +| index | number | 否 | 设置步骤导航器当前显示StepperItem的索引值。
默认值：0 | ## 属性 @@ -38,9 +38,9 @@ Stepper(value?: { index?: number }) | -------- | -------- | | onFinish(callback: () => void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调 。 | | onSkip(callback: () => void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 | -| onChange(callback: (prevIndex?: number, index?: number) => void) | 点击左边或者右边文本按钮进行步骤切换时触发该事件。
- prevIndex：切换前的步骤页索引值。
- index：切换后的步骤页（前一页或者下一页）索引值。 | -| onNext(callback: (index?: number, pendingIndex?: number) => void) | 点击切换下一步骤时触发该事件。
- index：当前步骤页索引值。
- pendingIndex：下一步骤页索引值。 | -| onPrevious(callback: (index?: number, pendingIndex?: number) => void) | 点击切换上一步骤时触发该事件。
- index：当前步骤页索引值。
- pendingIndex：上一步骤页索引值。 | +| onChange(callback: (prevIndex?: number, index?: number) => void) | 点击当前StepperItem的prevLabel或nextLabel进行步骤切换时触发该回调。
- prevIndex：切换前的步骤页索引值。
- index：切换后的步骤页（前一页或者下一页）索引值。 | +| onNext(callback: (index?: number, pendingIndex?: number) => void) | 点击StepperItem的nextLabel切换下一步骤时触发该回调。
- index：当前步骤页索引值。
- pendingIndex：下一步骤页索引值。 | +| onPrevious(callback: (index?: number, pendingIndex?: number) => void) | 点击StepperItem的prevLabel切换上一步骤时触发该回调。
- index：当前步骤页索引值。
- pendingIndex：上一步骤页索引值。 | ## 示例 @@ -50,76 +50,86 @@ Stepper(value?: { index?: number }) @Entry @Component struct StepperExample { - @State currentIndex: number = 0 - @State firstState: ItemState = ItemState.Normal - @State secondState: ItemState = ItemState.Normal + @State currentIndex: number = 0; + @State firstState: ItemState = ItemState.Normal; + @State secondState: ItemState = ItemState.Normal; + @State thirdState: ItemState = ItemState.Normal; build() { Stepper({ index: this.currentIndex }) { + // 第一个步骤页 StepperItem() { - Text('Page One') - .fontSize(35) - .fontColor(Color.Blue) - .width(200) - .lineHeight(50) - .margin({ top: 250 }) + Column() { + Text('Page One') + .fontSize(35) + .fontColor(Color.Blue) + .lineHeight(50) + .margin({ top: 250, bottom: 50 }) + Button('change status:' + this.firstState) + .onClick(() => { + this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip; + }) + }.width('100%') } - .nextLabel('') - .position({ x: '35%', y: 0 }) - + .nextLabel('Next') + .status(this.firstState) + // 第二个步骤页 StepperItem() { - Text('Page Two') - .fontSize(35) - .fontColor(Color.Blue) - .width(200) - .lineHeight(50) - .margin({ top: 250 }) - .onClick(() => { - this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip - }) + Column() { + Text('Page Two') + .fontSize(35) + .fontColor(Color.Blue) + .lineHeight(50) + .margin({ top: 250, bottom: 50 }) + Button('change status:' + this.secondState) + .onClick(() => { + this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled; + }) + }.width('100%') } .nextLabel('Next') .prevLabel('Previous') - .status(this.firstState) - .position({ x: '35%', y: 0 }) - + .status(this.secondState) + // 第三个步骤页 StepperItem() { - Text('Page Three') - .fontSize(35) - .fontColor(Color.Blue) - .width(200) - .lineHeight(50) - .margin({ top: 250 }) - .onClick(() => { - this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting - }) + Column() { + Text('Page Three') + .fontSize(35) + .fontColor(Color.Blue) + .lineHeight(50) + .margin({ top: 250, bottom: 50 }) + Button('change status:' + this.thirdState) + .onClick(() => { + this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting; + }) + }.width('100%') } - .position({ x: '35%', y: 0 }) - .status(this.secondState) - + .status(this.thirdState) + // 第四个步骤页 StepperItem() { Text('Page four') .fontSize(35) .fontColor(Color.Blue) - .width(200) + .width('100%') + .textAlign(TextAlign.Center) .lineHeight(50) .margin({ top: 250 }) } - .position({ x: '35%', y: 0 }) .nextLabel('Finish') } .onFinish(() => { - console.log('onFinish') + // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等 + console.info('onFinish'); }) .onSkip(() => { - console.log('onSkip') + // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等 + console.info('onSkip'); }) .onChange((prevIndex: number, index: number) => { - this.currentIndex = index + this.currentIndex = index; }) - .align(Alignment.Center) } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md index ef51de1cc1d89511764887f30c382f53bc3ba175..8f33da5b9fb0c367b6d05328b42bd4601ea5d26d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md @@ -22,18 +22,18 @@ StepperItem() | 参数名 | 参数类型 | 参数描述 | | -------- | -------- | -------- | -| prevLabel | string | 当步骤导航器大于一页，除第一页默认值都为“返回”。 | -| nextLabel | string | 步骤导航器大于一页时，最后一页默认值为“开始”，其余页默认值为“下一步”。 | -| status | ItemState | 步骤导航器元素的状态。
默认值：ItemState.Normal | +| prevLabel | string | 设置左侧文本按钮内容，第一页没有左侧文本按钮，当步骤导航器大于一页时，除第一页外默认值都为“返回”。 | +| nextLabel | string | 设置右侧文本按钮内容，最后一页默认值为“开始”，其余页默认值为“下一步”。 | +| status | ItemState | 步骤导航器nextLabel的显示状态。
默认值：ItemState.Normal | ## ItemState枚举说明 -| 名称 | 描述 | -| -------- | -------- | -| Normal | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 | -| Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 | -| Waiting | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 | -| Skip | 跳过状态，表示跳过当前步骤, 进入下一个StepperItem。 | +| 名称 | 值 | 描述 | +| -------- | -------- | -------- | +| Normal | 0 | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 | +| Disabled | 1 | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 | +| Waiting | 2 | 等待状态，右侧文本按钮不显示，显示等待进度条，不可点击进入下一个StepperItem。 | +| Skip | 3 | 跳过状态，右侧文本按钮显示“跳过”，此时可在Stepper的onSkip回调中自定义相关逻辑。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index 891a64f002bcc49e64f9414722cdc0e70b162021..aa69da3a75a1861fd8c5a25d33c6d01a960975a4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -1,6 +1,6 @@ # TextInput -可以输入单行文本并支持响应输入事件的组件。 +单行文本输入框组件。 > **说明：** > @@ -20,38 +20,38 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te | 参数名 | 参数类型 | 必填 | 参数描述 | | ----------------------- | ---------------------------------------- | ---- | --------------- | -| placeholder | [ResourceStr](ts-types.md#resourcestr) | 否 | 无输入时的提示文本。 | +| placeholder | [ResourceStr](ts-types.md#resourcestr) | 否 | 设置无输入时的提示文本。 | | text | [ResourceStr](ts-types.md#resourcestr) | 否 | 设置输入框当前的文本内容。 | | controller8+ | [TextInputController](#textinputcontroller8) | 否 | 设置TextInput控制器。 | ## 属性 -除支持通用属性以及[文本样式设置](ts-universal-attributes-text-style.md)的属性外，还支持以下属性： +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： | 名称 | 参数类型 | 描述 | | ------------------------ | ---------------------------------------- | ---------------------------------------- | | type | InputType | 设置输入框类型。
默认值：InputType.Normal | -| placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | 设置placeholder颜色。| +| placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | 设置placeholder文本颜色。 | | placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 | | enterKeyType | EnterKeyType | 设置输入法回车键类型。
默认值：EnterKeyType.Done | | caretColor | [ResourceColor](ts-types.md#resourcecolor) | 设置输入框光标颜色。 | | maxLength | number | 设置文本的最大输入字符数。 | -| inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr),
error?: (value: string) => void
} | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。
- value：设置正则表达式。
- error：正则匹配失败时，返回被忽略的内容。 | -| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 | -| showPasswordIcon9+ | boolean | 密码输入模式时，密码框末尾的图标是否显示。
默认值：true | -| style9+ | TextInputStyle | TextInput风格。
默认值：TextInputStyle.Default | -| textAlign9+ | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本水平对齐式。
默认值：TextAlign.Start | +| inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr),
error?: (value: string) => void
} | 正则表达式，匹配表达式的输入允许显示，不匹配的输入将被过滤。目前仅支持单个字符匹配，不支持字符串匹配。
- value：设置正则表达式。
- error：正则匹配失败时，返回被过滤的内容。 | +| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置输入的文本是否可复制。 | +| showPasswordIcon9+ | boolean | 密码输入模式时，输入框末尾的图标是否显示。
默认值：true | +| style9+ | TextInputStyle | 设置输入框为默认风格或内联输入风格。
默认值：TextInputStyle.Default | +| textAlign9+ | [TextAlign](ts-appendix-enums.md#textalign) | 设置输入文本在输入框中的对齐方式。
默认值：TextAlign.Start | ## EnterKeyType枚举说明 | 名称 | 描述 | | ------------------- | --------- | -| Go | 显示Go文本。 | +| Go | 显示为前往样式。 | | Search | 显示为搜索样式。 | | Send | 显示为发送样式。 | | Next | 显示为下一个样式。 | -| Done | 标准样式。 | +| Done | 显示为确认样式。 | ## InputType枚举说明 @@ -59,28 +59,30 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te | ------------------ | ------------- | | Normal | 基本输入模式。
支持输入数字、字母、下划线、空格、特殊字符。 | | Password | 密码输入模式。 | -| Email | e-mail地址输入模式。 | +| Email | 邮箱地址输入模式。 | | Number | 纯数字输入模式。 | -| PhoneNumber9+ | 电话号码输入模式。
支持输入数字、+ 、-、*、#，长度不限。 | +| PhoneNumber9+ | 电话号码输入模式。
支持输入数字、+ 、-、#，长度不限。 | ## TextInputStyle9+枚举说明 | 名称 | 描述 | | ------------------ | ------------- | -| Default | 默认风格，光标宽1.5vp，光标高度和字体大小高度相关，字体越大光标越高。 | -| Inline | 内联输入风格。文字选中时底板与输入框同高。 | +| Default | 默认风格，光标宽1.5vp，光标高度与文本选中底板高度和字体大小相关。 | +| Inline | 内联输入风格。文本选中底板高度与输入框高度相同。 | ## 事件 -| 名称 | 功能描述 | -| ---------------------------------------- | ---------------------------------------- | -| onChange(callback: (value: string) => void) | 输入发生变化时，触发回调。 | -| onSubmit(callback: (enterKey: EnterKeyType) => void) | 回车键或者软键盘回车键触发该回调，参数为当前软键盘回车键类型。 | -| onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | 输入状态变化时，触发回调。 | -| onEditChange(callback: (isEditing: boolean) => void) 8+ | 输入状态变化时，触发回调。 | -| onCopy8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发回调。
value：复制的文本内容。 | -| onCut8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。
value：剪切的文本内容。 | -| onPaste8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。
value：粘贴的文本内容。 | +除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： + +| 名称 | 功能描述 | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。 | +| onSubmit(callback: (enterKey: EnterKeyType) => void) | 按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。 | +| onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | 输入状态变化时，触发该回调。从API 8开始，建议使用onEditChange。 | +| onEditChange(callback: (isEditing: boolean) => void) 8+ | 输入状态变化时，触发该回调。isEditing为true表示正在输入。 | +| onCopy(callback:(value: string) => void)8+ | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。
value：复制的文本内容。 | +| onCut(callback:(value: string) => void)8+ | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发该回调。
value：剪切的文本内容。 | +| onPaste(callback:(value: string) => void)8+ | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发该回调。
value：粘贴的文本内容。 | ## TextInputController8+ @@ -105,60 +107,54 @@ caretPosition(value: number): void ## 示例 - -### 单行文本输入 - ```ts // xxx.ets @Entry @Component -struct TextInputExample1 { - @State text: string = '' +struct TextInputExample { + @State text: string = ''; + controller: TextInputController = new TextInputController(); build() { Column() { - TextInput({ placeholder: 'input your word' }) - .placeholderColor("rgb(0,0,225)") - .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic }) + TextInput({ placeholder: 'input your word...', controller: this.controller }) + .placeholderColor(Color.Grey) + .placeholderFont({ size: 14, weight: 400 }) .caretColor(Color.Blue) - .height(50) - .fontSize(30) - .fontWeight(FontWeight.Bold) - .fontFamily("sans-serif") - .fontStyle(FontStyle.Normal) - .fontColor(Color.Red) + .width(400) + .height(40) + .margin(20) + .fontSize(14) + .fontColor(Color.Black) .onChange((value: string) => { - this.text = value + this.text = value; }) - Text(this.text).width('90%') - } + Text(this.text) + Button('Set caretPosition 1') + .margin(15) + .onClick(() => { + // 将光标移动至第一个字符后 + this.controller.caretPosition(1); + }) + // 密码输入框 + TextInput({ placeholder: 'input your password...' }) + .width(400) + .height(40) + .margin(20) + .type(InputType.Password) + .maxLength(9) + .showPasswordIcon(true) + // 内联风格输入框 + TextInput({ placeholder: 'inline style' }) + .width(400) + .height(50) + .margin(20) + .borderRadius(0) + .style(TextInputStyle.Inline) + }.width('100%') } } ``` -![zh-cn_image_0000001252769643](figures/zh-cn_image_0000001252769643.gif) - - -### 设置光标 - -```ts -// xxx.ets -@Entry -@Component -struct TextInputExample2 { - @State text: string = '' - controller: TextInputController = new TextInputController() - build() { - Column() { - TextInput({ placeholder: 'Please input your words.', controller:this.controller}) - Button('caretPosition') - .onClick(() => { - this.controller.caretPosition(4) - }) - } - } -} -``` - -![zh-cn_image_0000001208256092](figures/zh-cn_image_0000001208256092.png) +![textInput](figures/textInput.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md index af4d9e3ed3a62ce06e4a4082cd6e2c8168cd8697..deefb9317d4b23714575705bae4c32c83bde976d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md @@ -1,6 +1,6 @@ # 拖拽事件 -拖拽事件指被长按后拖拽时触发的事件。 +拖拽事件指组件被长按后拖拽时触发的事件。 > **说明：** > @@ -8,38 +8,38 @@ ## 事件 -| 名称 | 支持冒泡 | 功能描述 | -| ---------------------------------------- | ---- | ---------------------------------------- | -| onDragStart(event: (event?: DragEvent, extraParams?: string) =>  [CustomBuilder](ts-types.md#custombuilder8) \| DragItemInfo) | 否 | 第一次拖拽此事件绑定的组件时，触发回调。
- event：拖拽事件信息，包括拖拽点坐标。
- extraParams：拖拽事件额外信息，详见extraParam类型描述。
返回值：当前跟手效果所拖拽的对象，用于显示拖拽时的提示组件。
长按150毫秒(ms)可触发拖拽事件。优先级：长按手势配置时间小于等于150毫秒(ms)时，长按手势优先触发，否则拖拽事件优先触发。 | -| onDragEnter(event: (event?: DragEvent, extraParams?: string) => void) | 否 | 拖拽进入组件范围内时，触发回调。
- event：拖拽事件信息，包括拖拽点坐标。
- extraParams：拖拽事件额外信息，详见extraParam类型描述。
当监听了onDrop事件时，此事件才有效。 | -| onDragMove(event: (event?: DragEvent, extraParams?: string) => void) | 否 | 拖拽在组件范围内移动时，触发回调。
- event：拖拽事件信息，包括拖拽点坐标。
- extraParams：拖拽事件额外信息，详见extraParam类型描述。
当监听了onDrop事件时，此事件才有效。 | -| onDragLeave(event: (event?: DragEvent, extraParams?: string) => void) | 否 | 拖拽离开组件范围内时，触发回调。
- event：拖拽事件信息，包括拖拽点坐标。
- extraParams：拖拽事件额外信息，详见extraParam类型描述。
当监听了onDrop事件时，此事件才有效。 | -| onDrop(event: (event?: DragEvent, extraParams?: string) => void) | 否 | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
- event：拖拽事件信息，包括拖拽点坐标。
- extraParams：拖拽事件额外信息，详见extraParam类型描述。 | +| 名称 | 支持冒泡 | 功能描述 | +| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | +| onDragStart(event: (event?: [DragEvent](#dragevent说明), extraParams?: string) =>  [CustomBuilder](ts-types.md#custombuilder8) \|[DragItemInfo](#dragiteminfo说明) | [Dr否 | 第一次拖拽此事件绑定的组件时，触发回调。
- event：拖拽事件信息，包括拖拽点坐标。
- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。
返回值：当前跟手效果所拖拽的对象，用于显示拖拽时的提示组件。
长按150ms可触发拖拽事件。优先级：长按手势配置时间小于等于150ms时，长按手势优先触发，否则拖拽事件优先触发。 | +| onDragEnter(event: (event?: [DragEvent](#dragevent说明), extraParams?: string) => void) | 否 | 拖拽进入组件范围内时，触发回调。
- event：拖拽事件信息，包括拖拽点坐标。
- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。
当监听了onDrop事件时，此事件才有效。 | +| onDragMove(event: (event?: [DragEvent](#dragevent说明), extraParams?: string) => void) | 否 | 拖拽在组件范围内移动时，触发回调。
- event：拖拽事件信息，包括拖拽点坐标。
- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。
当监听了onDrop事件时，此事件才有效。 | +| onDragLeave(event: (event?: [DragEvent](#dragevent说明), extraParams?: string) => void) | 否 | 拖拽离开组件范围内时，触发回调。
- event：拖拽事件信息，包括拖拽点坐标。
- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。
当监听了onDrop事件时，此事件才有效。 | +| onDrop(event: (event?: [DragEvent](#dragevent说明), extraParams?: string) => void) | 否 | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
- event：拖拽事件信息，包括拖拽点坐标。
- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。 | ## DragItemInfo说明 -| 属性名称 | 属性类型 | 必填 | 描述 | -| --------- | ---------------------------------------- | ---- | --------------------------------- | -| pixelMap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | 设置拖拽过程中显示的图片。 | -| builder | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 使用自定义生成器进行绘图，如果设置了pixelMap，则忽略此值。 | -| extraInfo | string | 否 | 拖拽项的描述。 | +| 名称 | 类型 | 必填 | 描述 | +| --------- | ---------------------------------------------- | ---- | ---------------------------------------------------------- | +| pixelMap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | 设置拖拽过程中显示的图片。 | +| builder | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 拖拽过程中显示自定义组件，如果设置了pixelMap，则忽略此值。 | +| extraInfo | string | 否 | 拖拽项的描述。 | -## extraParam说明 +## extraParams说明 用于返回组件在拖拽中需要用到的额外信息。 - extraParam是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。 + extraParams是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。 -| 属性名称 | 属性类型 | 描述 | -| ------------- | ------ | ---------------------------------------- | -| selectedIndex | number | 当拖拽事件设在父容器的子元素时，selectedIndex表示当前被拖拽子元素是父容器第selectedIndex个子元素，selectedIndex从0开始。
仅在ListItem组件中生效。 | +| 名称 | 类型 | 描述 | +| ------------- | ------ | ------------------------------------------------------------ | +| selectedIndex | number | 当拖拽事件设在父容器的子元素时，selectedIndex表示当前被拖拽子元素是父容器第selectedIndex个子元素，selectedIndex从0开始。
仅在ListItem组件的拖拽事件中生效。 | | insertIndex | number | 当前拖拽元素在List组件中放下时，insertIndex表示被拖拽元素插入该组件的第insertIndex个位置，insertIndex从0开始。
仅在List组件的拖拽事件中生效。 | -## DragEvent对象说明 +## DragEvent说明 -| 名称 | 返回值类型 | 功能描述 | -| ------ | ------ | ---------------- | +| 名称 | 类型 | 描述 | +| ------ | ------ | ----------------------------- | | getX() | number | 当前拖拽点x轴坐标，单位为vp。 | | getY() | number | 当前拖拽点y轴坐标，单位为vp。 | @@ -50,101 +50,117 @@ @Entry @Component struct DragExample { - @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'] - @State text: string = '' - @State bool: boolean = false - @State bool1: boolean = false - @State appleVisible: Visibility = Visibility.Visible - @State orangeVisible: Visibility = Visibility.Visible - @State bananaVisible: Visibility = Visibility.Visible - @State select: number = 0 - + @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']; + @State text: string = ''; + @State bool: boolean = false; + @State appleVisible: Visibility = Visibility.Visible; + @State orangeVisible: Visibility = Visibility.Visible; + @State bananaVisible: Visibility = Visibility.Visible; + + // 自定义拖拽过程中显示的内容 @Builder pixelMapBuilder() { Column() { Text(this.text) - .width('50%').height(60).fontSize(16).borderRadius(10) - .textAlign(TextAlign.Center).backgroundColor(Color.Yellow) + .width('50%') + .height(60) + .fontSize(16) + .borderRadius(10) + .textAlign(TextAlign.Center) + .backgroundColor(Color.Yellow) } } build() { Column() { Text('There are three Text elements here') - .fontSize(12).fontColor(0xCCCCCC).width('90%') - .textAlign(TextAlign.Start).margin(5) - Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) { - Text('apple').width('25%').height(35).fontSize(16) - .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) + .fontSize(12) + .fontColor(0xCCCCCC) + .width('90%') + .textAlign(TextAlign.Start) + .margin(5) + Row({ space: 15 }) { + Text('apple') + .width('25%') + .height(35) + .fontSize(16) + .textAlign(TextAlign.Center) + .backgroundColor(0xAFEEEE) .visibility(this.appleVisible) .onDragStart(() => { - this.bool = true - this.text = 'apple' - this.appleVisible = Visibility.Hidden - return this.pixelMapBuilder + this.bool = true; + this.text = 'apple'; + this.appleVisible = Visibility.None; + return this.pixelMapBuilder; }) - Text('orange').width('25%').height(35).fontSize(16) - .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) + Text('orange') + .width('25%') + .height(35) + .fontSize(16) + .textAlign(TextAlign.Center) + .backgroundColor(0xAFEEEE) .visibility(this.orangeVisible) .onDragStart(() => { - this.bool = true - this.text = 'orange' - this.orangeVisible = Visibility.Hidden - return this.pixelMapBuilder + this.bool = true; + this.text = 'orange'; + this.orangeVisible = Visibility.None; + return this.pixelMapBuilder; }) - Text('banana').width('25%').height(35).fontSize(16) - .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) + Text('banana') + .width('25%') + .height(35) + .fontSize(16) + .textAlign(TextAlign.Center) + .backgroundColor(0xAFEEEE) .visibility(this.bananaVisible) .onDragStart((event: DragEvent, extraParams: string) => { - console.log('Text onDragStarts, ' + extraParams) - this.bool = true - this.text = 'banana' - this.bananaVisible = Visibility.Hidden - return this.pixelMapBuilder + console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); + this.bool = true; + this.text = 'banana'; + this.bananaVisible = Visibility.None; + return this.pixelMapBuilder; }) - }.border({ width: 1 }).width('90%').padding({ top: 10, bottom: 10 }).margin(10) - - Text('This is a List element').fontSize(12) - .fontColor(0xCCCCCC).width('90%') - .textAlign(TextAlign.Start).margin(15) - List({ space: 20, initialIndex: 0 }) { + }.padding({ top: 10, bottom: 10 }).margin(10) + + Text('This is a List element') + .fontSize(12) + .fontColor(0xCCCCCC) + .width('90%') + .textAlign(TextAlign.Start) + .margin(15) + List({ space: 20 }) { ForEach(this.numbers, (item) => { ListItem() { - Text('' + item) - .width('100%').height(80).fontSize(16).borderRadius(10) - .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) + Text(item) + .width('100%') + .height(80) + .fontSize(16) + .borderRadius(10) + .textAlign(TextAlign.Center) + .backgroundColor(0xAFEEEE) } - .onDragStart((event: DragEvent, extraParams: string) => { - console.log('ListItem onDragStarts, ' + extraParams) - var jsonString = JSON.parse(extraParams) - this.bool1 = true - this.text = this.numbers[jsonString.selectedIndex] - this.select = jsonString.selectedIndex - return this.pixelMapBuilder - }) }, item => item) } .editMode(true) - .height('50%').width('90%').border({ width: 1 }) + .height('50%') + .width('90%') + .border({ width: 1 }) + .padding(15) .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) .onDragEnter((event: DragEvent, extraParams: string) => { - console.log('List onDragEnter, ' + extraParams) + console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); }) .onDragMove((event: DragEvent, extraParams: string) => { - console.log('List onDragMove, ' + extraParams) + console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); }) .onDragLeave((event: DragEvent, extraParams: string) => { - console.log('List onDragLeave, ' + extraParams) + console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); }) .onDrop((event: DragEvent, extraParams: string) => { - var jsonString = JSON.parse(extraParams) + var jsonString = JSON.parse(extraParams); if (this.bool) { - this.numbers.splice(jsonString.insertIndex, 0, this.text) - this.bool = false - } else if (this.bool1) { - this.numbers.splice(jsonString.selectedIndex, 1) - this.numbers.splice(jsonString.insertIndex, 0, this.text) - this.bool = false - this.bool1 = false + // 通过splice方法插入元素 + this.numbers.splice(jsonString.insertIndex, 0, this.text); + this.bool = false; } }) }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md index 28bcf4cae9827e31896105d0656f18a11e027504..e42469e7e21398542032f5995e6bbfab9298b2d5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md @@ -1,6 +1,6 @@ # 按键事件 -按键事件指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可交互组件（默认可获焦），例如Button。对于Text，Image等不可获焦组件，可以设置focusable属性为true后使用按键事件。 +按键事件指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可获焦组件，例如Button。对于Text，Image等默认不可获焦的组件，可以设置focusable属性为true后使用按键事件。 > **说明：** > @@ -10,23 +10,23 @@ ## 事件 -| 名称 | 支持冒泡 | 功能描述 | -| ---------------------------------------- | ---- | ---------------------------------------- | -| onKeyEvent(event: (event?: KeyEvent) => void) | 是 | 绑定该方法的组件获焦后，按键动作触发该方法调用，event参数见[KeyEvent](#keyevent对象说明)介绍。 | +| 名称 | 支持冒泡 | 功能描述 | +| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | +| onKeyEvent(event: (event?: KeyEvent) => void) | 是 | 绑定该方法的组件获焦后，按键动作触发该回调，event返回值见[KeyEvent](#keyevent对象说明)介绍。 | ## KeyEvent对象说明 -| 名称 | 类型 | 描述 | -| ------------------------------------- | ---------------------------------------- | -------------------------- | -| type | [KeyType](ts-appendix-enums.md#keytype) | 按键的类型。 | -| [keyCode](../apis/js-apis-keycode.md) | number | 按键的键码。 | -| keyText | string | 按键的键值。 | -| keySource | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。 | -| deviceId | number | 触发当前按键的输入设备ID。 | -| metaKey | number | 按键发生时元键的状态，1表示按压态，0表示未按压态。 | -| timestamp | number | 按键发生时的时间戳。 | -| stopPropagation | () => void | 阻塞事件冒泡传递。 | +| 名称 | 类型 | 描述 | +| ------------------------------------- | ------------------------------------------- | ------------------------------------------------------------ | +| type | [KeyType](ts-appendix-enums.md#keytype) | 按键的类型。 | +| [keyCode](../apis/js-apis-keycode.md) | number | 按键的键码。 | +| keyText | string | 按键的键值。 | +| keySource | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。 | +| deviceId | number | 触发当前按键的输入设备ID。 | +| metaKey | number | 按键发生时元键（即Windows键盘的WIN键、Mac键盘的Command键）的状态，1表示按压态，0表示未按压态。 | +| timestamp | number | 按键发生时的时间戳。 | +| stopPropagation | () => void | 阻塞事件冒泡传递。 | ## 示例 @@ -36,20 +36,20 @@ @Entry @Component struct KeyEventExample { - @State text: string = '' - @State eventType: string = '' + @State text: string = ''; + @State eventType: string = ''; build() { Column() { - Button('KeyEvent').backgroundColor(0x2788D9) + Button('KeyEvent') .onKeyEvent((event: KeyEvent) => { if (event.type === KeyType.Down) { - this.eventType = 'Down' + this.eventType = 'Down'; } if (event.type === KeyType.Up) { - this.eventType = 'Up' + this.eventType = 'Up'; } - console.info(this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText) + this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText; }) Text(this.text).padding(15) }.height(300).width('100%').padding(35) @@ -57,4 +57,4 @@ struct KeyEventExample { } ``` -![zh-cn_image_0000001174264364](figures/zh-cn_image_0000001174264364.gif) \ No newline at end of file +![keyEvent](figures/keyEvent.png) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md index c7eed9da294e19d917e8669ff57176c385995cff..d3ff6dc98d86fb800a524ade36c90514e9540a07 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md @@ -19,30 +19,36 @@ ```ts // xxx.ets -import prompt from '@system.prompt' +import prompt from '@ohos.prompt'; @Entry @Component struct AppearExample { - @State isShow: boolean = true - private myText: string = 'Text for onAppear' - private changeAppear: string = 'Hide Text' + @State isShow: boolean = true; + @State changeAppear: string = 'Hide Text'; + private myText: string = 'Text for onAppear'; build() { Column() { Button(this.changeAppear) .onClick(() => { - this.isShow = !this.isShow - }).margin(3).backgroundColor(0x2788D9) + this.isShow = !this.isShow; + }).margin(15) if (this.isShow) { - Text(this.myText) + Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold) .onAppear(() => { - this.changeAppear = 'Show Text' - prompt.showToast({ message: 'The text is shown', duration: 2000 }) + this.changeAppear = 'Hide Text'; + prompt.showToast({ + message: 'The text is shown', + duration: 2000 + }) }) .onDisAppear(() => { - this.changeAppear = 'Hide Text' - prompt.showToast({ message: 'The text is hidden', duration: 2000 }) + this.changeAppear = 'Show Text'; + prompt.showToast({ + message: 'The text is hidden', + duration: 2000 + }) }) } }.padding(30).width('100%') diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md index f671f750b9073e8dd8ea70ee5645f9d0b3abfe53..748920f763cca09569c23d235fd2f9a1b6d341d5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md @@ -1,6 +1,6 @@ # 触摸事件 -当手指放在组件上、滑动或从组件上移开时触发。 +当手指在组件上按下、滑动、抬起时触发。 > **说明：** > @@ -11,7 +11,7 @@ | 名称 | 是否冒泡 | 功能描述 | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | -| onTouch(event: (event?: TouchEvent) => void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 | +| onTouch(event: (event?: TouchEvent) => void) | 是 | 手指触摸动作触发该回调，event返回值见[TouchEvent](#touchevent对象说明)介绍。 | ## TouchEvent对象说明 @@ -23,8 +23,8 @@ | changedTouches | Array<[TouchObject](#touchobject对象说明)> | 当前发生变化的手指信息。 | | stopPropagation | () => void | 阻塞事件冒泡。 | | timestamp8+ | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | -| target8+ | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 | -| source8+ | [SourceType](ts-gesture-settings.md) | 事件输入设备。 | +| target8+ | [EventTarget](ts-universal-events-click.md\#eventtarget8对象说明) | 触发触发手势事件的元素对象显示区域。 | +| source8+ | [SourceType](ts-gesture-settings.md\#sourcetype枚举说明) | 事件输入设备。 | ## TouchObject对象说明 @@ -45,29 +45,45 @@ @Entry @Component struct TouchExample { - @State text: string = '' - @State eventType: string = '' + @State text: string = ''; + @State eventType: string = ''; build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { - Button('Touch').backgroundColor(0x2788D9).height(40).width(80) + Column() { + Button('Touch').height(40).width(100) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { - this.eventType = 'Down' + this.eventType = 'Down'; } if (event.type === TouchType.Up) { - this.eventType = 'Up' + this.eventType = 'Up'; } if (event.type === TouchType.Move) { - this.eventType = 'Move' + this.eventType = 'Move'; } - console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' - + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos:(' + this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' + + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' - + event.target.area.width + '\nheight:' + event.target.area.height) + + event.target.area.width + '\nheight:' + event.target.area.height; + }) + Button('Touch').height(50).width(200).margin(20) + .onTouch((event: TouchEvent) => { + if (event.type === TouchType.Down) { + this.eventType = 'Down'; + } + if (event.type === TouchType.Up) { + this.eventType = 'Up'; + } + if (event.type === TouchType.Move) { + this.eventType = 'Move'; + } + this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' + + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' + + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' + + event.target.area.width + '\nheight:' + event.target.area.height; }) Text(this.text) - }.height(200).width(350).padding({ left: 35, right: 35, top: 35 }) + }.width('100%').padding(30) } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md index 4a3fc90ef557a6446963dc0aceb68584c130b248..5314fed85daa2b2df9f7529658ba4f7089f6ad26 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md @@ -1,6 +1,6 @@ # 焦点事件 -焦点事件指页面焦点在组件间移动时触发的事件，组件可使用焦点事件来更改内容。 +焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。 > **说明：** > @@ -27,44 +27,52 @@ @Entry @Component struct FocusEventExample { - @State textOne: string = '' - @State textTwo: string = '' - @State textThree: string = '' - @State oneButtonColor: string = '#FF0000' - @State twoButtonColor: string = '#87CEFA' - @State threeButtonColor: string = '#90EE90' + @State oneButtonColor: string = '#FFC0CB'; + @State twoButtonColor: string = '#87CEFA'; + @State threeButtonColor: string = '#90EE90'; build() { - Column({ space:20 }){ - Button(this.textOne) + Column({ space: 20 }) { + // 通过外接键盘的上下键可以让焦点在三个按钮间移动，按钮获焦时颜色变化，失焦时变回原背景色 + Button('First Button') .backgroundColor(this.oneButtonColor) - .width(260).height(70).fontColor(Color.Black) + .width(260) + .height(70) + .fontColor(Color.Black) .focusable(true) .onFocus(() => { - this.textOne = 'First Button onFocus' - this.oneButtonColor = '#AFEEEE' + this.oneButtonColor = '#FF0000'; }) .onBlur(() => { - this.textOne = 'First Button onBlur' - this.oneButtonColor = '#FFC0CB' + this.oneButtonColor = '#FFC0CB'; }) - Button(this.textTwo) + Button('Second Button') .backgroundColor(this.twoButtonColor) - .width(260).height(70).fontColor(Color.Black) + .width(260) + .height(70) + .fontColor(Color.Black) .focusable(true) - Button(this.textThree) + .onFocus(() => { + this.twoButtonColor = '#FF0000'; + }) + .onBlur(() => { + this.twoButtonColor = '#87CEFA'; + }) + Button('Third Button') .backgroundColor(this.threeButtonColor) - .width(260).height(70).fontColor(Color.Black) + .width(260) + .height(70) + .fontColor(Color.Black) .focusable(true) .onFocus(() => { - this.textThree = 'Third Button onFocus' - this.threeButtonColor = '#AFEEEE' + this.threeButtonColor = '#FF0000'; }) .onBlur(() => { - this.textThree = 'Third Button onBlur' - this.threeButtonColor = '#FFC0CB' + this.threeButtonColor = '#90EE90'; }) - }.width('100%').margin({ top:20 }) + }.width('100%').margin({ top: 20 }) } } ``` + +![focus](figures/focus.png) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md index 8f0eb3cfa01685a36211438aa8bfafc67b8e62d0..00050c0e8976916fb4cd80a00f1b2c9ec2c029e7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md @@ -1,6 +1,6 @@ # 鼠标事件 -在单个动作触发多个事件时，事件的顺序是固定的，鼠标事件默认透传。 +在鼠标的单个动作触发多个事件时，事件的顺序是固定的，鼠标事件默认透传。 > **说明：** > @@ -12,23 +12,23 @@ | 名称 | 支持冒泡 | 描述 | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | onHover(event: (isHover?: boolean) => void) | 否 | 鼠标进入或退出组件时触发该回调。
isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true, 退出时为false。 | -| onMouse(event: (event?: MouseEvent) => void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上移动时，触发该回调，event参数包含触发事件时的时间戳、鼠标按键、动作、点击触点在整个屏幕上的坐标和点击触点相对于当前组件的坐标。 | +| onMouse(event: (event?: MouseEvent) => void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时，触发该回调，event返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 | ## MouseEvent对象说明 | 名称 | 属性类型 | 描述 | | --------- | ------------------------------- | -------------------- | -| screenX | number | 点击触点相对于应用窗口左上角的x轴坐标。 | -| screenY | number | 点击触点相对于应用窗口左上角的y轴坐标。 | -| x | number | 点击触点相对于当前组件左上角的x轴坐标。 | -| y | number | 点击触点相对于当前组件左上角的y轴坐标。 | +| screenX | number | 鼠标位置相对于应用窗口左上角的x轴坐标。 | +| screenY | number | 鼠标位置相对于应用窗口左上角的y轴坐标。 | +| x | number | 鼠标位置相对于当前组件左上角的x轴坐标。 | +| y | number | 鼠标位置相对于当前组件左上角的y轴坐标。 | | button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。 | -| action | [MouseAction](ts-appendix-enums.md#mouseaction) | 事件动作。 | +| action | [MouseAction](ts-appendix-enums.md#mouseaction) | 鼠标动作。 | | stopPropagation | () => void | 阻塞事件冒泡。 | | timestamp8+ | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | -| target8+ | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 | -| source8+ | [SourceType](ts-gesture-settings.md) | 事件输入设备。 | +| target8+ | [EventTarget](ts-universal-events-click.md\#eventtarget8对象说明) | 触发手势事件的元素对象显示区域。 | +| source8+ | [SourceType](ts-gesture-settings.md\#sourcetype枚举说明) | 事件输入设备。 | ## 示例 @@ -37,31 +37,80 @@ @Entry @Component struct MouseEventExample { - @State hoverText: string = 'no hover' - @State mouseText: string = 'MouseText' - @State color: Color = Color.Blue + @State hoverText: string = 'no hover'; + @State mouseText: string = ''; + @State action: string = ''; + @State mouseBtn: string = ''; + @State color: Color = Color.Blue; build() { - Column({ space:20 }) { + Column({ space: 20 }) { Button(this.hoverText) + .width(180).height(80) + .backgroundColor(this.color) .onHover((isHover: boolean) => { + // 通过onHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色 if (isHover) { - this.hoverText = 'on hover' - this.color = Color.Pink + this.hoverText = 'hover'; + this.color = Color.Pink; } else { - this.hoverText = 'no hover' - this.color = Color.Blue + this.hoverText = 'no hover'; + this.color = Color.Blue; } }) - .backgroundColor(this.color) Button('onMouse') + .width(180).height(80) .onMouse((event: MouseEvent) => { - console.log(this.mouseText = 'onMouse:\nButton = ' + event.button + - '\nAction = ' + event.action + '\nlocalXY=(' + event.x + ',' + event.y + ')' + - '\nscreenXY=(' + event.screenX + ',' + event.screenY + ')') + switch (event.button) { + case MouseButton.None: + this.mouseBtn = 'None'; + break; + case MouseButton.Left: + this.mouseBtn = 'Left'; + break; + case MouseButton.Right: + this.mouseBtn = 'Right'; + break; + case MouseButton.Back: + this.mouseBtn = 'Back'; + break; + case MouseButton.Forward: + this.mouseBtn = 'Forward'; + break; + case MouseButton.Middle: + this.mouseBtn = 'Middle'; + break; + } + switch (event.action) { + case MouseAction.Hover: + this.action = 'Hover'; + break; + case MouseAction.Press: + this.action = 'Press'; + break; + case MouseAction.Move: + this.action = 'Move'; + break; + case MouseAction.Release: + this.action = 'Release'; + break; + } + this.mouseText = 'onMouse:\nButton = ' + this.mouseBtn + + '\nAction = ' + this.action + '\nXY=(' + event.x + ',' + event.y + ')' + + '\nscreenXY=(' + event.screenX + ',' + event.screenY + ')'; }) Text(this.mouseText) - }.padding({ top: 20 }).width('100%') + }.padding({ top: 30 }).width('100%') } } ``` + +示意图： + +鼠标悬浮时改变文本内容与背景颜色： + +![mouse](/figures/mouse.png) + +鼠标点击时： + +![mouse1](/figures/mouse1.png) \ No newline at end of file