diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/MultiIndicator.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/MultiIndicator.ets index 3725627efe5bf10ab97430731192813df047c78c..6f423e63ec61f050a6ed7c2b41feb88af3e6aba3 100644 --- a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/MultiIndicator.ets +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/MultiIndicator.ets @@ -1,22 +1,57 @@ +/* + * 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. + */ + /** + * 测试目的:验证Swiper、Indicator、controller之间的两两连接状态,其中showPrevious和showNext按键代表controller + * 建议使用测试前阅读代码了解各个场景具体做了操作 + * * 0-初始化页面 * 1、打开demo页面。 * 2、点击showNext1,showPrevious1,showNext2,showPrevious2。 + * 3、滑动Swiper,点击和长按拖动Indicator。 * * 说明: * 1、Swiper1和导航点1绑定,受controller1控制。 * 2、Swiper2和导航点2绑定,受controller2控制。 + * + * 连接状态描述: + * Swiper1 -- controller1 -- Indicator1 + * Swiper2 -- controller2 -- Indicator2 */ /** * 1-场景1: * Indicator1和Swiper1绑定,受controller2控制。 * Indicator2和Swiper2绑定,受controller1控制。 - * + * + * 连接状态描述: + * 此场景实际进行了两步: + * 第一步: + * Swiper2 -- controller1 -- Indicator1 + * Swiper1 -- controller2 -- Indicator2 + * 第二步: + * Swiper2 -- controller1 -- Indicator2 + * Swiper1 -- controller2 -- Indicator1 + * + * 此场景等同于场景4+场景5,如若此场景不通过,可尝试用5+4调换顺序来判断是Indicator问题还是Swiper问题。 + * * 操作步骤: * 1、打开demo页面。 * 2、点击场景1按钮。 * 3、点击showNext1,showPrevious1,showNext2,showPrevious2。 + * 4、滑动Swiper,点击和长按拖动Indicator。 * * 预期结果: * Indicator1和Swiper1绑定,受controller2控制。 @@ -25,66 +60,98 @@ /** * 2-场景2: - * Indicator2不变,切换Indicator1。 + * Indicator2不变,切换Indicator1。变化后应只有indicator1生效,两个分支场景只是控制它的controller不同。 * + * 连接状态描述: + * 场景2-1: + * Swiper1 -- controller1 -- null + * Swiper2 -- controller2 -- Indicator1 (此时indicator2的连接被顶掉了) + * 场景2-2: + * Swiper1 -- controller1 -- Indicator1 + * Swiper2 -- controller2 -- null + * * 操作步骤: * 1、打开demo页面。 * 2、点击场景2-1按钮。 * 3、点击showNext1,showPrevious1,showNext2,showPrevious2。 - * 2、点击场景2-2按钮。 + * 4、滑动Swiper,点击和长按拖动Indicator。 + * 5、点击场景2-2按钮,重复以上两步。 * * 场景2-1: * 1、Indicator1受controller2控制。 * 2、Indicator2不再受controller2控制。 + * 3、Swiper2不再受Indicator2控制,Swiper2变化时Indicator2无动画。 * * 场景2-2: * 1、Indicator1受controller1控制。 * 2、Indicator2不再受controller2控制。 + * 3、Swiper2不再受Indicator2控制,Swiper2变化时Indicator2无动画。 */ /** * 3-场景3: - * Swiper2不变,切换Swiper1。 + * Swiper2不变,切换Swiper1。变化后应只有Swiper1生效,两个分支场景下控制它的controller和Indicator都不同。 + * + * 连接状态描述: + * 场景3-1: + * null -- controller1 -- Indicator1 + * Swiper1 -- controller2 -- Indicator2 (此时Swiper2的连接被顶掉了) + * 场景3-2: + * Swiper1 -- controller1 -- Indicator1 + * null -- controller2 -- Indicator2 * * 操作步骤: * 1、打开demo页面。 * 2、点击场景3-1按钮。 * 3、点击showNext1,showPrevious1,showNext2,showPrevious2。 - * 2、点击场景3-2按钮。 + * 4、滑动Swiper,点击和长按拖动Indicator。 + * 5、点击场景3-2按钮,重复以上两步。 * * 场景3-1: - * 1、Swiper1受controller2控制,Swiper1和Indicator1解绑。 - * 2、Indicator2不再受controller2控制。 + * 1、Swiper1受controller2和Indicator2控制,Swiper1和Indicator1解绑。 + * 2、Swiper2不再受controller2和Indicator2控制。 * * 场景3-2: - * 1、Swiper1受controller1控制,Swiper1和Indicator1重新绑定。 - * 2、Swiper2和Indicator2解绑;Indicator2不再受controller2控制。 + * 1、Swiper1受controller1和Indicator1控制,Swiper1和Indicator1重新绑定。 + * 2、Swiper2和Indicator2解绑;Swiper2不再受controller2和Indicator2控制。 */ /** * 4-场景4: - * indicator不变,切换swiper1和swiper2。 + * Indicator不变,Swiper1和Swiper2绑定的controller互换。 + * + * 连接状态描述: + * Swiper2 -- controller1 -- Indicator1 + * Swiper1 -- controller2 -- Indicator2 * * 操作步骤: * 1、打开demo页面。 * 2、点击场景4按钮。 * 3、点击showNext1,showPrevious1,showNext2,showPrevious2。 + * 4、滑动Swiper,点击和长按拖动Indicator。 * * 预期结果: - * swiper1和indicator2绑定,受controller2控制。 - * swiper2和indicator1绑定,受controller1控制。 + * Swiper1和Indicator2绑定,受controller2控制。 + * Swiper2和Indicator1绑定,受controller1控制。 */ /** * 5-场景5: - * swiper不变,切换indicator1和indicator2。 + * Swiper不变,Indicator1和Indicator2绑定的controller互换。 * + * 连接状态描述: + * Swiper1 -- controller1 -- Indicator2 + * Swiper2 -- controller2 -- Indicator1 + * * 操作步骤: * 1、打开demo页面。 * 2、点击场景5按钮。 * 3、点击showNext1,showPrevious1,showNext2,showPrevious2。 + * 4、滑动Swiper,点击和长按拖动Indicator。 * - * 预期效果同场景4。 + * 预期结果: + * Swiper1和Indicator2绑定,受controller1控制。 + * Swiper2和Indicator1绑定,受controller2控制。 */ /** @@ -106,6 +173,14 @@ /** * 7-场景7: * "内置" 和 "绑定",进行切换 + * + * 点击场景7按钮,导航点样式会按照以下顺序依次变化: + * 1、使用内置导航点,与原先导航点脱离绑定 + * 2、与Indicator1绑定 + * 3、与Indicator2绑定 + * 4、使用内置导航点,与原先导航点脱离绑定 + * 5、无导航点 + * 6、内置导航点,且导航点为数字样式导航点 * * 操作步骤: * 1、打开demo页面。 diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/OnContentWillScrollListNest.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/OnContentWillScrollListNest.ets index 3531cc7e813762480d6db018fa6225797578d625..27aee69ca47b51ea77988c35cafcf518d3300487 100644 --- a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/OnContentWillScrollListNest.ets +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/OnContentWillScrollListNest.ets @@ -13,6 +13,76 @@ * limitations under the License. */ +/** + * 测试目的:验证Swiper组件的onContentWillScroll回调功能在嵌套滚动场景下的拦截机制 + * 建议测试前阅读代码了解各个场景具体操作和预期结果 + * + * 0-初始化页面 + * 1、打开demo页面,页面包含: + * - 上方:List容器中嵌套多个垂直Swiper组件 + * - 下方:实时显示区域和拦截条件控制按钮 + * 2、观察初始状态: + * - 所有Swiper默认显示页面1 + * - 拦截条件:currentIndex = 0, comingIndex = 0 + * - 实时显示:willScrollCurrentIndex = 0, comingIndex = 0, offset = 0 + * + * 说明: + * 1、每个Swiper包含5个页面('0', '1', '2', '3', '4'),垂直方向滚动 + * 2、嵌套滚动模式:SwiperNestedScrollMode.SELF_FIRST(Swiper优先处理滚动) + * 3、onContentWillScroll拦截逻辑:当 info.currentIndex == this.currentIndex && info.comingIndex == this.comingIndex + * 时返回false阻止滚动 + */ + +/** + * 1-场景1:基础拦截功能测试 + * 验证onContentWillScroll回调能够正确拦截特定页面切换 + * + * 操作步骤: + * 1、设置拦截条件:保持默认 currentIndex = 0, comingIndex = 0 + * 2、在任意Swiper中尝试从页面0滑动到页面0(无实际滑动) + * 3、在任意Swiper中从页面1滑动到页面0 + * 4、观察实时显示数据变化 + * + * 预期结果: + * 1、页面0到页面0的切换被拦截(实际无意义,但验证回调触发) + * 2、其他页面切换正常执行 + * 3、实时显示正确反映滑动过程中的参数变化 + */ + +/** + * 2-场景2:从页面1到页面2的拦截测试 + * 验证拦截正常页面切换的功能 + * + * 操作步骤: + * 1、重置拦截条件:currentIndex = 1, comingIndex = 2 + * 2、在Swiper中滑动到页面1 + * 3、从页面1向下滑动,尝试切换到页面2 + * 4、观察Swiper是否被阻止切换 + * 5、尝试从页面1向上滑动到页面0(应该正常) + * + * 预期结果: + * 1、页面1→2的切换被拦截,Swiper停留在页面1 + * 2、页面1→0的切换正常执行 + * 3、实时显示中可以看到willScrollComingIndex在滑动过程中变为2,但切换被阻止 + */ + +/** + * 3-场景3:从页面1到页面2的拦截测试 + * 验证拦截正常页面切换的功能 + * + * 操作步骤: + * 1、重置拦截条件:currentIndex = 2, comingIndex = 1 + * 2、在Swiper中滑动到页面2 + * 3、从页面1向下滑动,尝试切换到页面1 + * 4、观察Swiper是否被阻止切换 + * 5、尝试从页面1向上滑动到页面2(应该正常) + * + * 预期结果: + * 1、页面2→1的切换被拦截,Swiper停留在页面2 + * 2、页面1→2的切换正常执行 + * 3、实时显示中可以看到willScrollComingIndex在滑动过程中变为2,但切换被阻止 + */ + class ListNestSwiperMyDataSource implements IDataSource { private list: number[] = [] diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/OnContentWillScrollNestList.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/OnContentWillScrollNestList.ets index 14356ba6eb7140587d440db42c5a071e1e128749..409184296a2e30c26e6aaf7580c60d777f12cc46 100644 --- a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/OnContentWillScrollNestList.ets +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/OnContentWillScrollNestList.ets @@ -13,6 +13,78 @@ * limitations under the License. */ +/** + * 测试目的:验证Swiper嵌套List组件时的onContentWillScroll回调功能和滚动拦截机制 + * 建议测试前阅读代码了解各个场景具体操作和预期结果 + * + * 0-初始化页面 + * 1、打开demo页面,页面包含: + * - 上方:垂直Swiper组件,每页包含一个List容器 + * - 下方:实时显示区域和拦截条件控制按钮 + * 2、观察初始状态: + * - Swiper默认显示页面0 + * - 每个List页面包含14个ListItem(0-13) + * - 拦截条件:currentIndex = 0, comingIndex = 0 + * - 实时显示:willScrollCurrentIndex = 0, comingIndex = 0, offset = 0 + * + * 说明: + * 1、Swiper包含5个页面(通过LazyForEach动态生成),垂直方向滚动 + * 2、每个Swiper页面包含一个List组件,List中有14个ListItem + * 3、List嵌套滚动模式:NestedScrollMode.SELF_FIRST(List优先处理滚动) + * 4、onContentWillScroll拦截逻辑:当 info.currentIndex == this.currentIndex && info.comingIndex == this.comingIndex + * 时返回false阻止滚动 + */ + + /** + * 1-场景1:基础拦截功能测试 + * 验证onContentWillScroll回调能够正确拦截特定页面切换 + * + * 操作步骤: + * 1、设置拦截条件:保持默认 currentIndex = 0, comingIndex = 0 + * 2、在任意Swiper中尝试从页面0滑动到页面0(无实际滑动) + * 3、在任意Swiper中从页面1滑动到页面0 + * 4、观察实时显示数据变化 + * + * 预期结果: + * 1、页面0到页面0的切换被拦截(实际无意义,但验证回调触发) + * 2、其他页面切换正常执行 + * 3、实时显示正确反映滑动过程中的参数变化 + */ + +/** + * 2-场景2:从页面1到页面2的拦截测试 + * 验证拦截正常页面切换的功能 + * + * 操作步骤: + * 1、重置拦截条件:currentIndex = 1, comingIndex = 2 + * 2、在Swiper中滑动到页面1 + * 3、从页面1向下滑动,尝试切换到页面2 + * 4、观察Swiper是否被阻止切换 + * 5、尝试从页面1向上滑动到页面0(应该正常) + * + * 预期结果: + * 1、页面1→2的切换被拦截,Swiper停留在页面1 + * 2、页面1→0的切换正常执行 + * 3、实时显示中可以看到willScrollComingIndex在滑动过程中变为2,但切换被阻止 + */ + +/** + * 3-场景3:从页面1到页面2的拦截测试 + * 验证拦截正常页面切换的功能 + * + * 操作步骤: + * 1、重置拦截条件:currentIndex = 2, comingIndex = 1 + * 2、在Swiper中滑动到页面2 + * 3、从页面1向下滑动,尝试切换到页面1 + * 4、观察Swiper是否被阻止切换 + * 5、尝试从页面1向上滑动到页面2(应该正常) + * + * 预期结果: + * 1、页面2→1的切换被拦截,Swiper停留在页面2 + * 2、页面1→2的切换正常执行 + * 3、实时显示中可以看到willScrollComingIndex在滑动过程中变为2,但切换被阻止 + */ + class SwiperNestListMyDataSource implements IDataSource { private list: number[] = [] diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/OnContentWillScrollNormal.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/OnContentWillScrollNormal.ets index ed4f28000061b44aa2082f9bc8c37bb1d35494f0..deaec6042ecd6a93091559684e47375888e58db4 100644 --- a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/OnContentWillScrollNormal.ets +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/OnContentWillScrollNormal.ets @@ -13,6 +13,96 @@ * limitations under the License. */ +/** + * 测试目的:验证Swiper组件的onContentWillScroll回调功能在基础场景下的拦截机制和各种配置属性的影响 + * 建议测试前阅读代码了解各个场景具体操作和预期结果 + * + * 0-初始化页面 + * 1、打开demo页面,页面包含: + * - 上方:单个Swiper组件(粉色背景,带导航箭头) + * - 下方:丰富的控制面板,包含实时显示区域和各种配置选项 + * 2、观察初始状态: + * - Swiper默认显示页面0,包含5个页面('0', '1', '2', '3', '4') + * - 拦截条件:currentIndex = 0, comingIndex = 0 + * - 实时显示:willScrollCurrentIndex = 0, comingIndex = 0, offset = 0 + * - 配置:loop = true, displayCount = 1, width = 300, height = 30% + * + * 说明: + * 1、Swiper为水平方向滚动,支持循环、多页显示等多种模式 + * 2、onContentWillScroll拦截逻辑:当 info.currentIndex == this.currentIndex && info.comingIndex == this.comingIndex + * 时返回false阻止滚动 + * 3、页面提供了完整的Swiper配置控制,可以动态测试各种参数组合 + */ + +/** + * 1-场景1:基础拦截功能测试 + * 验证onContentWillScroll回调的基本拦截能力 + * + * 操作步骤: + * 1、保持默认拦截条件:currentIndex = 0, comingIndex = 0 + * 2、在Swiper中从页面0向右滑动到页面1(应该正常) + * 3、设置拦截条件:currentIndex = 0, comingIndex = 1 + * 4、再次从页面0向右滑动到页面1 + * 5、观察实时显示数据变化 + * + * 预期结果: + * 1、默认条件下(0→0)不会拦截实际的滑动操作 + * 2、设置0→1拦截后,该方向的切换被阻止 + * 3、其他方向的切换(如0→4循环)正常执行 + * 4、实时显示正确反映滑动过程中的参数变化 + */ + +/** + * 2-场景2:控制器操作拦截测试 + * 验证通过SwiperController调用时的拦截功能 + * + * 操作步骤: + * 1、设置拦截条件:currentIndex = 1, comingIndex = 2 + * 2、使用changeIndex按钮切换到页面1 + * 3、点击"showNext"按钮,尝试切换到页面2 + * 4、点击"showPrevious"按钮,尝试切换到页面0 + * 5、使用"changeIndex(2, true/false)"按钮直接切换到页面2 + * + * 预期结果: + * 1、showNext操作正常执行 + * 2、showPrevious操作正常执行 + * 3、changeIndex操作正常执行 + */ + +/** + * 3-场景3:循环模式拦截测试 + * 验证loop模式下的边界拦截功能 + * + * 操作步骤: + * 1、确保loop = true + * 2、设置拦截条件:currentIndex = 4, comingIndex = 0(拦截末页到首页的循环) + * 3、滑动到页面4 + * 4、向右滑动,尝试循环到页面0 + * 5、设置拦截条件:currentIndex = 0, comingIndex = 4(拦截首页到末页的循环) + * 6、在页面0向左滑动,尝试循环到页面4 + * + * 预期结果: + * 1、末页→首页的循环切换被拦截 + * 2、首页→末页的循环切换被拦截 + * 3、非循环方向的切换正常执行 + */ + +/** + * 4-场景4:多页显示模式拦截测试 + * 验证displayCount > 1时的拦截功能 + * + * 操作步骤: + * 1、点击"displayCount++"设置为2 + * 2、点击"change swipeByGroup"测试分组滑动 + * 3、设置拦截条件:currentIndex = 0, comingIndex = 2 + * 4、观察分组滑动和单页滑动的区别 + * + * 预期结果: + * 1、多页显示模式下拦截功能正常工作 + * 2、swipeByGroup模式影响切换行为但不影响拦截逻辑 + * 3、页面索引正确对应实际显示的页面 + */ + @Entry @Component struct OnContentWillScrollNormal { @@ -375,4 +465,4 @@ struct OnContentWillScrollComponent { .width(100) .height(200) } -} \ No newline at end of file +} diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/SwiperKeyEvent.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/SwiperKeyEvent.ets new file mode 100644 index 0000000000000000000000000000000000000000..b830459487a5f4c7f61b4deb802a71221ef1aee5 --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/SwiperKeyEvent.ets @@ -0,0 +1,389 @@ +/* + * 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. + */ + +/** + * 测试目的:验证Swiper组件在键盘操作中的走焦功能 + * 建议使用测试前阅读代码了解各个场景具体做了操作 + * + * 说明: + * 1、页面共10页,display count为4页,不使用组播。 + * 2、不设置prev/nextMargin。 + * 3、所有页面均可作为焦点。 + * + * 操作步骤: + * 0-初始化页面 + * 1、打开demo页面。 + * 2、点击场景1按钮。 + * 3、使用hdc模拟键盘输入。 + * uinput -K -d 2012 -u 2012 //up + * uinput -K -d 2013 -u 2013 //down + * uinput -K -d 2014 -u 2014 //left + * uinput -K -d 2015 -u 2015 //right + * uinput -K -d 2049 -u 2049 //tab + * 4、点击tab激活焦点,激活后使用right翻页至最后,再使用left翻页至第一页,观察焦点状态。 + * + * 预期结果: + * 翻页过程中焦点锁定符合逻辑,翻页动画正常。 + */ + +/** + * 2-场景2: + * 设置部分页面不可被选中,翻页过程中焦点应跳过不可被选中页面。 + * + * 说明: + * 2-1:index为1、3、4、6的页面不可被选中。 + * 2-2:仅有index为0页面可选中。 + * + * 操作步骤: + * 0-初始化页面 + * 1、打开demo页面。 + * 2、点击场景2-1按钮。 + * 3、使用hdc模拟键盘输入。 + * 4、点击tab激活焦点,激活后使用right翻页至最后,再使用left翻页至第一页,观察焦点状态。 + * 5、点击场景2-2按钮,重复上一步。 + * + * 预期结果: + * 2-1:翻页过程中焦点锁定符合逻辑,跳过不可被选中的页面,翻页动画正常。 + * 2-2:仅可翻页一次,翻页后会失焦。 + */ + +/** + * 3-场景3: + * 设置切换方式为组播,验证部分页面不可被选中情况下的走焦功能。 + * + * 说明: + * 3-1:使用组播,所有页面均可被选中。 + * 3-2:使用组播,index为1、3、4、6的页面不可被选中。 + * 3-3:使用组播,仅有index为0页面可选中。 + * + * 操作步骤: + * 0-初始化页面 + * 1、打开demo页面。 + * 2、点击场景3-1按钮。 + * 3、使用hdc模拟键盘输入。 + * 4、点击tab激活焦点,激活后使用right翻页至最后,再使用left翻页至第一页,观察焦点状态。 + * 5、点击场景3-2按钮,重复上一步。 + * 5、点击场景3-3按钮,重复上一步。 + * + * 预期结果: + * 3-1:翻页过程中焦点锁定符合逻辑,翻页动画正常。 + * 3-2:翻页过程中焦点锁定符合逻辑,跳过不可被选中的页面,翻页动画正常。 + * 3-3:仅可翻页一次,翻页后会失焦。 + */ + +/** + * 4-场景4: + * 设置prevMargin,验证走焦功能。 + * + * 说明: + * 4-1:设置prevMargin(50,false)。 + * 4-2:设置prevMargin(50,true)。 + * + * 操作步骤: + * 0-初始化页面 + * 1、打开demo页面。 + * 2、点击场景4-1按钮。 + * 3、使用hdc模拟键盘输入。 + * 4、点击tab激活焦点,激活后使用right翻页至最后,再使用left翻页至第一页,观察焦点状态。 + * 5、点击场景4-2按钮,重复上一步。 + * + * 预期结果: + * 4-1:翻页过程中焦点锁定符合逻辑,翻页动画正常。 + * 4-2:翻页过程中焦点锁定符合逻辑,翻页动画正常。 + */ + +/** + * 5-场景5: + * 设置nextMargin,验证走焦功能。 + * + * 说明: + * 5-1:设置nextMargin(50,false)。 + * 5-2:设置nextMargin(50,true)。 + * + * 操作步骤: + * 0-初始化页面 + * 1、打开demo页面。 + * 2、点击场景5-1按钮。 + * 3、使用hdc模拟键盘输入。 + * 4、点击tab激活焦点,激活后使用right翻页至最后,再使用left翻页至第一页,观察焦点状态。 + * 5、点击场景5-2按钮,重复上一步。 + * + * 预期结果: + * 5-1:翻页过程中焦点锁定符合逻辑,翻页动画正常。 + * 5-2:翻页过程中焦点锁定符合逻辑,翻页动画正常。 + */ +class MyDataSource implements IDataSource { + private list: number[] = []; + + + constructor(list: number[]) { + this.list = list; + } + + + totalCount(): number { + return this.list.length; + } + + + getData(index: number): number { + return this.list[index]; + } + + + registerDataChangeListener(listener: DataChangeListener): void { + } + + + unregisterDataChangeListener() { + } +} + +class MyDataSource2 implements IDataSource { + private list: boolean[] = []; + + + constructor(list: boolean[]) { + this.list = list; + } + + + totalCount(): number { + return this.list.length; + } + + + getData(index: number): boolean { + return this.list[index]; + } + + + registerDataChangeListener(listener: DataChangeListener): void { + } + + + unregisterDataChangeListener() { + } +} + +@Entry +@Component +struct Index { + UpdateFocus(): MyDataSource2 { + switch(this.focusFlag){ + case 0: + return this.focus1 + case 1: + return this.focus2 + case 2: + return this.focus3 + default: + return this.focus1 + } + } + private swiperController: SwiperController = new SwiperController(); + private data: MyDataSource = new MyDataSource([]); + private focus1: MyDataSource2 = new MyDataSource2([]); + private focus2: MyDataSource2 = new MyDataSource2([]); + private focus3: MyDataSource2 = new MyDataSource2([]); + @State focusFlag: number = 0 + @State previousMargin: number = 0 + @State previousIgnoreBlank: boolean = false + @State nextMargin: number = 0 + @State nextIgnoreBlank: boolean = false + @State displayCount: number = 4 + @State groupDisplay: boolean = false + @State loop: boolean = false + @State autoplay: boolean = false + + + aboutToAppear(): void { + let list1: number[] = []; + let list2: boolean[] = []; + let list3: boolean[] = []; + let list4: boolean[] = []; + for (let i = 0; i < 10; i++) { + list1.push(i); + list2.push(true) + if (i == 1 || i == 3 || i == 4 || i == 6) { + list3.push(false) + } else { + list3.push(true) + } + if (i > 0) { + list4.push(false) + } else { + list4.push(true) + } + } + this.data = new MyDataSource(list1); + this.focus1 = new MyDataSource2(list2) + this.focus2 = new MyDataSource2(list3) + this.focus3 = new MyDataSource2(list4) + } + + + build() { + Column() { + Swiper(this.swiperController) { + LazyForEach(this.data, (item: string,index:number) => { + Text(item.toString()) + .focusable(this.UpdateFocus().getData(index)) + .tabIndex(index) + .width('90%') + .height(500) + .backgroundColor(0xAFEEEE) + .textAlign(TextAlign.Center) + .fontSize(30) + }, (item: string) => item) + } + .loop(this.loop) + .autoPlay(this.autoplay) + .nextMargin(this.nextMargin,this.nextIgnoreBlank) + .prevMargin(this.previousMargin,this.previousIgnoreBlank) + .indicator(false) + .displayCount(this.displayCount,this.groupDisplay) + + Row({ space: 12 }) { + Button('场景1') + .onClick((event:ClickEvent) => { + this.focusFlag = 0; + this.previousMargin = 0; + this.previousIgnoreBlank = false; + this.nextMargin = 0; + this.nextIgnoreBlank = false; + this.displayCount = 4; + this.groupDisplay = false; + this.loop = false; + this.autoplay = false; + }) + Button('场景2-1') + .onClick((event:ClickEvent) => { + this.focusFlag = 1; + this.previousMargin = 0; + this.previousIgnoreBlank = false; + this.nextMargin = 0; + this.nextIgnoreBlank = false; + this.displayCount = 4; + this.groupDisplay = false; + this.loop = false; + this.autoplay = false; + }) + Button('场景2-2') + .onClick((event:ClickEvent) => { + this.focusFlag = 2; + this.previousMargin = 0; + this.previousIgnoreBlank = false; + this.nextMargin = 0; + this.nextIgnoreBlank = false; + this.displayCount = 4; + this.groupDisplay = false; + this.loop = false; + this.autoplay = false; + }) + }.margin(5) + Row({ space: 12 }) { + Button('场景3-1') + .onClick((event:ClickEvent) => { + this.focusFlag = 0; + this.previousMargin = 0; + this.previousIgnoreBlank = false; + this.nextMargin = 0; + this.nextIgnoreBlank = false; + this.displayCount = 4; + this.groupDisplay = true; + this.loop = false; + this.autoplay = false; + }) + Button('场景3-2') + .onClick((event:ClickEvent) => { + this.focusFlag = 1; + this.previousMargin = 0; + this.previousIgnoreBlank = false; + this.nextMargin = 0; + this.nextIgnoreBlank = false; + this.displayCount = 4; + this.groupDisplay = true; + this.loop = false; + this.autoplay = false; + }) + Button('场景3-3') + .onClick((event:ClickEvent) => { + this.focusFlag = 2; + this.previousMargin = 0; + this.previousIgnoreBlank = false; + this.nextMargin = 0; + this.nextIgnoreBlank = false; + this.displayCount = 4; + this.groupDisplay = true; + this.loop = false; + this.autoplay = false; + }) + }.margin(5) + Row({ space: 12 }) { + Button('场景4-1') + .onClick((event:ClickEvent) => { + this.focusFlag = 0; + this.previousMargin = 50; + this.previousIgnoreBlank = false; + this.nextMargin = 0; + this.nextIgnoreBlank = false; + this.displayCount = 4; + this.groupDisplay = false; + this.loop = false; + this.autoplay = false; + }) + Button('场景4-2') + .onClick((event:ClickEvent) => { + this.focusFlag = 0; + this.previousMargin = 50; + this.previousIgnoreBlank = true; + this.nextMargin = 0; + this.nextIgnoreBlank = false; + this.displayCount = 4; + this.groupDisplay = false; + this.loop = false; + this.autoplay = false; + }) + Button('场景5-1') + .onClick((event:ClickEvent) => { + this.focusFlag = 0; + this.previousMargin = 0; + this.previousIgnoreBlank = false; + this.nextMargin = 50; + this.nextIgnoreBlank = false; + this.displayCount = 4; + this.groupDisplay = false; + this.loop = false; + this.autoplay = false; + }) + Button('场景5-2') + .onClick((event:ClickEvent) => { + this.focusFlag = 0; + this.previousMargin = 0; + this.previousIgnoreBlank = false; + this.nextMargin = 50; + this.nextIgnoreBlank = true; + this.displayCount = 4; + this.groupDisplay = false; + this.loop = false; + this.autoplay = false; + }) + }.margin(5) + } + .height('100%') + .width('100%') + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/SwiperMainPage.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/SwiperMainPage.ets index dafe10d526c727eb279d916236ea3a71077346a1..4c948ff74b5c286c105718ec7bf743638e862bd2 100644 --- a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/SwiperMainPage.ets +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Swiper/SwiperMainPage.ets @@ -42,6 +42,7 @@ struct TabsMainPage { new TextList(8, 'SwiperNestSwiper', 'pages/Swiper/SwiperNestSwiper'), new TextList(9, 'SwiperNestList', 'pages/Swiper/SwiperNestList'), new TextList(10, 'ChangeSwiperHeightWithSwipe', 'pages/Swiper/SwiperHeightChangeDemo'), + new TextList(11, 'SwiperKeyEvent', 'pages/Swiper/SwiperKeyEvent'), ] @State fontSize: Resource | undefined = undefined build() { diff --git a/examples/ScrollableComponentTest/entry/src/main/resources/base/profile/main_pages.json b/examples/ScrollableComponentTest/entry/src/main/resources/base/profile/main_pages.json index d9264af11e957e0020a5c132f406535ec6173c24..f7f739bedd572b2e16d784b75a987c75128486ff 100644 --- a/examples/ScrollableComponentTest/entry/src/main/resources/base/profile/main_pages.json +++ b/examples/ScrollableComponentTest/entry/src/main/resources/base/profile/main_pages.json @@ -37,6 +37,7 @@ "pages/Swiper/SwiperNestSwiper", "pages/Swiper/SwiperNestList", "pages/Swiper/SwiperHeightChangeDemo", + "pages/Swiper/SwiperKeyEvent", "pages/List/ListMainPage", "pages/List/childrenMainSize/ListItemGroupScenario", "pages/List/RepeatList/RepeatList1",