Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“52e442b46e1cde484cfcd260c2bc2d48a73ad936”上不存在“...application-models/arkts-ui-widget-event-router.md”
提交 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
提供搜索框组件，用于提供用户搜索内容的输入区域。
搜索框组件，适用于浏览器的搜索内容输入框等应用场景。
> **说明：**
>
......@@ -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) | 设置文本在搜索框中的对齐方式。<br/>默认值：TextAlign.Start |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onSubmit(callback: (value: string) => void) | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发。<br> -value: 当前输入文本框的内容。 |
| onChange(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: 粘贴的文本内容。 |
除支持[通用事件](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: 复制的文本内容。 |
| onCut(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的剪切按钮触发该回调<br> -value: 剪切的文本内容。 |
| onPaste(callback: (value: string) => void) | 长按搜索框弹出剪切板之后，点击剪切板的粘贴按钮触发该回调。<br> -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%')
}
}
```
![search](figures/search.png)
\ No newline at end of file
![search](figures/search.gif)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ 75a738d1
# Slider
滑动条组件，用来快速调节设置值，如音量、亮度等。
滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
> **说明：**
>
......@@ -23,10 +23,10 @@ Slider(options?:{value?: number, min?: number, max?: number, step?: number, styl
| value | number | 否 | 当前进度值。<br/>默认值：0 |
| min | number | 否 | 设置最小值。<br/>默认值：0 |
| max | number | 否 | 设置最大值。<br/>默认值：100 |
| step | number | 否 | 设置滑动条滑动步长。<br/>默认值：1 |
| style | SliderStyle | 否 | 设置滑动条的滑块样式。<br/>默认值：SliderStyle.OutSet |
| step | number | 否 | 设置Slider滑动步长。<br/>默认值：1 |
| style | SliderStyle | 否 | 设置Slider的滑块与滑轨显示样式。<br/>默认值：SliderStyle.OutSet |
| 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枚举说明
......@@ -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 | 设置当前是否显示步长刻度值。<br/>默认值：false |
| showTips | boolean | 设置滑动时是否显示气泡提示百分比。<br/>默认值：false |
| showTips | boolean | 设置滑动时是否显示百分比气泡提示。<br/>默认值：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:&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枚举说明
| 名称 | 值 | 描述 |
| ------ | ---- | --------- |
| 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%')
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
浏览文件 @ 75a738d1
# 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:&nbsp;()&nbsp;=&gt;&nbsp;void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调&nbsp;。 |
| 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：切换后的步骤页（前一页或者下一页）索引值。 |
| onNext(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) | 点击切换上一步骤时触发该事件。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;pendingIndex：上一步骤页索引值。 |
| 名称 | 描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调&nbsp;。 |
| 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) | 点击当前StepperItem的prevLabel或nextLabel进行步骤切换时触发该回调。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 |
| 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) | 点击StepperItem的prevLabel切换上一步骤时触发该回调。<br/>-&nbsp;index：当前步骤页索引值。<br/>-&nbsp;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)
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
浏览文件 @ 75a738d1
# 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的显示状态。<br/>默认值：ItemState.Normal |
## ItemState枚举说明
| 名称 | 描述 |
| -------- | ---------------------------------------- |
| Normal | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 |
| Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 |
| Waiting | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 |
| Skip | 跳过状态，表示跳过当前步骤,&nbsp;进入下一个StepperItem。 |
| 名称 | 值 | 描述 |
| -------- | ---- | ------------------------------------------------------------ |
| Normal | 0 | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 |
| Disabled | 1 | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 |
| Waiting | 2 | 等待状态，右侧文本按钮不显示，显示等待进度条，不可点击进入下一个StepperItem。 |
| Skip | 3 | 跳过状态，右侧文本按钮显示“跳过”，此时可在Stepper的onSkip回调中自定义相关逻辑。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
浏览文件 @ 75a738d1
# 拖拽事件
拖拽事件指组件被长按后拖拽时触发的事件。
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -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)时，长按手势优先触发，否则拖拽事件优先触发。 |
| onDragEnter(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,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽在组件范围内移动时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 |
| onDragLeave(event:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽离开组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 |
| onDrop(event:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。 |
| 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](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽进入组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<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](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽离开组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见[extraParams](#extraparams说明)说明。<br/>当监听了onDrop事件时，此事件才有效。 |
| onDrop(event:&nbsp;(event:&nbsp;[DragEvent](#dragevent说明),&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- 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说明<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。 |
| 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 })
......
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开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 事件
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| 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对象说明
| 名称 | 类型 | 描述 |
| ------------------------------------- | ---------------------------------------- | -------------------------- |
| 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 {
}
```
![zh-cn_image_0000001174264364](figures/zh-cn_image_0000001174264364.gif)
\ No newline at end of file
![zh-cn_image_0000001174264364](figures/zh-cn_image_0000001174264364.png)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
浏览文件 @ 75a738d1
......@@ -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%')
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
浏览文件 @ 75a738d1
# 触摸事件
当手指在组件上按下、滑动、抬起时触发。
> **说明：**
>
> 从API Version 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对象说明
......@@ -21,8 +23,8 @@
| changedTouches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 当前发生变化的手指信息。 |
| stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md\#eventtarget8对象说明) | 触发事件的元素对象显示区域。 |
| source<sup>8+</sup> | [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)
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md
浏览文件 @ 75a738d1
# 焦点事件
焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> - 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 目前仅支持通过外接键盘的tab键、方向键触发。
## 事件
......@@ -12,9 +16,6 @@
| onFocus(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件获取焦点时触发的回调。 |
| onBlur(event:()&nbsp;=&gt;&nbsp;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 })
}
}
```
![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开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -10,23 +12,23 @@
| 名称 | 支持冒泡 | 描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| 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对象说明
| 名称 | 属性类型 | 描述 |
| --------- | ------------------------------- | -------------------- |
| 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 | 阻塞事件冒泡。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。触发事件时距离系统启动的时间间隔，单位纳秒。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md\#eventtarget8对象说明) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | [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%')
}
}
```
示意图：
鼠标悬浮时改变文本内容与背景颜色：
![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.
先完成此消息的编辑！
想要评论请 注册 或