Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“862dde5e6d59b8561eedb62abd40beb6582decaa”上不存在“...fluid/framework/git@gitcode.net:BaiXuePrincess/Paddle.git”
提交 75a738d1 编写于 作者: Y yamila
浏览文件
操作

cherryPick3.1release 

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 0b79ec67
隐藏空白更改
内联 并排
Showing with 538 addition and 360 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 75a738d1
# Search # Search
提供搜索框组件，用于提供用户搜索内容的输入区域。 搜索框组件，适用于浏览器的搜索内容输入框等应用场景。
> **说明：** > **说明：**
> >
...@@ -18,33 +18,36 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll ...@@ -18,33 +18,36 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------- | ---------------- | ---- | ------------------------------------------------------------ | | ----------- | ---------------- | ---- | ------------------------------------------------------------ |
| value | string | 否 | 搜索文本值。 | | value | string | 否 | 设置当前显示的搜索文本内容。 |
| placeholder | string | 否 | 无输入时的提示文本。 | | placeholder | string | 否 | 设置无输入时的提示文本。 |
| icon | string | 否 | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg, jpg和png。 | | icon | string | 否 | 设置搜索图标路径，默认使用系统搜索图标，图标支持的图源格式: svg、jpg和png。 |
| controller | SearchController | 否 | 控制器。 | | controller | SearchController | 否 | 设置Search组件控制器。 |
## 属性 ## 属性
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| ---------------- | ------------------------------------------- | ------------------------------------------ | | ---------------- | ------------------------------------------- | ---------------------------------------------------------- |
| searchButton | string | 搜索框末尾搜索按钮文本值，默认无搜索按钮。 | | searchButton | string | 搜索框末尾搜索按钮文本内容，默认无搜索按钮。 |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder颜色。 | | placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder文本颜色。 |
| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 | | placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 |
| textFont | [Font](ts-types.md#font) | 设置搜索框内文本样式。 | | textFont | [Font](ts-types.md#font) | 设置搜索框内输入文本样式。 |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本在搜索框中的对齐方式。<br/>默认值：TextAlign.Start |
## 事件 ## 事件
| 名称 | 功能描述 | 除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
| ---------------------------------------- | ---------------------------------------- |
| onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发。<br> -value: 当前输入文本框的内容。 | | 名称 | 功能描述 |
| onChange(callback: (value: string) => void) | 输入内容发生变化时，触发回调。<br> -value: 当前输入文本框的内容。 | | ------------------------------------------- | ------------------------------------------------------------ |
| onCopy(callback: (value: string) => void) | 组件触发系统剪切板复制操作。<br> -value: 复制的文本内容。 | | onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。<br/> -value: 当前搜索框中输入的文本内容。 |
| onCut(callback: (value: string) => void) | 组件触发系统剪切板剪切操作。<br> -value: 剪切的文本内容。 | | onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。<br/> -value: 当前搜索框中输入的文本内容。 |
| onPaste(callback: (value: string) => void) | 组件触发系统剪切板粘贴操作。<br> -value: 粘贴的文本内容。 | | onCopy(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的复制按钮触发该回调。<br> -value: 复制的文本内容。 |
| onCut(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的剪切按钮触发该回调<br> -value: 剪切的文本内容。 |
| onPaste(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的粘贴按钮触发该回调。<br> -value: 粘贴的文本内容。 |
## SearchController ## SearchController
Search组件的控制器，通过它操作Search组件。 Search组件的控制器，目前通过它可控制Search组件的光标位置。
### 导入对象 ### 导入对象
``` ```
...@@ -70,30 +73,36 @@ caretPosition(value: number): void ...@@ -70,30 +73,36 @@ caretPosition(value: number): void
@Entry @Entry
@Component @Component
struct SearchExample { struct SearchExample {
@State changeValue: string = '' @State changeValue: string = '';
@State submitValue: string = '' @State submitValue: string = '';
controller: SearchController = new SearchController() controller: SearchController = new SearchController();
build() { build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { Column() {
Text(this.submitValue) Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
Text(this.changeValue) Text('onChange:' + this.changeValue).fontSize(18).margin(15)
Search({value: this.changeValue, placeholder: 'Type to search', controller: this.controller}) Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
.searchButton('Search') .searchButton('SEARCH')
.width(400) .width(400)
.height(35) .height(40)
.backgroundColor(Color.White) .backgroundColor(Color.White)
.placeholderColor(Color.Grey) .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) => { .onSubmit((value: string) => {
this.submitValue = value this.submitValue = value;
}) })
.onChange((value: string) => { .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%')
}
} }
} }
``` ```
![search](figures/search.png) ![search](figures/search.gif)
\ No newline at end of file \ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ 75a738d1
# Slider # Slider
滑动条组件，用来快速调节设置值，如音量、亮度等。 滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
> **说明：** > **说明：**
> >
...@@ -23,10 +23,10 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl ...@@ -23,10 +23,10 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl
| value | number | 否 | 当前进度值。<br/>默认值：0 | | value | number | 否 | 当前进度值。<br/>默认值：0 |
| min | number | 否 | 设置最小值。<br/>默认值：0 | | min | number | 否 | 设置最小值。<br/>默认值：0 |
| max | number | 否 | 设置最大值。<br/>默认值：100 | | max | number | 否 | 设置最大值。<br/>默认值：100 |
| step | number | 否 | 设置滑动条滑动步长。<br/>默认值：1 | | step | number | 否 | 设置Slider滑动步长。<br/>默认值：1 |
| style | SliderStyle | 否 | 设置滑动条的滑块样式。<br/>默认值：SliderStyle.OutSet | | style | SliderStyle | 否 | 设置Slider的滑块与滑轨显示样式。<br/>默认值：SliderStyle.OutSet |
| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。<br/>默认值：Axis.Horizontal | | direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。<br/>默认值：Axis.Horizontal |
| reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向。<br/>**说明：**设置为false时，水平方向滑动条为从左向右滑动，竖直方向滑动条从上向下滑动，设置为true时，水平方向滑动条为从右向左滑动，竖直方向滑动条从下向上滑动。<br/>默认值：false | | reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。<br/>默认值：false |
## SliderStyle枚举说明 ## SliderStyle枚举说明
...@@ -37,7 +37,7 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl ...@@ -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 ...@@ -45,7 +45,7 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl
| trackColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置滑轨的背景颜色。 | | trackColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置滑轨的背景颜色。 |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置滑轨的已滑动颜色。 | | selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置滑轨的已滑动颜色。 |
| showSteps | boolean | 设置当前是否显示步长刻度值。<br/>默认值：false | | showSteps | boolean | 设置当前是否显示步长刻度值。<br/>默认值：false |
| showTips | boolean | 设置滑动时是否显示气泡提示百分比。<br/>默认值：false | | showTips | boolean | 设置滑动时是否显示百分比气泡提示。<br/>默认值：false |
| trackThickness | [Length](ts-types.md#length) | 设置滑轨的粗细。 | | trackThickness | [Length](ts-types.md#length) | 设置滑轨的粗细。 |
| maxLabel | string | 设置最大标签。 | | maxLabel | string | 设置最大标签。 |
| minLabel | string | 设置最小标签。 | | minLabel | string | 设置最小标签。 |
...@@ -53,20 +53,20 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl ...@@ -53,20 +53,20 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl
## 事件 ## 事件
通用事件仅支持：OnAppear，OnDisAppear。 通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。
| 名称 | 功能描述 | | 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前进度值。若返回值有小数，可使用Math.toFixed()将数据处理为想要的精度。<br/>mode：拖动状态。 | | onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前滑动进度值。若返回值有小数，可使用Math.toFixed()方法将数据处理为预期的精度。<br/>mode：拖动状态。 |
## SliderChangeMode枚举说明 ## SliderChangeMode枚举说明
| 名称 | 值 | 描述 | | 名称 | 值 | 描述 |
| ------ | ---- | --------- | | ------ | ---- | --------- |
| Begin | 0 | 用户开始拖动滑块。 | | Begin | 0 | 开始拖动滑块。 |
| Moving | 1 | 用户拖动滑块中。 | | Moving | 1 | 正在拖动滑块中。 |
| End | 2 | 用户结束拖动滑块。 | | End | 2 | 结束拖动滑块。 |
| Click | 3 | 用户点击滑动条使滑块位置移动。 | | Click | 3 | 点击滑动条使滑块位置移动。 |
## 示例 ## 示例
...@@ -75,105 +75,150 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl ...@@ -75,105 +75,150 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl
@Entry @Entry
@Component @Component
struct SliderExample { struct SliderExample {
@State outSetValue: number = 40 @State outSetValueOne: number = 40;
@State inSetValue: number = 40 @State inSetValueOne: number = 40;
@State outVerticalSetValue: number = 40 @State outSetValueTwo: number = 40;
@State inVerticalSetValue: number = 40 @State inSetValueTwo: number = 40;
@State vOutSetValueOne: number = 40;
@State vInSetValueOne: number = 40;
@State vOutSetValueTwo: number = 40;
@State vInSetValueTwo: number = 40;
build() { build() {
Column({ space: 5 }) { Column({ space: 8 }) {
Text('slider out set').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
Row() { Row() {
Slider({ Slider({
value: this.outSetValue, value: this.outSetValueOne,
min: 0, min: 0,
max: 100, max: 100,
step: 1,
style: SliderStyle.OutSet style: SliderStyle.OutSet
}) })
.blockColor(Color.Blue) .showTips(true)
.trackColor(Color.Gray) .onChange((value: number, mode: SliderChangeMode) => {
.selectedColor(Color.Blue) this.outSetValueOne = value;
.showSteps(true) console.info('value:' + value + 'mode:' + mode.toString());
.showTips(true) })
.onChange((value: number, mode: SliderChangeMode) => { // toFixed(0)将滑动条返回值处理为整数精度
this.outSetValue = value Text(this.outSetValueOne.toFixed(0)).fontSize(12)
console.info('value:' + value + 'mode:' + mode.toString()) }
.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%') .width('80%')
Text('slider in set').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
Row() { Row() {
Slider({ Slider({
value: this.inSetValue, value: this.inSetValueOne,
min: 0, min: 0,
max: 100, max: 100,
step: 1,
style: SliderStyle.InSet style: SliderStyle.InSet
}) })
.blockColor(0xCCCCCC) .blockColor('#191970')
.trackColor(Color.Black) .trackColor('#ADD8E6')
.selectedColor(0xCCCCCC) .selectedColor('#4169E1')
.showSteps(false) .showTips(true)
.showTips(false) .onChange((value: number, mode: SliderChangeMode) => {
.onChange((value: number, mode: SliderChangeMode) => { this.inSetValueOne = value;
this.inSetValue = value console.info('value:' + value + 'mode:' + mode.toString());
console.info('value:' + value + 'mode:' + mode.toString()) })
}) Text(this.inSetValueOne.toFixed(0)).fontSize(12)
Text(this.inSetValue.toFixed(0)).fontSize(16)
} }
.width('80%') .width('80%')
Row() { Row() {
Column() { Slider({
Text('slider out direction set').fontSize(9).fontColor(0xCCCCCC).width('50%') value: this.inSetValueTwo,
Slider({ step: 10,
value: this.outVerticalSetValue, style: SliderStyle.InSet
min: 0, })
max: 100, .blockColor('#191970')
step: 1, .trackColor('#ADD8E6')
style: SliderStyle.OutSet, .selectedColor('#4169E1')
direction: Axis.Vertical
})
.blockColor(Color.Blue)
.trackColor(Color.Gray)
.selectedColor(Color.Blue)
.showSteps(true) .showSteps(true)
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.outVerticalSetValue = value this.inSetValueTwo = value;
console.info('value:' + value + 'mode:' + mode.toString()) 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) }.width('50%').height(300)
Column() { Column() {
Text('slider in direction set').fontSize(9).fontColor(0xCCCCCC).width('50%') Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
Slider({ Row() {
value: this.inVerticalSetValue, Slider({
min: 0, value: this.vInSetValueOne,
max: 100, style: SliderStyle.InSet,
step: 1, direction: Axis.Vertical,
style: SliderStyle.InSet, reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
direction: Axis.Vertical })
}) .showTips(true)
.blockColor(0xCCCCCC) .onChange((value: number, mode: SliderChangeMode) => {
.trackColor(Color.Black) this.vInSetValueOne = value;
.selectedColor(0xCCCCCC) console.info('value:' + value + 'mode:' + mode.toString());
.showSteps(false) })
.showTips(false) Slider({
.onChange((value: number, mode: SliderChangeMode) => { value: this.vInSetValueTwo,
this.inVerticalSetValue = value step: 10,
console.info('value:' + value + 'mode:' + mode.toString()) style: SliderStyle.InSet,
}) direction: Axis.Vertical,
Text(this.inVerticalSetValue.toFixed(0)).fontSize(16) reverse: true
})
.showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.vInSetValueTwo = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
}
}.width('50%').height(300) }.width('50%').height(300)
} }
}.width('100%')
}.width('100%').margin({ top: 5 })
} }
} }
``` ```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
浏览文件 @ 75a738d1
# Stepper # Stepper
步骤导航器。 步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景。
> **说明：** > **说明：**
...@@ -8,11 +8,6 @@ ...@@ -8,11 +8,6 @@
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件 ## 子组件
仅能包含子组件[StepperItem](ts-basic-components-stepperitem.md)。 仅能包含子组件[StepperItem](ts-basic-components-stepperitem.md)。
...@@ -24,9 +19,9 @@ Stepper(value?: { index?: number }) ...@@ -24,9 +19,9 @@ Stepper(value?: { index?: number })
**参数：** **参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ------------------------ | | ------ | -------- | ---- | ------ | ------------------------------------------- |
| index | number | 否 | 0 | 设置步骤导航器显示第几个StepperItem。 | | index | number | 否 | 0 | 设置步骤导航器当前显示StepperItem的索引值。 |
## 属性 ## 属性
...@@ -35,13 +30,13 @@ Stepper(value?: { index?: number }) ...@@ -35,13 +30,13 @@ Stepper(value?: { index?: number })
## 事件 ## 事件
| 名称 | 描述 | | 名称 | 描述 |
| ---------------------------------------- | ---------------------------------------- | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调&nbsp;。 | | onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调&nbsp;。 |
| onSkip(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 | | onSkip(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 |
| onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击左边或者右边文本按钮进行步骤切换时触发该事件。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 | | onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击当前StepperItem的prevLabel或nextLabel进行步骤切换时触发该回调。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 |
| onNext(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击切换下一步骤时触发该事件。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：下一步骤页索引值。 | | onNext(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击StepperItem的nextLabel切换下一步骤时触发该回调。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：下一步骤页索引值。 |
| onPrevious(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击切换上一步骤时触发该事件。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：上一步骤页索引值。 | | onPrevious(callback:&nbsp;(index?:&nbsp;number,&nbsp;pendingIndex?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击StepperItem的prevLabel切换上一步骤时触发该回调。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：上一步骤页索引值。 |
## 示例 ## 示例
...@@ -51,73 +46,86 @@ Stepper(value?: { index?: number }) ...@@ -51,73 +46,86 @@ Stepper(value?: { index?: number })
@Entry @Entry
@Component @Component
struct StepperExample { struct StepperExample {
@State currentIndex: number = 0 @State currentIndex: number = 0;
@State firstState: ItemState = ItemState.Normal @State firstState: ItemState = ItemState.Normal;
@State secondState: ItemState = ItemState.Normal @State secondState: ItemState = ItemState.Normal;
@State thirdState: ItemState = ItemState.Normal;
build() { build() {
Stepper({ Stepper({
index: this.currentIndex index: this.currentIndex
}) { }) {
// 第一个步骤页
StepperItem() { StepperItem() {
Text('Page One') Column() {
.fontSize(35) Text('Page One')
.fontColor(Color.Blue) .fontSize(35)
.width(200) .fontColor(Color.Blue)
.lineHeight(50) .lineHeight(50)
.margin({top:250}) .margin({ top: 250, bottom: 50 })
Button('change status:' + this.firstState)
.onClick(() => {
this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip;
})
}.width('100%')
} }
.nextLabel('') .nextLabel('Next')
.position({x: '35%', y: 0}) .status(this.firstState)
// 第二个步骤页
StepperItem() { StepperItem() {
Text('Page Two') Column() {
.fontSize(35) Text('Page Two')
.fontColor(Color.Blue) .fontSize(35)
.width(200) .fontColor(Color.Blue)
.lineHeight(50) .lineHeight(50)
.margin({top:250}) .margin({ top: 250, bottom: 50 })
.onClick(()=>{ Button('change status:' + this.secondState)
this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip .onClick(() => {
}) this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled;
})
}.width('100%')
} }
.nextLabel('Next') .nextLabel('Next')
.prevLabel('Previous') .prevLabel('Previous')
.status(this.firstState) .status(this.secondState)
.position({x: '35%', y: 0}) // 第三个步骤页
StepperItem() { StepperItem() {
Text('Page Three') Column() {
.fontSize(35) Text('Page Three')
.fontColor(Color.Blue) .fontSize(35)
.width(200) .fontColor(Color.Blue)
.lineHeight(50) .lineHeight(50)
.margin({top:250}) .margin({ top: 250, bottom: 50 })
.onClick(()=>{ Button('change status:' + this.thirdState)
this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting .onClick(() => {
}) this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting;
})
}.width('100%')
} }
.position({x: '35%', y: 0}) .status(this.thirdState)
.status(this.secondState) // 第四个步骤页
StepperItem() { StepperItem() {
Text('Page four') Text('Page four')
.fontSize(35) .fontSize(35)
.fontColor(Color.Blue) .fontColor(Color.Blue)
.width(200) .width('100%')
.textAlign(TextAlign.Center)
.lineHeight(50) .lineHeight(50)
.margin({top:250}) .margin({ top: 250 })
} }
.position({x: '35%', y: 0})
.nextLabel('Finish') .nextLabel('Finish')
} }
.onFinish(() => { .onFinish(() => {
console.log('onFinish') // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
console.info('onFinish');
}) })
.onSkip(() => { .onSkip(() => {
console.log('onSkip') // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
console.info('onSkip');
}) })
.onChange((prevIndex: number, index: number) => { .onChange((prevIndex: number, index: number) => {
this.currentIndex = index this.currentIndex = index;
}) })
.align(Alignment.Center)
} }
} }
``` ```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
浏览文件 @ 75a738d1
# StepperItem # StepperItem
步骤导航器元素。 用作[Stepper](ts-basic-components-stepper.md)组件的页面子组件
> **说明：** > **说明：**
...@@ -8,11 +8,6 @@ ...@@ -8,11 +8,6 @@
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件 ## 子组件
支持单个子组件。 支持单个子组件。
...@@ -25,20 +20,20 @@ StepperItem() ...@@ -25,20 +20,20 @@ StepperItem()
## 属性 ## 属性
| 参数名 | 参数类型 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 参数描述 |
| --------- | --------- | ---------------- | ------------------------------------- | | --------- | --------- | ------------------------------------------------------------ |
| prevLabel | string | - | 当步骤导航器大于一页，除第一页默认值都为"返回"。 | | prevLabel | string | 设置左侧文本按钮内容，第一页没有左侧文本按钮，当步骤导航器大于一页时，除第一页外默认值都为“返回”。 |
| nextLabel | string | - | 步骤导航器大于一页时，最后一页默认值为"开始"，其余页默认值为"下一步"。 | | nextLabel | string | 设置右侧文本按钮内容，最后一页默认值为“开始”，其余页默认值为“下一步”。 |
| status | ItemState | ItemState.Normal | 步骤导航器元素的状态。 | | status | ItemState | 步骤导航器nextLabel的显示状态。<br/>默认值：ItemState.Normal |
## ItemState枚举说明 ## ItemState枚举说明
| 名称 | 描述 | | 名称 | 值 | 描述 |
| -------- | ---------------------------------------- | | -------- | ---- | ------------------------------------------------------------ |
| Normal | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 | | Normal | 0 | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 |
| Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 | | Disabled | 1 | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 |
| Waiting | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 | | Waiting | 2 | 等待状态，右侧文本按钮不显示，显示等待进度条，不可点击进入下一个StepperItem。 |
| Skip | 跳过状态，表示跳过当前步骤,&nbsp;进入下一个StepperItem。 | | Skip | 3 | 跳过状态，右侧文本按钮显示“跳过”，此时可在Stepper的onSkip回调中自定义相关逻辑。 |
## 示例 ## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
浏览文件 @ 75a738d1
# 拖拽事件 # 拖拽事件
拖拽事件指组件被长按后拖拽时触发的事件。
> **说明：** > **说明：**
> >
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
...@@ -8,30 +10,31 @@ ...@@ -8,30 +10,31 @@
| 名称 | 支持冒泡 | 功能描述 | | 名称 | 支持冒泡 | 功能描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onDragStart(event:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;&nbsp;[CustomBuilder](ts-types.md#custombuilder8)) \| DragItemInfo | 否 | 第一次拖拽此事件绑定的组件时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>返回值：当前跟手效果所拖拽的对象，用于显示拖拽时的提示组件。<br/>长按150毫秒(ms)可触发拖拽事件。优先级：长按手势配置时间小于等于150毫秒(ms)时，长按手势优先触发，否则拖拽事件优先触发。 | | onDragStart(event:&nbsp;(event:&nbsp;[DragEvent](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;&nbsp;[CustomBuilder](ts-types.md#custombuilder8)) \| [DragItemInfo](#dragiteminfo说明) | 否 | 第一次拖拽此事件绑定的组件时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>返回值：当前跟手效果所拖拽的对象，用于显示拖拽时的提示组件。<br/>长按150ms可触发拖拽事件。优先级：长按手势配置时间小于等于150ms时，长按手势优先触发，否则拖拽事件优先触发。 |
| onDragEnter(event:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽进入组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 | | onDragEnter(event:&nbsp;(event:&nbsp;[DragEvent](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽进入组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>当监听了onDrop事件时，此事件才有效。 |
| onDragMove(event:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽在组件范围内移动时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 | | onDragMove(event:&nbsp;(event:&nbsp;[DragEvent](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽在组件范围内移动时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>当监听了onDrop事件时，此事件才有效。 |
| onDragLeave(event:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽离开组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 | | onDragLeave(event:&nbsp;(event:&nbsp;[DragEvent](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽离开组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>当监听了onDrop事件时，此事件才有效。 |
| onDrop(event:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。 | | onDrop(event:&nbsp;(event:&nbsp;[DragEvent](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。 |
## DragItemInfo说明 ## DragItemInfo说明
| 属性名称 | 属性类型 | 必填 | 描述 | | 属性名称 | 属性类型 | 必填 | 描述 |
| ------------- | ------ | ------- |--------------------------------- | | ------------- | ------ | ------- |--------------------------------- |
| pixelMap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | 设置拖拽过程中显示的图片。 | | pixelMap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | 设置拖拽过程中显示的图片。 |
| builder | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 使用自定义生成器进行绘图，如果设置了pixelMap，则忽略此值。 | | builder | [CustomBuilder](ts-types.md#custombuilder8) | 否 | 拖拽过程中显示自定义组件，如果设置了pixelMap，则忽略此值。 |
| extraInfo | string | 否 | 拖拽项的描述。 | | extraInfo | string | 否 | 拖拽项的描述。 |
## extraParams说明<br>
用于返回组件在拖拽中需要用到的额外信息。
extraParams是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。
## extraParam说明<br> | 名称 | 类型 | 描述 |
用于返回组件在拖拽中需要用到的额外信息。 | ------------- | ------ | ------------------------------------------------------------ |
extraParam是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。 | selectedIndex | number | 当拖拽事件设在父容器的子元素时，selectedIndex表示当前被拖拽子元素是父容器第selectedIndex个子元素，selectedIndex从0开始。<br/>仅在ListItem组件的拖拽事件中生效。 |
| 属性名称 | 属性类型 | 描述 | | insertIndex | number | 当前拖拽元素在List组件中放下时，insertIndex表示被拖拽元素插入该组件的第insertIndex个位置，insertIndex从0开始。<br/>仅在List组件的拖拽事件中生效。 |
| ------------- | ------ | ---------------------------------------- |
| selectedIndex | number | 当拖拽事件设在父容器的子元素时，selectedIndex表示当前被拖拽子元素是父容器第selectedIndex个子元素，selectedIndex从0开始。<br/>仅在ListItem组件中生效。 |
| insertIndex | number | 当前拖拽元素在List组件中放下时，insertIndex表示被拖拽元素插入该组件的第insertIndex个位置，insertIndex从0开始。<br/>仅在List组件的拖拽事件中生效。 |
### DragEvent对象说明 ### DragEvent说明
| 名称 | 返回值类型 | 功能描述 | | 名称 | 类型 | 功能描述 |
| ------ | ------ | ---------------- | | ------ | ------ | ----------------------------- |
| getX() | number | 当前拖拽点x轴坐标，单位为vp。 | | getX() | number | 当前拖拽点x轴坐标，单位为vp。 |
| getY() | number | 当前拖拽点y轴坐标，单位为vp。 | | getY() | number | 当前拖拽点y轴坐标，单位为vp。 |
...@@ -42,103 +45,117 @@ ...@@ -42,103 +45,117 @@
@Entry @Entry
@Component @Component
struct DragExample { struct DragExample {
@State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'] @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'];
@State text: string = '' @State text: string = '';
@State bool: boolean = false @State bool: boolean = false;
@State bool1: boolean = false @State appleVisible: Visibility = Visibility.Visible;
@State size: string = '' @State orangeVisible: Visibility = Visibility.Visible;
@State appleVisible: Visibility = Visibility.Visible @State bananaVisible: Visibility = Visibility.Visible;
@State orangeVisible: Visibility = Visibility.Visible
@State bananaVisible: Visibility = Visibility.Visible
@State select: number = 0
@State currentIndex: number = 0
// 自定义拖拽过程中显示的内容
@Builder pixelMapBuilder() { @Builder pixelMapBuilder() {
Column() { Column() {
Text(this.text) Text(this.text)
.width('50%').height(60).fontSize(16).borderRadius(10) .width('50%')
.textAlign(TextAlign.Center).backgroundColor(Color.Yellow) .height(60)
.fontSize(16)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(Color.Yellow)
} }
} }
build() { build() {
Column() { Column() {
Text('There are three Text elements here') Text('There are three Text elements here')
.fontSize(12).fontColor(0xCCCCCC).width('90%') .fontSize(12)
.textAlign(TextAlign.Start).margin(5) .fontColor(0xCCCCCC)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) { .width('90%')
Text('apple').width('25%').height(35).fontSize(16) .textAlign(TextAlign.Start)
.textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) .margin(5)
Row({ space: 15 }) {
Text('apple')
.width('25%')
.height(35)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
.visibility(this.appleVisible) .visibility(this.appleVisible)
.onDragStart(() => { .onDragStart(() => {
this.bool = true this.bool = true;
this.text = 'apple' this.text = 'apple';
this.appleVisible = Visibility.Hidden this.appleVisible = Visibility.None;
return this.pixelMapBuilder return this.pixelMapBuilder;
}) })
Text('orange').width('25%').height(35).fontSize(16) Text('orange')
.textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) .width('25%')
.height(35)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
.visibility(this.orangeVisible) .visibility(this.orangeVisible)
.onDragStart(() => { .onDragStart(() => {
this.bool = true this.bool = true;
this.text = 'orange' this.text = 'orange';
this.orangeVisible = Visibility.Hidden this.orangeVisible = Visibility.None;
return this.pixelMapBuilder return this.pixelMapBuilder;
}) })
Text('banana').width('25%').height(35).fontSize(16) Text('banana')
.textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) .width('25%')
.height(35)
.fontSize(16)
.textAlign(TextAlign.Center)
.backgroundColor(0xAFEEEE)
.visibility(this.bananaVisible) .visibility(this.bananaVisible)
.onDragStart((event: DragEvent, extraParams: string) => { .onDragStart((event: DragEvent, extraParams: string) => {
console.log('Text onDragStarts, ' + extraParams) console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
this.bool = true this.bool = true;
this.text = 'banana' this.text = 'banana';
this.bananaVisible = Visibility.Hidden this.bananaVisible = Visibility.None;
return this.pixelMapBuilder 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) Text('This is a List element')
.fontColor(0xCCCCCC).width('90%') .fontSize(12)
.textAlign(TextAlign.Start).margin(15) .fontColor(0xCCCCCC)
List({ space: 20, initialIndex: 0 }) { .width('90%')
.textAlign(TextAlign.Start)
.margin(15)
List({ space: 20 }) {
ForEach(this.numbers, (item) => { ForEach(this.numbers, (item) => {
ListItem() { ListItem() {
Text('' + item) Text(item)
.width('100%').height(80).fontSize(16).borderRadius(10) .width('100%')
.textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) .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) }, item => item)
} }
.editMode(true) .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 }) .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
.onDragEnter((event: DragEvent, extraParams: string) => { .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) => { .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) => { .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) => { .onDrop((event: DragEvent, extraParams: string) => {
var jsonString = JSON.parse(extraParams) var jsonString = JSON.parse(extraParams);
if (this.bool) { if (this.bool) {
this.numbers.splice(jsonString.insertIndex, 0, this.text) // 通过splice方法插入元素
this.bool = false this.numbers.splice(jsonString.insertIndex, 0, this.text);
} else if (this.bool1) { this.bool = false;
this.numbers.splice(jsonString.selectedIndex, 1)
this.numbers.splice(jsonString.insertIndex, 0, this.text)
this.bool = false
this.bool1 = false
} }
}) })
}.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
浏览文件 @ 75a738d1
# 按键事件 # 按键事件
按键事件指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可交互组件（默认可获焦），例如Button。对于Text，Image等不可获焦组件，可以设置focusable属性为true后使用按键事件。 按键事件指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可获焦组件，例如Button。对于Text，Image等默认不可获焦的组件，可以设置focusable属性为true后使用按键事件。
> **说明：** > **说明：**
> >
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 事件 ## 事件
| 名称 | 支持冒泡 | 功能描述 | | 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onKeyEvent(event:&nbsp;(event?:&nbsp;KeyEvent)&nbsp;=&gt;&nbsp;void) | 是 | 绑定该方法的组件获焦后，按键动作触发该方法调用，event参数见[KeyEvent](#keyevent对象说明)介绍。 | | onKeyEvent(event:&nbsp;(event?:&nbsp;KeyEvent)&nbsp;=&gt;&nbsp;void) | 是 | 绑定该方法的组件获焦后，按键动作触发该方法调用，event返回值见[KeyEvent](#keyevent对象说明)介绍。 |
## KeyEvent对象说明 ## KeyEvent对象说明
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| ------------------------------------- | ---------------------------------------- | -------------------------- | | --------------- | ------------------------------------------- | ------------------------------------------------------------ |
| type | [KeyType](ts-appendix-enums.md#keytype) | 按键的类型。 | | type | [KeyType](ts-appendix-enums.md#keytype) | 按键的类型。 |
| [keyCode](../apis/js-apis-keycode.md) | number | 按键的键码。 | | keyCode | number | 按键的键码。 |
| keyText | string | 按键的键值。 | | keyText | string | 按键的键值。 |
| keySource | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。 | | keySource | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。 |
| deviceId | number | 触发当前按键的输入设备ID。 | | deviceId | number | 触发当前按键的输入设备ID。 |
| metaKey | number | 按键发生时元键的状态，1表示按压态，0表示未按压态。 | | metaKey | number | 按键发生时元键（即Windows键盘的WIN键、Mac键盘的Command键）的状态，1表示按压态，0表示未按压态。 |
| timestamp | number | 按键发生时的时间戳。 | | timestamp | number | 按键发生时的时间戳。 |
| stopPropagation | () => void | 阻塞事件冒泡传递。 | | stopPropagation | () => void | 阻塞事件冒泡传递。 |
## 示例 ## 示例
...@@ -35,6 +33,28 @@ ...@@ -35,6 +33,28 @@
// xxx.ets // xxx.ets
@Entry @Entry
@Component @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 { struct KeyEventExample {
@State text: string = '' @State text: string = ''
@State eventType: string = '' @State eventType: string = ''
...@@ -57,4 +77,4 @@ struct KeyEventExample { ...@@ -57,4 +77,4 @@ struct KeyEventExample {
} }
``` ```
![zh-cn_image_0000001174264364](figures/zh-cn_image_0000001174264364.gif) ![zh-cn_image_0000001174264364](figures/zh-cn_image_0000001174264364.png)
\ No newline at end of file \ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
浏览文件 @ 75a738d1
...@@ -17,30 +17,36 @@ ...@@ -17,30 +17,36 @@
```ts ```ts
// xxx.ets // xxx.ets
import prompt from '@system.prompt' import prompt from '@ohos.prompt';
@Entry @Entry
@Component @Component
struct AppearExample { struct AppearExample {
@State isShow: boolean = true @State isShow: boolean = true;
private myText: string = 'Text for onAppear' @State changeAppear: string = 'Hide Text';
private changeAppear: string = 'Hide Text' private myText: string = 'Text for onAppear';
build() { build() {
Column() { Column() {
Button(this.changeAppear) Button(this.changeAppear)
.onClick(() => { .onClick(() => {
this.isShow = !this.isShow this.isShow = !this.isShow;
}).margin(3).backgroundColor(0x2788D9) }).margin(15)
if (this.isShow) { if (this.isShow) {
Text(this.myText) Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
.onAppear(() => { .onAppear(() => {
this.changeAppear = 'Show Text' this.changeAppear = 'Hide Text';
prompt.showToast({ message: 'The text is shown', duration: 2000 }) prompt.showToast({
message: 'The text is shown',
duration: 2000
})
}) })
.onDisAppear(() => { .onDisAppear(() => {
this.changeAppear = 'Hide Text' this.changeAppear = 'Show Text';
prompt.showToast({ message: 'The text is hidden', duration: 2000 }) prompt.showToast({
message: 'The text is hidden',
duration: 2000
})
}) })
} }
}.padding(30).width('100%') }.padding(30).width('100%')
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
浏览文件 @ 75a738d1
# 触摸事件 # 触摸事件
当手指在组件上按下、滑动、抬起时触发。
> **说明：** > **说明：**
> >
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
...@@ -9,7 +11,7 @@ ...@@ -9,7 +11,7 @@
| 名称 | 是否冒泡 | 功能描述 | | 名称 | 是否冒泡 | 功能描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onTouch(event:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 | | onTouch(event:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | 是 | 触摸动作触发该方法调用，event返回值见[TouchEvent](#touchevent对象说明)介绍。 |
## TouchEvent对象说明 ## TouchEvent对象说明
...@@ -21,8 +23,8 @@ ...@@ -21,8 +23,8 @@
| changedTouches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 当前发生变化的手指信息。 | | changedTouches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 当前发生变化的手指信息。 |
| stopPropagation | () => void | 阻塞事件冒泡。 | | stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | | timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 | | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md\#eventtarget8对象说明) | 触发事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 | | source<sup>8+</sup> | [SourceType](ts-gesture-settings.md\#sourcetype枚举说明) | 事件输入设备。 |
## TouchObject对象说明 ## TouchObject对象说明
...@@ -43,29 +45,45 @@ ...@@ -43,29 +45,45 @@
@Entry @Entry
@Component @Component
struct TouchExample { struct TouchExample {
@State text: string = '' @State text: string = '';
@State eventType: string = '' @State eventType: string = '';
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Column() {
Button('Touch').backgroundColor(0x2788D9).height(40).width(80) 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) => { .onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) { if (event.type === TouchType.Down) {
this.eventType = 'Down' this.eventType = 'Down';
} }
if (event.type === TouchType.Up) { if (event.type === TouchType.Up) {
this.eventType = 'Up' this.eventType = 'Up';
} }
if (event.type === TouchType.Move) { 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: ' 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.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.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) Text(this.text)
}.height(200).width(350).padding({ left: 35, right: 35, top: 35 }) }.width('100%').padding(30)
} }
} }
``` ```
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md
浏览文件 @ 75a738d1
# 焦点事件 # 焦点事件
焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。
> **说明：** > **说明：**
> >
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > - 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 目前仅支持通过外接键盘的tab键、方向键触发。
## 事件 ## 事件
...@@ -12,9 +16,6 @@ ...@@ -12,9 +16,6 @@
| onFocus(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件获取焦点时触发的回调。 | | onFocus(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件获取焦点时触发的回调。 |
| onBlur(event:()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件失去焦点时触发的回调。 | | onBlur(event:()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件失去焦点时触发的回调。 |
> **说明：**
> 支持焦点事件的组件：Button、Text、Image、List、Grid。
## 示例 ## 示例
...@@ -23,44 +24,52 @@ ...@@ -23,44 +24,52 @@
@Entry @Entry
@Component @Component
struct FocusEventExample { struct FocusEventExample {
@State textOne: string = '' @State oneButtonColor: string = '#FFC0CB';
@State textTwo: string = '' @State twoButtonColor: string = '#87CEFA';
@State textThree: string = '' @State threeButtonColor: string = '#90EE90';
@State oneButtonColor: string = '#FF0000'
@State twoButtonColor: string = '#87CEFA'
@State threeButtonColor: string = '#90EE90'
build() { build() {
Column({ space:20 }){ Column({ space: 20 }) {
Button(this.textOne) // 通过外接键盘的上下键可以让焦点在三个按钮间移动，按钮获焦时颜色变化，失焦时变回原背景色
Button('First Button')
.backgroundColor(this.oneButtonColor) .backgroundColor(this.oneButtonColor)
.width(260).height(70).fontColor(Color.Black) .width(260)
.height(70)
.fontColor(Color.Black)
.focusable(true) .focusable(true)
.onFocus(() => { .onFocus(() => {
this.textOne = 'First Button onFocus' this.oneButtonColor = '#FF0000';
this.oneButtonColor = '#AFEEEE'
}) })
.onBlur(() => { .onBlur(() => {
this.textOne = 'First Button onBlur' this.oneButtonColor = '#FFC0CB';
this.oneButtonColor = '#FFC0CB'
}) })
Button(this.textTwo) Button('Second Button')
.backgroundColor(this.twoButtonColor) .backgroundColor(this.twoButtonColor)
.width(260).height(70).fontColor(Color.Black) .width(260)
.height(70)
.fontColor(Color.Black)
.focusable(true) .focusable(true)
Button(this.textThree) .onFocus(() => {
this.twoButtonColor = '#FF0000';
})
.onBlur(() => {
this.twoButtonColor = '#87CEFA';
})
Button('Third Button')
.backgroundColor(this.threeButtonColor) .backgroundColor(this.threeButtonColor)
.width(260).height(70).fontColor(Color.Black) .width(260)
.height(70)
.fontColor(Color.Black)
.focusable(true) .focusable(true)
.onFocus(() => { .onFocus(() => {
this.textThree = 'Third Button onFocus' this.threeButtonColor = '#FF0000';
this.threeButtonColor = '#AFEEEE'
}) })
.onBlur(() => { .onBlur(() => {
this.textThree = 'Third Button onBlur' this.threeButtonColor = '#90EE90';
this.threeButtonColor = '#FFC0CB'
}) })
}.width('100%').margin({ top:20 }) }.width('100%').margin({ top: 20 })
} }
} }
``` ```
![focus](figures/focus.png)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
浏览文件 @ 75a738d1
# 鼠标事件 # 鼠标事件
在鼠标的单个动作触发多个事件时，事件的顺序是固定的，鼠标事件默认透传。
> **说明：** > **说明：**
> >
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
...@@ -10,23 +12,23 @@ ...@@ -10,23 +12,23 @@
| 名称 | 支持冒泡 | 描述 | | 名称 | 支持冒泡 | 描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onHover(event:&nbsp;(isHover:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 否 | 鼠标进入或退出组件时触发该回调。<br/>isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true,&nbsp;退出时为false。 | | onHover(event:&nbsp;(isHover:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 否 | 鼠标进入或退出组件时触发该回调。<br/>isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true,&nbsp;退出时为false。 |
| onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上移动时，触发该回调，event参数包含触发事件时的时间戳、鼠标按键、动作、点击触点在整个屏幕上的坐标和点击触点相对于当前组件的坐标。 | | onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时，触发该回调，event返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。 |
## MouseEvent对象说明 ## MouseEvent对象说明
| 名称 | 属性类型 | 描述 | | 名称 | 属性类型 | 描述 |
| --------- | ------------------------------- | -------------------- | | --------- | ------------------------------- | -------------------- |
| screenX | number | 点击触点相对于应用窗口左上角的x轴坐标。 | | screenX | number | 鼠标位置相对于应用窗口左上角的x轴坐标。 |
| screenY | number | 点击触点相对于应用窗口左上角的y轴坐标。 | | screenY | number | 鼠标位置相对于应用窗口左上角的y轴坐标。 |
| x | number | 点击触点相对于当前组件左上角的x轴坐标。 | | x | number | 鼠标位置相对于当前组件左上角的x轴坐标。 |
| y | number | 点击触点相对于当前组件左上角的y轴坐标。 | | y | number | 鼠标位置相对于当前组件左上角的y轴坐标。 |
| button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。 | | button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。 |
| action | [MouseAction](ts-appendix-enums.md#mouseaction) | 事件动作。 | | action | [MouseAction](ts-appendix-enums.md#mouseaction) | 鼠标动作。 |
| stopPropagation | () => void | 阻塞事件冒泡。 | | stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 | | timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 | | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md\#eventtarget8对象说明) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 | | source<sup>8+</sup> | [SourceType](ts-gesture-settings.md\#sourcetype枚举说明) | 事件输入设备。 |
## 示例 ## 示例
...@@ -35,31 +37,80 @@ ...@@ -35,31 +37,80 @@
@Entry @Entry
@Component @Component
struct MouseEventExample { struct MouseEventExample {
@State hoverText: string = 'no hover' @State hoverText: string = 'no hover';
@State mouseText: string = 'MouseText' @State mouseText: string = '';
@State color: Color = Color.Blue @State action: string = '';
@State mouseBtn: string = '';
@State color: Color = Color.Blue;
build() { build() {
Column({ space:20 }) { Column({ space: 20 }) {
Button(this.hoverText) Button(this.hoverText)
.width(180).height(80)
.backgroundColor(this.color)
.onHover((isHover: boolean) => { .onHover((isHover: boolean) => {
// 通过onHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色
if (isHover) { if (isHover) {
this.hoverText = 'on hover' this.hoverText = 'hover';
this.color = Color.Pink this.color = Color.Pink;
} else { } else {
this.hoverText = 'no hover' this.hoverText = 'no hover';
this.color = Color.Blue this.color = Color.Blue;
} }
}) })
.backgroundColor(this.color)
Button('onMouse') Button('onMouse')
.width(180).height(80)
.onMouse((event: MouseEvent) => { .onMouse((event: MouseEvent) => {
console.log(this.mouseText = 'onMouse:\nButton = ' + event.button + switch (event.button) {
'\nAction = ' + event.action + '\nlocalXY=(' + event.x + ',' + event.y + ')' + case MouseButton.None:
'\nscreenXY=(' + event.screenX + ',' + event.screenY + ')') 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) Text(this.mouseText)
}.padding({ top: 20 }).width('100%') }.padding({ top: 30 }).width('100%')
} }
} }
``` ```
示意图：
鼠标悬浮时改变文本内容与背景颜色：
![focus](figures/mouse.png)
鼠标点击时：
![mouse1](figures/mouse1.png)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或