鸿蒙API13开辟【自界说变乱分发】ArkTS组件

ArkUI在处理触屏变乱时，会在触屏变乱触发前进行按压点和组件地区的触摸测试，来收集必要响应触屏变乱的组件，再基于触摸测试结果分发相应的触屏变乱。在父节点，开辟者可以通过onChildTouchTest决定如何让子节点去做触摸测试，影响子组件的触摸测试，最终影响后续的触屏变乱分发。
分析

• 从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  
• onClick以及旋转、捏合手势经过自界说变乱分发之后大概会由于触摸热区没有掷中导致变乱不响应。
  

onChildTouchTest

onChildTouchTest(event: (value: Array) => TouchResult): T
当前组件可通过设置回调来自界说子节点如何去做触摸测试。
元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填分析valueArray<[TouchTestInfo>]是包含子节点信息的数组。 返回值：
类型分析T返回当前组件。 分析
子节点信息数组中只包含定名节点的信息，即开辟者通过id属性设置了id的节点。
TouchTestInfo

当前按压点地点组件的坐标系、id和尺寸相关信息。
元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称类型描述windowXnumber按压点相对于窗口左上角的x轴坐标。windowYnumber按压点相对于窗口左上角的y轴坐标。parentXnumber按压点相对于父组件左上角的x轴坐标。parentYnumber按压点相对于父组件左上角的y轴坐标。xnumber按压点相对于子组件左上角的x轴坐标。ynumber按压点相对于子组件左上角的y轴坐标。rect[RectResult]子组件的巨细。[id]string通过id属性设置的组件id。 TouchResult

自界说变乱分发结果，开辟者通过返回结果来影响变乱分发。
元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称类型必填描述strategy[TouchTestStrategy]是变乱派发策略。idstring否通过id属性设置的组件id。当strategy为TouchTestStrategy.DEFAULT时，id是可选的；当strategy是TouchTestStrategy.FORWARD_COMPETITION或TouchTestStrategy.FORWARD时，id是必需的（如果没有返回id，则当成TouchTestStrategy.DEFAULT处理）。 TouchTestStrategy枚举分析

变乱派发策略。
卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中利用。
元服务API： 从API version 12开始，该接口支持在元服务中利用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称描述DEFAULT自界说分发不产生影响，体系按当前节点掷中状态分发变乱。FORWARD_COMPETITION应用指定分发变乱到某个子节点，其他兄弟节点是否分发变乱交由体系决定。FORWARD应用指定分发变乱到某个子节点，体系不再处理分发变乱到其他兄弟节点。 示例

示例1（设置变乱派发策略为FORWARD_COMPETITION）

该示例点击List下方空缺地区后拖动，可以或许拖动List滑动。点击Button按钮，Button会响应onClick变乱。

1. // xxx.ets
2. import { promptAction } from '@kit.ArkUI';
4. @Entry
5. @Component
6. struct ListExample {
7.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
8.   @State text: string = 'Button'
10.   build() {
11.     Column() {
12.       List({ space: 12, initialIndex: 0 }) {
13.         ForEach(this.arr, (item: number) => {
14.           ListItem() {
15.             Text('Item ' + item)
16.               .width('100%')
17.               .height(56)
18.               .fontSize(16)
19.               .textAlign(TextAlign.Start)
20.           }.borderRadius(24)
21.           .backgroundColor(Color.White)
22.           .padding({ left: 12, right: 12 })
23.         }, (item: string) => item)
24.       }
25.       .listDirection(Axis.Vertical)
26.       .scrollBar(BarState.Off)
27.       .edgeEffect(EdgeEffect.Spring)
28.       .onScrollIndex((start: number, end: number) => {
29.         console.info('first' + start)
30.         console.info('last' + end)
31.       })
32.       .onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
33.         console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)
34.       })
35.       .width('100%')
36.       .height('65%')
37.       .id('MyList')
39.       Button(this.text)
40.         .width(312)
41.         .height(40)
42.         .id('Mybutton')
43.         .fontSize(16)
44.         .fontWeight(FontWeight.Medium)
45.         .margin({ top: 80 })
46.         .onClick(() => {
47.           this.text = 'click the button'
48.           promptAction.showToast({ message: 'you click the button.', duration: 3000 })
49.         })
50.     }
51.     .width('100%')
52.     .height('100%')
53.     .backgroundColor(0xF1F3F5)
54.     .justifyContent(FlexAlign.End)
55.     .padding({ left: 12, right: 12, bottom: 24 })
56.     .onChildTouchTest((touchinfo) => {
57.       for (let info of touchinfo) {
58.         if (info.id == 'MyList') {
59.           return { id: info.id, strategy: TouchTestStrategy.FORWARD_COMPETITION }
60.         }
61.       }
62.       return { strategy: TouchTestStrategy.DEFAULT }
63.     })
64.   }
65. }

