diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListLeftSeipeDeleteChainTest/UIComponentListAndGridListLeftSeipeDeleteChain.test.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListLeftSeipeDeleteChainTest/UIComponentListAndGridListLeftSeipeDeleteChain.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..c5616cb3f3220d7410c65eca3afb2461c821163d --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListLeftSeipeDeleteChainTest/UIComponentListAndGridListLeftSeipeDeleteChain.test.ets @@ -0,0 +1,868 @@ +/** + * 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 { 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 UIComponentListAndGridListLeftSeipeDeleteChain() { + describe('UIComponentListAndGridListLeftSeipeDeleteChain', () => { + 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_LEFTSEIPEDELETE_CHAIN_0010 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0010 + * @tc.desc Test ListItem deletion/addition with forEach/lazyForEach loading + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0010', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0010'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0010"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list1: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + let list2: Component = await driver.waitForComponent(ON.id(pageName + '_04'), 1000); + await driver.waitForIdle(1000, 2000); + await button1.click(); + await driver.waitForIdle(1000, 2000); + await button1.click(); + await driver.waitForIdle(1000, 2000); + await button2.click(); + await driver.waitForIdle(1000, 2000); + await list1.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await list2.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_LEFTSEIPEDELETE_CHAIN_0040 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0040 + * @tc.desc Chain animation disabled in multi-column List layout + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0040', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0040'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0040"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0050 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0050 + * @tc.desc Chain animation active in horizontal List layout + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0050', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0050'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0050"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: 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 driver.swipe(center.x, center.y, bounds.left, center.y, 7000); + 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_LEFTSEIPEDELETE_CHAIN_0060 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0060 + * @tc.desc Trigger chain animation in ListGroup within List component + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0060', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0060'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0060"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0070 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0070 + * @tc.desc Check if List divider impacts chain animation activation + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0070', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0070'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0070"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0080 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0080 + * @tc.desc Set List lanes to 0/negative values defaulting to 1 triggering chain animation + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0080', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0080'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0080"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_01'); + await button1.click(); + await driver.waitForIdle(1000, 2000); + await list.scrollToTop(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_LEFTSEIPEDELETE_CHAIN_0090 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0090 + * @tc.desc Set chainAnimationOptions conductivity to -0.5 defaulting in List spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0090', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0090'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0090"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0100 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0100 + * @tc.desc Set chainAnimationOptions conductivity to 0.5 defaulting in List spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0100', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0100'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0100"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0110 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0110 + * @tc.desc Set chainAnimationOptions conductivity to 0 disabling spring effect in List chain animation + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0110', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0110'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0110"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + let item16: Component = await driver.waitForComponent(ON.id(pageName + '_03_16'), 1000); + let item18: Component = await driver.waitForComponent(ON.id(pageName + '_03_18'), 1000); + let item16Center = await item16.getBoundsCenter(); + let item18Center = await item18.getBoundsCenter(); + await driver.drag(item16Center.x, item16Center.y, item18Center.x, item18Center.y, 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_LEFTSEIPEDELETE_CHAIN_0120 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0120 + * @tc.desc Normal component dragging with chainAnimationOptions conductivity 0 in List spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0120', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0120'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0120"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + let item16: Component = await driver.waitForComponent(ON.id(pageName + '_03_16'), 1000); + let item18: Component = await driver.waitForComponent(ON.id(pageName + '_03_18'), 1000); + let item16Center = await item16.getBoundsCenter(); + let item18Center = await item18.getBoundsCenter(); + await driver.drag(item16Center.x, item16Center.y, item18Center.x, item18Center.y, 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_LEFTSEIPEDELETE_CHAIN_0130 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0130 + * @tc.desc Overscroll dragging with chainAnimationOptions conductivity 0 in List spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0130', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0130'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0130"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + let item16: Component = await driver.waitForComponent(ON.id(pageName + '_03_16'), 1000); + let item18: Component = await driver.waitForComponent(ON.id(pageName + '_03_18'), 1000); + let item16Center = await item16.getBoundsCenter(); + let item18Center = await item18.getBoundsCenter(); + await driver.drag(item16Center.x, item16Center.y, bounds.left, bounds.bottom + 100, 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_LEFTSEIPEDELETE_CHAIN_0140 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0140 + * @tc.desc Set chainAnimationOptions conductivity to 1.5 defaulting in List spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0140', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0140'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0140"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0180 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0180 + * @tc.desc Set chainAnimationOptions intensity to -0.5 in List spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0180', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0180'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0180"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0190 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0190 + * @tc.desc Set chainAnimationOptions intensity to 0.5 in List spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0190', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0190'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0190"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0200 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0200 + * @tc.desc Set chainAnimationOptions intensity to 0 in List spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0200', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0200'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0200"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0210 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0210 + * @tc.desc Set chainAnimationOptions intensity to 1 in List spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0210', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0210'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0210"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0230 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0230 + * @tc.desc Set negative max value in chainAnimationOptions for List spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0230', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0230'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0230"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0240 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0240 + * @tc.desc Set negative min/max value in chainAnimationOptions for List spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0240', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0240'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0240"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0250 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0250 + * @tc.desc Configure chainAnimationOptions with min ListItem space in spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0250', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0250'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0250"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0260 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0260 + * @tc.desc Configure chainAnimationOptions with min { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0260'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0260"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0270 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0270 + * @tc.desc Configure chainAnimationOptions with min ListItem space in spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0270', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0270'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0270"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0280 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0280 + * @tc.desc Configure chainAnimationOptions with min >= max in spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0280', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0280'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0280"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0290 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0290 + * @tc.desc Repeatedly set chainAnimationOptions properties to verify List spring chain effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0290', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0290'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0290"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0300 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0300 + * @tc.desc Verify optional parameters leaving conductivity unset in List chainAnimationOptions spring effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0300', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0300'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0300"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0310 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0310 + * @tc.desc Verify optional parameters leaving edgeEffect unset in List chainAnimationOptions spring effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0310', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0310'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0310"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0320 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0320 + * @tc.desc Verify optional parameters leaving intensity unset in List chainAnimationOptions spring effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0320', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0320'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0320"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0360 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0360 + * @tc.desc Disable chain animation by setting chainAnimation false with AnimationOptions in List spring effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0360', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0360'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0360"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0370 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0370 + * @tc.desc Enable chain animation with spacing between ListItems in List spring effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0370', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0370'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0370"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0380 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0380 + * @tc.desc Enable chain animation without spacing between ListItems in List spring effect + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0380', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0380'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0380"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0390 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0390 + * @tc.desc Repeatedly set properties in List spring chain animation + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0390', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0390'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0390"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + 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_LEFTSEIPEDELETE_CHAIN_0400 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0400 + * @tc.desc Trigger List chain animation via finger touch + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0400', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0400'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0400"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: 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 driver.swipe(center.x, center.y, bounds.left, center.y, 7000); + 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_LEFTSEIPEDELETE_CHAIN_0410 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0410 + * @tc.desc Activate List chain animation through mouse click + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0410', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_LEFTSEIPEDELETE_CHAIN_0410'; + let pageName = "UIComponentListAndGridListLeftSeipeDeleteChain0410"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let list: 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 driver.mouseDrag({x: bounds.left + 50, y: bounds.bottom - 8}, {x: bounds.right - 10, y: bounds.bottom - 8}, 5000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + }) +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0010.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0010.ets new file mode 100644 index 0000000000000000000000000000000000000000..b600bb0b224df9184adc95bc6968a0b667e75037 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0010.ets @@ -0,0 +1,526 @@ +/* + * 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. + */ +class BasicDataSource implements IDataSource { + private listeners: DataChangeListener[] = []; + private originDataArray: string[] = []; + + public totalCount(): number { + return this.originDataArray.length; + } + + public getData(index: number): string { + return this.originDataArray[index]; + } + + // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听 + registerDataChangeListener(listener: DataChangeListener): void { + if (this.listeners.indexOf(listener) < 0) { + console.info('add listener'); + this.listeners.push(listener); + } + } + + // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听 + unregisterDataChangeListener(listener: DataChangeListener): void { + const pos = this.listeners.indexOf(listener); + if (pos >= 0) { + console.info('remove listener'); + this.listeners.splice(pos, 1); + } + } + + // 通知LazyForEach组件需要重载所有子组件 + notifyDataReload(): void { + this.listeners.forEach(listener => { + listener.onDataReloaded(); + }); + } + + // 通知LazyForEach组件需要在index对应索引处添加子组件 + notifyDataAdd(index: number): void { + this.listeners.forEach(listener => { + listener.onDataAdd(index); + // 写法2：listener.onDatasetChange([{type: DataOperationType.ADD, index: index}]); + }); + } + + // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件 + notifyDataChange(index: number): void { + this.listeners.forEach(listener => { + listener.onDataChange(index); + // 写法2：listener.onDatasetChange([{type: DataOperationType.CHANGE, index: index}]); + }); + } + + // 通知LazyForEach组件需要在index对应索引处删除该子组件 + notifyDataDelete(index: number): void { + this.listeners.forEach(listener => { + listener.onDataDelete(index); + // 写法2：listener.onDatasetChange([{type: DataOperationType.DELETE, index: index}]); + }); + } + + // 通知LazyForEach组件将from索引和to索引处的子组件进行交换 + notifyDataMove(from: number, to: number): void { + this.listeners.forEach(listener => { + listener.onDataMove(from, to); + // 写法2：listener.onDatasetChange( + // [{type: DataOperationType.EXCHANGE, index: {start: from, end: to}}]); + }); + } + + notifyDatasetChange(operations: DataOperation[]): void { + this.listeners.forEach(listener => { + listener.onDatasetChange(operations); + }); + } +} + + +class MyDataSource extends BasicDataSource { + private dataArray: string[] = []; + + public totalCount(): number { + return this.dataArray.length; + } + + public getData(index: number): string { + return this.dataArray[index]; + } + + public pushData(data: string): void { + this.dataArray.push(data); + this.notifyDataAdd(this.dataArray.length - 1); + } + + public deleteData(index: number): void { + this.dataArray.splice(index, 1); + this.notifyDataDelete(index); + } +} + + +@Entry +@Component +struct UIComponentListAndGridListLeftSeipeDeleteChain0010 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0010'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 150; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0.5; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + listScroller: ListScroller = new ListScroller(); + private data: MyDataSource = new MyDataSource(); + + @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); + this.data.pushData(`Hello ${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('删除末尾元素') + .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.numbers.pop(); + this.data.deleteData(this.data.totalCount() - 1); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + this.data.pushData(`Hello ${this.data.totalCount()}`); + }) + + Row() { + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("ForEach-List onItemMove"); + this.message += `\n ForEach-List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("ForEach-List onItemDragStart"); + this.message += `\n ForEach-List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("ForEach-List onItemDragEnter"); + this.message += `\n ForEach-List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("ForEach-List onItemDragLeave"); + this.message += `\n ForEach-List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("ForEach-List onItemDragMove"); + this.message += `\n ForEach-List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("ForEach-List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n ForEach-List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("ForEach-List onScrollVisibleContentChange"); + this.message += `\n ForEach-List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("ForEach-List onScrollFrameBegin"); + this.message += `\n ForEach-List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("ForEach-List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n ForEach-List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("ForEach-List onWillScroll"); + this.message += `\n ForEach-List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("ForEach-List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n ForEach-List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("ForEach-List onScrollFrameBegin"); + this.message += `\n ForEach-List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("ForEach-List onScrollStart"); + this.message += `\n ForEach-List onScrollStart`; + }) + .onScrollStop(() => { + console.info("ForEach-List onScrollStop"); + this.message += `\n ForEach-List onScrollStop`; + }) + .onReachStart(() => { + console.info("ForEach-List onReachStart"); + this.message += `\n ForEach-List onReachStart`; + }) + .onReachEnd(() => { + console.info("ForEach-List onReachEnd"); + this.message += `\n ForEach-List onReachEnd`; + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + LazyForEach(this.data, (item: string) => { + ListItem() { + Text(item) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_04_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: string) => item) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_04') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("LazyForEach-List onItemMove"); + this.message += `\n LazyForEach-List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("LazyForEach-List onItemDragStart"); + this.message += `\n LazyForEach-List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("LazyForEach-List onItemDragEnter"); + this.message += `\n LazyForEach-List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("LazyForEach-List onItemDragLeave"); + this.message += `\n LazyForEach-List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("LazyForEach-List onItemDragMove"); + this.message += `\n LazyForEach-List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("LazyForEach-List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n LazyForEach-List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("LazyForEach-List onScrollVisibleContentChange"); + this.message += `\n LazyForEach-List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("LazyForEach-List onScrollFrameBegin"); + this.message += `\n LazyForEach-List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("LazyForEach-List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n LazyForEach-List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("LazyForEach-List onWillScroll"); + this.message += `\n LazyForEach-List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("LazyForEach-List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n LazyForEach-List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("LazyForEach-List onScrollFrameBegin"); + this.message += `\n LazyForEach-List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("LazyForEach-List onScrollStart"); + this.message += `\n LazyForEach-List onScrollStart`; + }) + .onScrollStop(() => { + console.info("LazyForEach-List onScrollStop"); + this.message += `\n LazyForEach-List onScrollStop`; + }) + .onReachStart(() => { + console.info("LazyForEach-List onReachStart"); + this.message += `\n LazyForEach-List onReachStart`; + }) + .onReachEnd(() => { + console.info("LazyForEach-List onReachEnd"); + this.message += `\n LazyForEach-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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0040.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0040.ets new file mode 100644 index 0000000000000000000000000000000000000000..86ed68725916227aeeb744281199c0f3f8032dc5 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0040.ets @@ -0,0 +1,298 @@ +/* + * 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 UIComponentListAndGridListLeftSeipeDeleteChain0040 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0040'; + @State message: string = this.name + ' message:'; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0.5; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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 < 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(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + 10 + ) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0050.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0050.ets new file mode 100644 index 0000000000000000000000000000000000000000..5a5354b81570a2568e07ef81aea24c6c77f147f8 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0050.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. + */ + +@Entry +@Component +struct UIComponentListAndGridListLeftSeipeDeleteChain0050 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0050'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Horizontal; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0.5; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0060.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0060.ets new file mode 100644 index 0000000000000000000000000000000000000000..543a381ca61f0d685ac11743d3c20e8869761f10 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0060.ets @@ -0,0 +1,435 @@ +/* + * 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 UIComponentListAndGridListLeftSeipeDeleteChain0060 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0060'; + @State message: string = this.name + ' message:'; + @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 listAspectRatio: number = 2; + @State itemAspectRatio: number = 2; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = false; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0.5; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ListItemGroup() { + ListItem() { + Text('group1-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) + ListItem() { + Text('group1-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) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group2-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) + ListItem() { + Text('group2-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) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group3-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) + ListItem() { + Text('group3-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) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group4-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) + ListItem() { + Text('group4-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) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0070.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0070.ets new file mode 100644 index 0000000000000000000000000000000000000000..33735ad9280da458bfaea0e44117416d2807aeb5 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0070.ets @@ -0,0 +1,435 @@ +/* + * 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 UIComponentListAndGridListLeftSeipeDeleteChain0070 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0070'; + @State message: string = this.name + ' message:'; + @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 listAspectRatio: number = 2; + @State itemAspectRatio: number = 2; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0.5; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ListItemGroup() { + ListItem() { + Text('group1-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) + ListItem() { + Text('group1-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) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group2-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) + ListItem() { + Text('group2-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) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group3-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) + ListItem() { + Text('group3-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) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group4-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) + ListItem() { + Text('group4-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) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0080.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0080.ets new file mode 100644 index 0000000000000000000000000000000000000000..1cb9071bf0a1ec0512f0a27d75c38cb0947c353c --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0080.ets @@ -0,0 +1,300 @@ +/* + * 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 UIComponentListAndGridListLeftSeipeDeleteChain0080 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0080'; + @State message: string = this.name + ' message:'; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0.5; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + @State lanesValue: number = 0; + @State switched: 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('switch lanesValue. current value: ' + this.lanesValue.toString()) + .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(() => { + if (this.switched) { + this.lanesValue = 0; + this.switched = false; + } else { + this.lanesValue = -10; + this.switched = true; + } + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .lanes(this.lanesValue) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0090.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0090.ets new file mode 100644 index 0000000000000000000000000000000000000000..c9f50846f2c0ecef6827b4dd56c906b36314de51 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0090.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. + */ + +@Entry +@Component +struct UIComponentListAndGridListLeftSeipeDeleteChain0090 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0090'; + @State message: string = this.name + ' message:'; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = -0.5; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0100.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0100.ets new file mode 100644 index 0000000000000000000000000000000000000000..0786a745d9e5f0b1ca2131213460062d4bda0c52 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0100.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. + */ + +@Entry +@Component +struct UIComponentListAndGridListLeftSeipeDeleteChain0100 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0100'; + @State message: string = this.name + ' message:'; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0.5; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0110.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0110.ets new file mode 100644 index 0000000000000000000000000000000000000000..10666d904a942a4a29213627681812f2365a6d10 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0110.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. + */ + +@Entry +@Component +struct UIComponentListAndGridListLeftSeipeDeleteChain0110 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0110'; + @State message: string = this.name + ' message:'; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 1; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0120.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0120.ets new file mode 100644 index 0000000000000000000000000000000000000000..b477511410629c5271a1e84b925f6bdbf9827344 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0120.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. + */ + +@Entry +@Component +struct UIComponentListAndGridListLeftSeipeDeleteChain0120 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0120'; + @State message: string = this.name + ' message:'; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0130.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0130.ets new file mode 100644 index 0000000000000000000000000000000000000000..520ea5e81a226f2a3452ac2d4ae3bd68daabd242 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0130.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. + */ + +@Entry +@Component +struct UIComponentListAndGridListLeftSeipeDeleteChain0130 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0130'; + @State message: string = this.name + ' message:'; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0140.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0140.ets new file mode 100644 index 0000000000000000000000000000000000000000..82e2d11b1b911458c858b4a276615dcf69074b27 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0140.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. + */ + +@Entry +@Component +struct UIComponentListAndGridListLeftSeipeDeleteChain0140 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0140'; + @State message: string = this.name + ' message:'; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 1.5; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0180.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0180.ets new file mode 100644 index 0000000000000000000000000000000000000000..734678cf4c961809d7eb2984ae1f68aee05d125b --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0180.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. + */ + +@Entry +@Component +struct UIComponentListAndGridListLeftSeipeDeleteChain0180 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0180'; + @State message: string = this.name + ' message:'; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0.5; + @State intensityValue: number = -0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0190.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0190.ets new file mode 100644 index 0000000000000000000000000000000000000000..81c3eaec46662c37973627247c0874590d4ae0b3 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0190.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. + */ + +@Entry +@Component +struct UIComponentListAndGridListLeftSeipeDeleteChain0190 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0190'; + @State message: string = this.name + ' message:'; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0.5; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0200.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0200.ets new file mode 100644 index 0000000000000000000000000000000000000000..6776d5c07e4853ef2b4c65153754a8349175df75 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0200.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. + */ + +@Entry +@Component +struct UIComponentListAndGridListLeftSeipeDeleteChain0200 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0200'; + @State message: string = this.name + ' message:'; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0.5; + @State intensityValue: number = 0; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0210.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0210.ets new file mode 100644 index 0000000000000000000000000000000000000000..6e866f4a89504c6f3f95686c4a96e9b05adce3d7 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListLeftSeipeDeleteChain/UIComponentListAndGridListLeftSeipeDeleteChain0210.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. + */ + +@Entry +@Component +struct UIComponentListAndGridListLeftSeipeDeleteChain0210 { + @State name: string = 'UIComponentListAndGridListLeftSeipeDeleteChain0210'; + @State message: string = this.name + ' message:'; + @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 = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0.5; + @State intensityValue: number = 1; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + 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('删除末尾元素') + .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.numbers.pop(); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .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.numbers.push(this.numbers.length); + }) + + 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 + }) + } + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .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) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .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%') + + } + +} +