diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/focus.png b/zh-cn/application-dev/reference/arkui-ts/figures/focus.png
new file mode 100644
index 0000000000000000000000000000000000000000..dcd16fbecdce07e04721915ff9d9777590d39e7a
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/focus.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/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/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_0000001174264364.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264364.png
new file mode 100644
index 0000000000000000000000000000000000000000..defa53e2581a56c7fb0933d85c0ce1578ebbfd48
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264364.png 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_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/ts-basic-components-search.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
index 95e7221fd461c629737bae93c0f0e6bb711de982..6fd4c47601161a4aec2605000618b6eca8284088 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,33 +18,36 @@ 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组件控制器。 |
## 属性
-| 名称 | 参数类型 | 描述 |
-| ---------------- | ------------------------------------------- | ------------------------------------------ |
-| searchButton | string | 搜索框末尾搜索按钮文本值，默认无搜索按钮。 |
-| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder颜色。 |
-| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 |
-| textFont | [Font](ts-types.md#font) | 设置搜索框内文本样式。 |
+| 名称 | 参数类型 | 描述 |
+| ---------------- | ------------------------------------------- | ---------------------------------------------------------- |
+| searchButton | string | 搜索框末尾搜索按钮文本内容，默认无搜索按钮。 |
+| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder文本颜色。 |
+| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 |
+| textFont | [Font](ts-types.md#font) | 设置搜索框内输入文本样式。 |
+| 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: 粘贴的文本内容。 |
+除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
+
+| 名称 | 功能描述 |
+| ------------------------------------------- | ------------------------------------------------------------ |
+| 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组件的光标位置。
### 导入对象
```
@@ -70,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(20)
+ Button('Set caretPosition 1')
+ .onClick(() => {
+ // 设置光标位置到输入的第一个字符后
+ this.controller.caretPosition(1);
})
- .margin({ top: 30, left:10, right:10 })
- }
+ }.width('100%')
}
}
```
-
\ No newline at end of file
+
\ 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 f5786028ffd5756f184eba3bef9ddf36c4c1e0b8..4fe6b16be395ba66a3cdf6effd5abe3e6a796aa9 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, styl
| value | number | 否 | 当前进度值。
默认值：0 |
| min | number | 否 | 设置最小值。
默认值：0 |
| max | number | 否 | 设置最大值。
默认值：100 |
-| step | number | 否 | 设置滑动条滑动步长。
默认值：1 |
-| style | SliderStyle | 否 | 设置滑动条的滑块样式。
默认值：SliderStyle.OutSet |
+| step | number | 否 | 设置Slider滑动步长。
默认值：1 |
+| style | SliderStyle | 否 | 设置Slider的滑块与滑轨显示样式。
默认值：SliderStyle.OutSet |
| direction8+ | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。
默认值：Axis.Horizontal |
-| reverse8+ | boolean | 否 | 设置滑动条取值范围是否反向。
**说明：**设置为false时，水平方向滑动条为从左向右滑动，竖直方向滑动条从上向下滑动，设置为true时，水平方向滑动条为从右向左滑动，竖直方向滑动条从下向上滑动。
默认值：false |
+| reverse8+ | boolean | 否 | 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。
默认值：false |
## SliderStyle枚举说明
@@ -37,7 +37,7 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl
## 属性
-不支持触摸热区设置。
+支持除触摸热区以外的通用属性设置。
| 名称 | 参数类型 | 描述 |
| ------------- | ------- | ----------------- |
@@ -45,7 +45,7 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl
| trackColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置滑轨的背景颜色。 |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置滑轨的已滑动颜色。 |
| showSteps | boolean | 设置当前是否显示步长刻度值。
默认值：false |
-| showTips | boolean | 设置滑动时是否显示气泡提示百分比。
默认值：false |
+| showTips | boolean | 设置滑动时是否显示百分比气泡提示。
默认值：false |
| trackThickness | [Length](ts-types.md#length) | 设置滑轨的粗细。 |
| maxLabel | string | 设置最大标签。 |
| minLabel | string | 设置最小标签。 |
@@ -53,20 +53,20 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl
## 事件
-通用事件仅支持：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, styl
@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 e1f8add9d7b0626bd9aed7a97e55a6a14d94ac18..e6f5b3aca6fc7e95806dcae9c20259ad2458d826 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
-步骤导航器。
+步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景。
> **说明：**
@@ -8,11 +8,6 @@
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-## 权限列表
-
-无
-
-
## 子组件
仅能包含子组件[StepperItem](ts-basic-components-stepperitem.md)。
@@ -24,9 +19,9 @@ Stepper(value?: { index?: number })
**参数：**
-| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-| ----- | ------ | ---- | ---- | ------------------------ |
-| index | number | 否 | 0 | 设置步骤导航器显示第几个StepperItem。 |
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| ------ | -------- | ---- | ------ | ------------------------------------------- |
+| index | number | 否 | 0 | 设置步骤导航器当前显示StepperItem的索引值。 |
## 属性
@@ -35,13 +30,13 @@ 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：上一步骤页索引值。 |
+| 名称 | 描述 |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onFinish(callback: () => void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调 。 |
+| onSkip(callback: () => void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 |
+| 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：上一步骤页索引值。 |
## 示例
@@ -51,73 +46,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})
+ .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 3489c498f04106e62f7f06b2e2eb6759d2f73551..1ab2a36dbbcd0d7949a19858c34b34754da67914 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
@@ -1,6 +1,6 @@
# StepperItem
-步骤导航器元素。
+用作[Stepper](ts-basic-components-stepper.md)组件的页面子组件
> **说明：**
@@ -8,11 +8,6 @@
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-## 权限列表
-
-无
-
-
## 子组件
支持单个子组件。
@@ -25,20 +20,20 @@ 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-universal-events-drag-drop.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
index e7f6060a1a23dbcfa81e7d076e0dce9073236118..b6db6abeddf38be59ed681c901e5a5c0991527eb 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,5 +1,7 @@
# 拖拽事件
+拖拽事件指组件被长按后拖拽时触发的事件。
+
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
@@ -8,30 +10,31 @@
| 名称 | 支持冒泡 | 功能描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
-| 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说明) | 否 | 第一次拖拽此事件绑定的组件时，触发回调。
- 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](../../ui/ts-types.md#custombuilder8) | 否 | 使用自定义生成器进行绘图，如果设置了pixelMap，则忽略此值。 |
- | extraInfo | string | 否 | 拖拽项的描述。 |
+| 属性名称 | 属性类型 | 必填 | 描述 |
+| ------------- | ------ | ------- |--------------------------------- |
+| pixelMap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | 设置拖拽过程中显示的图片。 |
+| builder | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 拖拽过程中显示自定义组件，如果设置了pixelMap，则忽略此值。 |
+| extraInfo | string | 否 | 拖拽项的描述。 |
+
+## extraParams说明
+用于返回组件在拖拽中需要用到的额外信息。
+extraParams是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。
-## extraParam说明
- 用于返回组件在拖拽中需要用到的额外信息。
- extraParam是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。
- | 属性名称 | 属性类型 | 描述 |
- | ------------- | ------ | ---------------------------------------- |
- | selectedIndex | number | 当拖拽事件设在父容器的子元素时，selectedIndex表示当前被拖拽子元素是父容器第selectedIndex个子元素，selectedIndex从0开始。
仅在ListItem组件中生效。 |
- | insertIndex | number | 当前拖拽元素在List组件中放下时，insertIndex表示被拖拽元素插入该组件的第insertIndex个位置，insertIndex从0开始。
仅在List组件的拖拽事件中生效。 |
+| 名称 | 类型 | 描述 |
+| ------------- | ------ | ------------------------------------------------------------ |
+| 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。 |
@@ -42,103 +45,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 size: string = ''
- @State appleVisible: Visibility = Visibility.Visible
- @State orangeVisible: Visibility = Visibility.Visible
- @State bananaVisible: Visibility = Visibility.Visible
- @State select: number = 0
- @State currentIndex: 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)
+ }.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 }) {
+ 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..bf71309377b8079ea14d752692976cf5c743fdea 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,32 +1,30 @@
# 按键事件
-按键事件指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可交互组件（默认可获焦），例如Button。对于Text，Image等不可获焦组件，可以设置focusable属性为true后使用按键事件。
+按键事件指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可获焦组件，例如Button。对于Text，Image等默认不可获焦的组件，可以设置focusable属性为true后使用按键事件。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
## 事件
-| 名称 | 支持冒泡 | 功能描述 |
-| ---------------------------------------- | ---- | ---------------------------------------- |
-| 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 | 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 | 阻塞事件冒泡传递。 |
## 示例
@@ -35,6 +33,28 @@
// xxx.ets
@Entry
@Component
+struct KeyEventExample {
+ @State text: string = '';
+ @State eventType: string = '';
+
+ build() {
+ Column() {
+ Button('KeyEvent')
+ .onKeyEvent((event: KeyEvent) => {
+ if (event.type === KeyType.Down) {
+ this.eventType = 'Down';
+ }
+ if (event.type === KeyType.Up) {
+ this.eventType = 'Up';
+ }
+ this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText;
+ })
+ Text(this.text).padding(15)
+ }.height(300).width('100%').padding(35)
+ }
+}// xxx.ets
+@Entry
+@Component
struct KeyEventExample {
@State text: string = ''
@State eventType: string = ''
@@ -57,4 +77,4 @@ struct KeyEventExample {
}
```
-
\ No newline at end of file
+
\ 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 d24ad3483e12f365489cef5580dc4dbea6a18e87..f775977ef3b14e1e4f5270c3a5800732b0f826d9 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
@@ -17,30 +17,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 faec03058a1f0f80e654f06db62e18b366cfd581..59633ade2ee5e9ac1a3fa97d3a8342db75f71f44 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,5 +1,7 @@
# 触摸事件
+当手指在组件上按下、滑动、抬起时触发。
+
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
@@ -9,7 +11,7 @@
| 名称 | 是否冒泡 | 功能描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
-| onTouch(event: (event?: TouchEvent) => void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 |
+| onTouch(event: (event?: TouchEvent) => void) | 是 | 触摸动作触发该方法调用，event返回值见[TouchEvent](#touchevent对象说明)介绍。 |
## TouchEvent对象说明
@@ -21,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对象说明
@@ -43,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';
+ }
+ 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;
+ })
+ Button('Touch').height(50).width(200).margin(20)
.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;
})
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 89f94afe40060dbd6185556ad1ad780d478b19e4..7f5257857009963d2b191a42798a67edcff94ab3 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,8 +1,12 @@
# 焦点事件
+焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。
+
> **说明：**
>
-> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> - 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+>
+> - 目前仅支持通过外接键盘的tab键、方向键触发。
## 事件
@@ -12,9 +16,6 @@
| onFocus(event: () => void) | 否 | 当前组件获取焦点时触发的回调。 |
| onBlur(event:() => void) | 否 | 当前组件失去焦点时触发的回调。 |
-> **说明：**
-> 支持焦点事件的组件：Button、Text、Image、List、Grid。
-
## 示例
@@ -23,44 +24,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 })
}
}
```
+
+
\ 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 fa742aad6d3f657a23ecde3441b0ab4fb09a6bc1..dcc36e95fe8c362dc8389367a057abd9f2634095 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,5 +1,7 @@
# 鼠标事件
+在鼠标的单个动作触发多个事件时，事件的顺序是固定的，鼠标事件默认透传。
+
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
@@ -10,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枚举说明) | 事件输入设备。 |
## 示例
@@ -35,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%')
}
}
```
+
+示意图：
+
+鼠标悬浮时改变文本内容与背景颜色：
+
+
+
+鼠标点击时：
+
+
\ No newline at end of file