From 945dc958122d1034887550350403f0837fdff7be Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 15 Aug 2025 15:39:24 +0800 Subject: [PATCH 1/3] add uicompare cases1 Signed-off-by: jinzhao --- ...ComponentListAndGridListInterface.test.ets | 911 ++++++++++++++++++ ...IComponentListAndGridListInterface0010.ets | 255 +++++ ...IComponentListAndGridListInterface0050.ets | 291 ++++++ ...IComponentListAndGridListInterface0160.ets | 256 +++++ ...IComponentListAndGridListInterface0180.ets | 257 +++++ 5 files changed, 1970 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListInterfaceTest/UIComponentListAndGridListInterface.test.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0010.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0050.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0160.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0180.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListInterfaceTest/UIComponentListAndGridListInterface.test.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListInterfaceTest/UIComponentListAndGridListInterface.test.ets new file mode 100644 index 00000000..7dfbd9c4 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListInterfaceTest/UIComponentListAndGridListInterface.test.ets @@ -0,0 +1,911 @@ +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect, Level } from '@ohos/hypium'; +import { BusinessError, commonEventManager } from '@kit.BasicServicesKit'; +import { Driver, ON ,Component, UiWindow } from '@kit.TestKit'; +import { screen, uiAppearance } from '@kit.ArkUI'; +import Settings from '../model/Settings'; +import windowSnap from '../model/snapShot'; +import Logger from '../model/Logger'; +import Utils from '../model/Utils'; + + +let TAG = 'RunTimeTest'; + +function sleep(ms: number) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +export default function UIComponentListAndGridListInterface() { + describe('UIComponentListAndGridListInterface', () => { + beforeAll(() => { + + }) + beforeEach(() => { + + }) + + afterEach(async (done: Function) => { + if (Settings.windowClass == undefined) { + return + } + Settings.windowClass.destroyWindow((err) => { + if (err.code) { + Logger.error(`[${TAG}_afterEach]`, `Failed to destroy the window. Cause : ${JSON.stringify(err)}`); + return; + } + Logger.info(`[${TAG}_afterEach]`, `Succeeded in destroy the window.`); + }) + await Utils.sleep(1000); + done(); + }) + + afterAll(() => { + + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0010 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0010 + * @tc.desc Check scrollBar default values under API10 + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0010', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0010'; + let pageName = "UIComponentListAndGridListInterface0010"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await list.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_01'); + await Utils.sleep(3000); + await windowSnap.snapShot(TAG + '_02'); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0050 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0050 + * @tc.desc Support both sticky header and footer in ListItemGroup + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0050', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0050'; + let pageName = "UIComponentListAndGridListInterface0050"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_01'); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_02'); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0160 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0160 + * @tc.desc Disable List gesture scroll test finger/mouse wheel sliding + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0160', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0160'; + let pageName = "UIComponentListAndGridListInterface0160"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.swipe(center.x, center.y, center.x, bounds.top - 100, 1000); + await driver.waitForIdle(3000, 4000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0180 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0180 + * @tc.desc Disable List mouse box selection + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0180', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0180'; + let pageName = "UIComponentListAndGridListInterface0180"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let item0: Component = await driver.waitForComponent(ON.id(pageName + '_02_0'), 1000); + let item2: Component = await driver.waitForComponent(ON.id(pageName + '_02_2'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + let item0Bounds = await item0.getBounds(); + let item2Bounds = await item2.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: item0Bounds.right, y: item0Bounds.bottom}, {x: item2Bounds.right, y: item2Bounds.top}, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0210 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0210 + * @tc.desc Set List space parameter to -10 + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0210', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0210'; + let pageName = "UIComponentListAndGridListInterface0210"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0220 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0220 + * @tc.desc Set List space parameter to 10fp + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0220', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0220'; + let pageName = "UIComponentListAndGridListInterface0220"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0240 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0240 + * @tc.desc Set List space parameter to 10px + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0240', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0240'; + let pageName = "UIComponentListAndGridListInterface0240"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0260 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0260 + * @tc.desc Trigger onScrollIndex during edge spring effects when scrolling beyond List boundaries and releasing + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0260', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0260'; + let pageName = "UIComponentListAndGridListInterface0260"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let scroll: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(3000, 4000); + await scroll.scrollToBottom(10000); + await driver.waitForIdle(3000, 4000); + await windowSnap.snapShot(TAG + '_01'); + await driver.swipe(center.x, center.y, center.x, bounds.top - 100, 1000); + await driver.waitForIdle(3000, 4000); + await scroll.scrollToBottom(10000); + await driver.waitForIdle(3000, 4000); + await windowSnap.snapShot(TAG + '_02'); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0600 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0600 + * @tc.desc Set scroll effects for non-scrollable List + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0600', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0600'; + let pageName = "UIComponentListAndGridListInterface0600"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0740 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0740 + * @tc.desc Test single ListItem without card style configuration + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0740', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0740'; + let pageName = "UIComponentListAndGridListInterface0740"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0750 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0750 + * @tc.desc Test single ListItem in non-selectable state + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0750', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0750'; + let pageName = "UIComponentListAndGridListInterface0750"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let item2: Component = await driver.waitForComponent(ON.id(pageName + '_02_2'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + let item2Bounds = await item2.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: item2Bounds.left - 50, y: item2Bounds.top - 10}, {x: item2Bounds.right + 50, y: item2Bounds.bottom + 50}, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0800 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0800 + * @tc.desc Test single ListItem with style set to NONE + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0800', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0800'; + let pageName = "UIComponentListAndGridListInterface0800"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0810 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0810 + * @tc.desc Verify default style value for single ListItem + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0810', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0810'; + let pageName = "UIComponentListAndGridListInterface0810"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0820 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0820 + * @tc.desc Disable chain animation for single-column ListItems without spacing + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0820', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0820'; + let pageName = "UIComponentListAndGridListInterface0820"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0830 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0830 + * @tc.desc Enable chain animation for single-column ListItems without spacing + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0830', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0830'; + let pageName = "UIComponentListAndGridListInterface0830"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0840 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0840 + * @tc.desc Disable chain animation for spaced single-column ListItems + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0840', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0840'; + let pageName = "UIComponentListAndGridListInterface0840"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0850 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0850 + * @tc.desc Enable chain animation for spaced single-column ListItems + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0850', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0850'; + let pageName = "UIComponentListAndGridListInterface0850"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0860 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0860 + * @tc.desc Enable chain animation with spring effect for single-column component scrolling + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0860', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0860'; + let pageName = "UIComponentListAndGridListInterface0860"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0870 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0870 + * @tc.desc Enable chain animation with fade effect for single-column component scrolling + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0870', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0870'; + let pageName = "UIComponentListAndGridListInterface0870"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0880 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0880 + * @tc.desc Enable chain animation with no scroll effect for single-column components + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0880', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0880'; + let pageName = "UIComponentListAndGridListInterface0880"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0890 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0890 + * @tc.desc Set listDirection property in card mode + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0890', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0890'; + let pageName = "UIComponentListAndGridListInterface0890"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0910 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0910 + * @tc.desc Test multiple ListItems with default card style + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0910', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0910'; + let pageName = "UIComponentListAndGridListInterface0910"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0940 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0940 + * @tc.desc Enable chain animation in multi-column layout + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0940', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0940'; + let pageName = "UIComponentListAndGridListInterface0940"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0950 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0950 + * @tc.desc Enable chain animation with fade effect for multi-column component scrolling + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0950', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0950'; + let pageName = "UIComponentListAndGridListInterface0950"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0960 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0960 + * @tc.desc Enable chain animation with no scroll effect for multi-column components + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0960', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_0960'; + let pageName = "UIComponentListAndGridListInterface0960"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1000 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1000 + * @tc.desc Repeatedly configure EdgeEffect property + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1000', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1000'; + let pageName = "UIComponentListAndGridListInterface1000"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1030 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1030 + * @tc.desc Set divider width to abc between child components + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1030', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1030'; + let pageName = "UIComponentListAndGridListInterface1030"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1070 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1070 + * @tc.desc Set divider width to string format 10px between child components + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1070', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1070'; + let pageName = "UIComponentListAndGridListInterface1070"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1180 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1180 + * @tc.desc Enable chain animation in landscape orientation + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1180', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1180'; + let pageName = "UIComponentListAndGridListInterface1180"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + await driver.waitForIdle(1000, 2000); + let screenClass: screen.Screen | null = null; + screen.getAllScreens(async (err: BusinessError, data: Array) => { + const errCode: number = err.code; + if (errCode) { + Logger.error(`[${TAG}]: Failed to get all screens. Code:${err.code},message is ${err.message}`); + return; + } + Logger.info(`[${TAG}]: Succeeded in getting all screens. Data:` + JSON.stringify(data)); + screenClass = data[0]; + screenClass.setOrientation(screen.Orientation.HORIZONTAL, (err: BusinessError) => { + const errCode: number = err.code; + if (errCode) { + Logger.error(`[${TAG}]: Failed to set the vertical orientation. Code:${err.code},message is ${err.message}`); + return; + } + Logger.info(`[${TAG}]: Succeeded in setting the vertical orientation.`); + }); + await driver.waitForIdle(1000, 2000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + screenClass.setOrientation(screen.Orientation.VERTICAL, (err: BusinessError) => { + const errCode: number = err.code; + if (errCode) { + Logger.error(`[${TAG}]: Failed to set the vertical orientation. Code:${err.code},message is ${err.message}`); + return; + } + Logger.info(`[${TAG}]: Succeeded in setting the vertical orientation.`); + }); + }); + await Utils.sleep(10000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1260 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1260 + * @tc.desc Enable chain animation in portrait orientation + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1260', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1260'; + let pageName = "UIComponentListAndGridListInterface1260"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1470 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1470 + * @tc.desc Disable component scroll effects + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1470', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1470'; + let pageName = "UIComponentListAndGridListInterface1470"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1490 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1490 + * @tc.desc Implement chain animation via mouse drag component + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1490', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1490'; + let pageName = "UIComponentListAndGridListInterface1490"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: bounds.right - 8, y: bounds.top + 20}, {x: bounds.right - 8, y: bounds.bottom - 10}, 2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1520 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1520 + * @tc.desc Test bounce effect for underfilled List child components + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1520', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_INTERFACE_1520'; + let pageName = "UIComponentListAndGridListInterface1520"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListInterface/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_01'); + await list.scrollToTop(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_02'); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + }) +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0010.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0010.ets new file mode 100644 index 00000000..767b93f7 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0010.ets @@ -0,0 +1,255 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0010 { + @State name: string = 'UIComponentListAndGridListInterface0010'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(100) + .height(150) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0050.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0050.ets new file mode 100644 index 00000000..7f4f72e7 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0050.ets @@ -0,0 +1,291 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +interface TimeTable { + title: string; + projects: string[]; +} + +@Entry +@Component +struct UIComponentListAndGridListInterface0050 { + @State name: string = 'UIComponentListAndGridListInterface0050'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + private timeTable: TimeTable[] = [ + { + title: '星期一', + projects: ['语文', '数学', '英语'] + }, + { + title: '星期二', + projects: ['物理', '化学', '生物'] + }, + { + title: '星期三', + projects: ['历史', '地理', '政治'] + }, + { + title: '星期四', + projects: ['美术', '音乐', '体育'] + } + ]; + + @Builder + itemHead(text: string) { + Text(text) + .fontSize(20) + .backgroundColor(0xAABBCC) + .width('100%') + .padding(10) + } + + @Builder + itemFoot(num: number) { + Text('共' + num + '节课') + .fontSize(16) + .backgroundColor(0xAABBCC) + .width('100%') + .padding(5) + } + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.timeTable, (item: TimeTable) => { + ListItemGroup({ header: this.itemHead(item.title), footer: this.itemFoot(item.projects.length) }) { + ForEach(item.projects, (project: string) => { + ListItem() { + Text(project) + .width('100%') + .height(100) + .fontSize(20) + .textAlign(TextAlign.Center) + .backgroundColor(0xFFFFFF) + } + }, (item: string) => item) + } + .divider({ strokeWidth: 1, color: Color.Blue }) + }) + } + .sticky(StickyStyle.Header | StickyStyle.Footer) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0160.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0160.ets new file mode 100644 index 00000000..abfc20c6 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0160.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0160 { + @State name: string = 'UIComponentListAndGridListInterface0160'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(100) + .height(150) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(false) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0180.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0180.ets new file mode 100644 index 00000000..7ed9c7fd --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0180.ets @@ -0,0 +1,257 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0180 { + @State name: string = 'UIComponentListAndGridListInterface0180'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_' + item.toString()) + .width(100) + .height(150) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + -- Gitee From 32a3cb253d388647a5a98f9cce26f5f6e376c376 Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 15 Aug 2025 15:39:40 +0800 Subject: [PATCH 2/3] add uicompare cases2 Signed-off-by: jinzhao --- ...IComponentListAndGridListInterface0210.ets | 256 ++++++++++++ ...IComponentListAndGridListInterface0220.ets | 256 ++++++++++++ ...IComponentListAndGridListInterface0240.ets | 256 ++++++++++++ ...IComponentListAndGridListInterface0260.ets | 256 ++++++++++++ ...IComponentListAndGridListInterface0600.ets | 256 ++++++++++++ ...IComponentListAndGridListInterface0740.ets | 332 ++++++++++++++++ ...IComponentListAndGridListInterface0750.ets | 364 ++++++++++++++++++ 7 files changed, 1976 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0210.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0220.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0240.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0260.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0600.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0740.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0750.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0210.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0210.ets new file mode 100644 index 00000000..d6415a43 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0210.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0210 { + @State name: string = 'UIComponentListAndGridListInterface0210'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: -10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(100) + .height(150) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0220.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0220.ets new file mode 100644 index 00000000..00700017 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0220.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0220 { + @State name: string = 'UIComponentListAndGridListInterface0220'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: '10fp', + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(100) + .height(150) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0240.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0240.ets new file mode 100644 index 00000000..5b0840d8 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0240.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0240 { + @State name: string = 'UIComponentListAndGridListInterface0240'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: '10px', + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(100) + .height(150) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0260.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0260.ets new file mode 100644 index 00000000..4d0e9752 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0260.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0260 { + @State name: string = 'UIComponentListAndGridListInterface0260'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 15; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(100) + .height(150) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0600.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0600.ets new file mode 100644 index 00000000..94d2cd48 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0600.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0600 { + @State name: string = 'UIComponentListAndGridListInterface0600'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(100) + .height(150) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(false) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0740.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0740.ets new file mode 100644 index 00000000..cee6ffc4 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0740.ets @@ -0,0 +1,332 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0740 { + @State name: string = 'UIComponentListAndGridListInterface0740'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State itemAspectRatio: number = 2; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State listAspectRatio: number = 2; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State itemStyle: ListItemStyle = ListItemStyle.NONE; + @State groupStyle: ListItemGroupStyle = ListItemGroupStyle.NONE; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItem({ + style: this.itemStyle + }) { + Text('ListItem1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_1') + + ListItem({ + style: this.itemStyle + }) { + Text('ListItem2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_2') + + ListItemGroup({ + style: this.groupStyle + }) { + ListItem({ + style: this.itemStyle + }) { + Text('listItemGroup-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_3_1') + + ListItem({ + style: this.itemStyle + }) { + Text('listItemGroup-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_3_2') + } + .id(this.name + '_02_3') + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0750.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0750.ets new file mode 100644 index 00000000..7333252b --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0750.ets @@ -0,0 +1,364 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0750 { + @State name: string = 'UIComponentListAndGridListInterface0750'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State itemAspectRatio: number = 2; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State listAspectRatio: number = 2; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State itemStyle: ListItemStyle = ListItemStyle.CARD; + @State groupStyle: ListItemGroupStyle = ListItemGroupStyle.CARD; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItem({ + style: this.itemStyle + }) { + Text('ListItem1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_1') + .selectable(false) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n ListItem1 selected'; + } else { + this.message += '\n ListItem1 unselected'; + } + }) + + ListItem({ + style: this.itemStyle + }) { + Text('ListItem2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_2') + .selectable(false) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n ListItem2 selected'; + } else { + this.message += '\n ListItem2 unselected'; + } + }) + + ListItemGroup({ + style: this.groupStyle + }) { + ListItem({ + style: this.itemStyle + }) { + Text('listItemGroup-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_3_1') + .selectable(false) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n listItemGroup-item1 selected'; + } else { + this.message += '\n listItemGroup-item1 unselected'; + } + }) + + ListItem({ + style: this.itemStyle + }) { + Text('listItemGroup-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_3_2') + .selectable(false) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n listItemGroup-item2 selected'; + } else { + this.message += '\n listItemGroup-item2 unselected'; + } + }) + } + .id(this.name + '_02_3') + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(true) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + -- Gitee From f930d602236fe05c5cd33cc1ec898d6b5c1a163f Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 15 Aug 2025 15:39:55 +0800 Subject: [PATCH 3/3] add uicompare cases3 Signed-off-by: jinzhao --- ...IComponentListAndGridListInterface0800.ets | 332 ++++++++++++++++++ ...IComponentListAndGridListInterface0810.ets | 324 +++++++++++++++++ ...IComponentListAndGridListInterface0820.ets | 255 ++++++++++++++ ...IComponentListAndGridListInterface0830.ets | 256 ++++++++++++++ ...IComponentListAndGridListInterface0840.ets | 256 ++++++++++++++ 5 files changed, 1423 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0800.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0810.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0820.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0830.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0840.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0800.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0800.ets new file mode 100644 index 00000000..9b73c383 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0800.ets @@ -0,0 +1,332 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0800 { + @State name: string = 'UIComponentListAndGridListInterface0800'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State itemAspectRatio: number = 2; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State listAspectRatio: number = 2; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State itemStyle: ListItemStyle = ListItemStyle.NONE; + @State groupStyle: ListItemGroupStyle = ListItemGroupStyle.CARD; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItem({ + style: this.itemStyle + }) { + Text('ListItem1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_1') + + ListItem({ + style: this.itemStyle + }) { + Text('ListItem2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_2') + + ListItemGroup({ + style: this.groupStyle + }) { + ListItem({ + style: this.itemStyle + }) { + Text('listItemGroup-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_3_1') + + ListItem({ + style: this.itemStyle + }) { + Text('listItemGroup-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_3_2') + } + .id(this.name + '_02_3') + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0810.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0810.ets new file mode 100644 index 00000000..8f688e7c --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0810.ets @@ -0,0 +1,324 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0810 { + @State name: string = 'UIComponentListAndGridListInterface0810'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State itemAspectRatio: number = 2; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State listAspectRatio: number = 2; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State itemStyle: ListItemStyle = ListItemStyle.NONE; + @State groupStyle: ListItemGroupStyle = ListItemGroupStyle.CARD; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItem() { + Text('ListItem1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_1') + + ListItem() { + Text('ListItem2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_2') + + ListItemGroup({ + style: this.groupStyle + }) { + ListItem() { + Text('listItemGroup-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_3_1') + + ListItem() { + Text('listItemGroup-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_3_2') + } + .id(this.name + '_02_3') + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0820.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0820.ets new file mode 100644 index 00000000..454a06f6 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0820.ets @@ -0,0 +1,255 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0820 { + @State name: string = 'UIComponentListAndGridListInterface0820'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 0; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = false; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0830.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0830.ets new file mode 100644 index 00000000..7232fe25 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0830.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0830 { + @State name: string = 'UIComponentListAndGridListInterface0830'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 0; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0840.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0840.ets new file mode 100644 index 00000000..70be6aec --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0840.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development 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. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0840 { + @State name: string = 'UIComponentListAndGridListInterface0840'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = false; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + -- Gitee