复制代码

示例2（设置变乱派发策略为FORWARD）

点击List下方空缺地区后拖动，可以或许拖动List滑动。点击Button按钮，Button不会响应onClick变乱。

1. // xxx.ets
2. import { promptAction } from '@kit.ArkUI';
4. @Entry
5. @Component
6. struct ListExample {
7.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
8.   @State text: string = 'Button'
10.   build() {
11.     Column() {
12.       List({ space: 12, initialIndex: 0 }) {
13.         ForEach(this.arr, (item: number) => {
14.           ListItem() {
15.             Text('Item ' + item)
16.               .width('100%')
17.               .height(56)
18.               .fontSize(16)
19.               .textAlign(TextAlign.Start)
20.           }.borderRadius(24)
21.           .backgroundColor(Color.White)
22.           .padding({ left: 12, right: 12 })
23.         }, (item: string) => item)
24.       }
25.       .listDirection(Axis.Vertical)
26.       .scrollBar(BarState.Off)
27.       .edgeEffect(EdgeEffect.Spring)
28.       .onScrollIndex((start: number, end: number) => {
29.         console.info('first' + start)
30.         console.info('last' + end)
31.       })
32.       .onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
33.         console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)
34.       })
35.       .width('100%')
36.       .height('65%')
37.       .id('MyList')
39.       Button(this.text)
40.         .width(312)
41.         .height(40)
42.         .id('Mybutton')
43.         .fontSize(16)
44.         .fontWeight(FontWeight.Medium)
45.         .margin({ top: 80 })
46.         .onClick(() => {
47.           this.text = 'click the button'
48.           promptAction.showToast({ message: 'you click the button.', duration: 3000 })
49.         })
50.     }
51.     .width('100%')
52.     .height('100%')
53.     .backgroundColor(0xF1F3F5)
54.     .justifyContent(FlexAlign.End)
55.     .padding({ left: 12, right: 12, bottom: 24 })
56.     .onChildTouchTest((touchinfo) => {
57.       for (let info of touchinfo) {
58.         if (info.id == 'MyList') {
59.           return { id: info.id, strategy: TouchTestStrategy.FORWARD }
60.         }
61.       }
62.       return { strategy: TouchTestStrategy.DEFAULT }
63.     })
64.   }
65. }

复制代码

示例3（设置变乱派发策略为DEFAULT）

点击List下方空缺地区后拖动，List不会滑动。点击Button按钮，Button会响应onClick变乱。

1. // xxx.ets
2. import { promptAction } from '@kit.ArkUI';
4. @Entry
5. @Component
6. struct ListExample {
7.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
8.   @State text: string = 'Button'
10.   build() {
11.     Column() {
12.       List({ space: 12, initialIndex: 0 }) {
13.         ForEach(this.arr, (item: number) => {
14.           ListItem() {
15.             Text('Item ' + item)
16.               .width('100%')
17.               .height(56)
18.               .fontSize(16)
19.               .textAlign(TextAlign.Start)
20.           }.borderRadius(24)
21.           .backgroundColor(Color.White)
22.           .padding({ left: 12, right: 12 })
23.         }, (item: string) => item)
24.       }
25.       .listDirection(Axis.Vertical)
26.       .scrollBar(BarState.Off)
27.       .edgeEffect(EdgeEffect.Spring)
28.       .onScrollIndex((start: number, end: number) => {
29.         console.info('first' + start)
30.         console.info('last' + end)
31.       })
32.       .onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
33.         console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)
34.       })
35.       .width('100%')
36.       .height('65%')
37.       .id('MyList')
39.       Button(this.text)
40.         .width(312)
41.         .height(40)
42.         .id('Mybutton')
43.         .fontSize(16)
44.         .fontWeight(FontWeight.Medium)
45.         .margin({ top: 80 })
46.         .onClick(() => {
47.           this.text = 'click the button'
48.           promptAction.showToast({ message: 'you click the button.', duration: 3000 })
49.         })
50.     }
51.     .width('100%')
52.     .height('100%')
53.     .backgroundColor(0xF1F3F5)
54.     .justifyContent(FlexAlign.End)
55.     .padding({ left: 12, right: 12, bottom: 24 })
56.     .onChildTouchTest((touchinfo) => {
57.       return { strategy: TouchTestStrategy.DEFAULT }
58.     })
59.   }
60. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。