diff --git a/ArkUI/entry/src/main/ets/pages/CustomNavigationPointsPlanTwo.ets b/ArkUI/entry/src/main/ets/pages/CustomNavigationPointsPlanTwo.ets new file mode 100644 index 0000000000000000000000000000000000000000..2bb06b8e0293c3413e688578462e8b79526e54dc --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/CustomNavigationPointsPlanTwo.ets @@ -0,0 +1,62 @@ +/* +* Copyright (c) 2025 Huawei Device Co., Ltd. +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* +* FAQ:Swiper如何自定义导航点高度位置 +*/ + +// [Start DotIndicatorDemo] +@Entry +@Component +struct DotIndicatorDemo { + private indicatorController: IndicatorComponentController = new IndicatorComponentController(); + private swiperController: SwiperController = new SwiperController(); + @State list: string[] = ['1', '2', '3', '4', '5', '6']; + + build() { + Stack({ alignContent: Alignment.Bottom }) { + Swiper(this.swiperController) { + ForEach(this.list, (item: string) => { + Text(item) + .width('90%') + .height(200) + .backgroundColor(0xAFEEEE) + .textAlign(TextAlign.Center) + .fontSize(30) + }, (item: string) => item) + } + .cachedCount(2) + .index(0) + .indicator(this.indicatorController) + + Column() { + IndicatorComponent(this.indicatorController) + .style( + new DotIndicator() + .itemWidth(10) + .itemHeight(10) + .selectedItemWidth(20) + .selectedItemHeight(10) + .color(Color.White) + .selectedColor(Color.Gray) + ) + } + .height(25) + .clip(true) + } + .width('100%') + } +} +// [Start DotIndicatorDemo] \ No newline at end of file diff --git a/ArkUI/entry/src/main/ets/pages/CustomRateLimiting.ets b/ArkUI/entry/src/main/ets/pages/CustomRateLimiting.ets new file mode 100644 index 0000000000000000000000000000000000000000..3e95de644cec0cbdb5fd073372f7fceb62b8b2df --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/CustomRateLimiting.ets @@ -0,0 +1,72 @@ +/* +* Copyright (c) 2024 Huawei Device Co., Ltd. +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* +* FAQ: 如何对手势事件进行限流？例如500ms内不允许点击事件重复触发？ +*/ + +// [Start gesture_modifier] +class MyGesture implements GestureModifier { + // 防重点击间隔时间 + interval: number = 500; + // 上次点击时间 + lastTime: number = 0; + func: Function = () => { + } + + applyGesture(event: UIGestureEvent): void { + event.addGesture( + new TapGestureHandler({ count: 1, fingers: 1 }) + .onAction((event: GestureEvent) => { + const nowTime = Date.now(); + const remainTime = this.interval - (nowTime - this.lastTime); + if (remainTime <= 0) { + this.lastTime = nowTime; + this.func(); + } + }) + ) + } +} + +@Entry +@Component +struct Index { + @State message: string = 'Hello World'; + @State modifier: MyGesture = new MyGesture(); + + onPageShow(): void { + this.modifier.func = () => { + console.info('---onTap---'); + } + } + + build() { + RelativeContainer() { + Button(this.message) + .id('click') + .fontSize(50) + .fontWeight(FontWeight.Bold) + .alignRules({ + center: { anchor: "__container__", align: VerticalAlign.Center }, + middle: { anchor: "__container__", align: HorizontalAlign.Center } + }) + .gestureModifier(this.modifier) + } + .height('100%') + .width('100%') + } +} +// [End gesture_modifier] \ No newline at end of file diff --git a/ArkUI/entry/src/main/ets/pages/GestureRateLimiting.ets b/ArkUI/entry/src/main/ets/pages/GestureRateLimiting.ets new file mode 100644 index 0000000000000000000000000000000000000000..f5150aa5b7050226084fb83dfeac4a6570ec1653 --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/GestureRateLimiting.ets @@ -0,0 +1,46 @@ +/* +* Copyright (c) 2024 Huawei Device Co., Ltd. +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* +* FAQ: 如何对手势事件进行限流？例如500ms内不允许点击事件重复触发？ +*/ + +// [Start throttle] +// 定义限流函数 +function throttle(func: Function, interval: number) { + let lastTime = 0; + return () => { + const nowTime = Date.now(); + const remainTime = interval - (nowTime - lastTime); + if (remainTime <= 0) { + lastTime = nowTime; + func(); + } + }; +} +// [End throttle] + +// 对Button的点击事件进行节流，500ms内不能重复触发 +@Entry +@Component +struct Index { + build() { + // [Start on_click] + Button('防止重复点击').onClick(throttle(() => { + // do something + }, 5000)) + // [End on_click] + } +} \ No newline at end of file diff --git a/ArkUI/entry/src/main/ets/pages/InertialRolling.ets b/ArkUI/entry/src/main/ets/pages/InertialRolling.ets new file mode 100644 index 0000000000000000000000000000000000000000..036ca2b49a1db3b41c9ddafebe25a157113e9968 --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/InertialRolling.ets @@ -0,0 +1,80 @@ +/* +* Copyright (c) 2024 Huawei Device Co., Ltd. +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +/* +* FAQ: 如何通过PanGesture手势或者SwipeGesture手势实现自定义组件的惯性滚动效果 +*/ + +// [Start pan_gesture_example] +@Entry +@Component +struct PanGestureExample { + @State offsetX: number = 0; + @State offsetY: number = 0; + @State positionX: number = 0; + @State positionY: number = 0; + private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Up | PanDirection.Down }); + + build() { + Column() { + Text('PanGesture offset: \nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) + } + .height(200) + .width(200) + .padding(20) + .border({ width: 3 }) + .margin(30) + // 以组件左上角为坐标原点进行移动 + .translate({ + x: this.offsetX, + y: this.offsetY, + z: 0 + }) + .gesture( + // 拖动 + PanGesture(this.panOption) + .onActionStart((event?: GestureEvent) => { + console.info('Pan start'); + }) + .onActionUpdate((event?: GestureEvent) => { + if (event) { + // 最后的位置加上偏移量 + this.offsetX = this.positionX + event.offsetX; + this.offsetY = this.positionY + event.offsetY; + } + }) + .onActionEnd((event) => { + this.offsetX = this.positionX + event.offsetX; + this.offsetY = this.positionY + event.offsetY; + this.positionX = this.positionX + event.offsetX; + this.positionY = this.positionY + event.offsetY; + let ySpeed = event.velocityY; + this.getUIContext().animateTo({ + duration: 1000, + curve: Curve.LinearOutSlowIn, + iterations: 1, + playMode: PlayMode.Normal, + onFinish: () => { + console.info('play end'); + } + }, () => { + this.offsetY = this.offsetY + ySpeed * 0.2; + this.positionY = this.positionY + ySpeed * 0.2; + }) + }) + ) + } +} +// [End pan_gesture_example] \ No newline at end of file