From 6b5c45b676c130601af89d0cd3d7f5fcf93ec688 Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 15 Aug 2025 15:35:40 +0800 Subject: [PATCH 1/3] add uicompare cases1 Signed-off-by: jinzhao --- ...nentListAndGridListChainAnimation.test.ets | 113 ++++++++ ...onentListAndGridListChildMainSize.test.ets | 214 ++++++++++++++ ...omponentListAndGridListFadingEdge.test.ets | 108 +++++++ .../UIComponentListAndGridListMirror.test.ets | 197 +++++++++++++ ...onentListAndGridListChainAnimation0010.ets | 257 +++++++++++++++++ ...onentListAndGridListChainAnimation0020.ets | 272 ++++++++++++++++++ ...ComponentListAndGridListFadingEdge0130.ets | 257 +++++++++++++++++ ...ComponentListAndGridListFadingEdge0180.ets | 258 +++++++++++++++++ 8 files changed, 1676 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListChainAnimationTest/UIComponentListAndGridListChainAnimation.test.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListChildMainSizeTest/UIComponentListAndGridListChildMainSize.test.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListFadingEdgeTest/UIComponentListAndGridListFadingEdge.test.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListMirrorTest/UIComponentListAndGridListMirror.test.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChainAnimation/UIComponentListAndGridListChainAnimation0010.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChainAnimation/UIComponentListAndGridListChainAnimation0020.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListFadingEdge/UIComponentListAndGridListFadingEdge0130.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListFadingEdge/UIComponentListAndGridListFadingEdge0180.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListChainAnimationTest/UIComponentListAndGridListChainAnimation.test.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListChainAnimationTest/UIComponentListAndGridListChainAnimation.test.ets new file mode 100644 index 00000000..e750a55b --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListChainAnimationTest/UIComponentListAndGridListChainAnimation.test.ets @@ -0,0 +1,113 @@ +/** + * 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 UIComponentListAndGridListChainAnimation() { + describe('UIComponentListAndGridListChainAnimation', () => { + 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_CHAINANIMATION_0010 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHAINANIMATION_0010 + * @tc.desc List combines chainAnimation with scroll alignment effects + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHAINANIMATION_0010', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHAINANIMATION_0010'; + let pageName = "UIComponentListAndGridListChainAnimation0010"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListChainAnimation/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(2000, 3000); + await windowSnap.snapShot(TAG + '_01'); + await list.scrollToTop(2000); + await driver.waitForIdle(2000, 3000); + await windowSnap.snapShot(TAG + '_02'); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHAINANIMATION_0020 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHAINANIMATION_0020 + * @tc.desc List with chainAnimation underfilled screen checks isAtEnd after overscroll pull + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHAINANIMATION_0020', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHAINANIMATION_0020'; + let pageName = "UIComponentListAndGridListChainAnimation0020"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListChainAnimation/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(2000, 3000); + await button.click(); + 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/test/UIComponentListAndGridListChildMainSizeTest/UIComponentListAndGridListChildMainSize.test.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListChildMainSizeTest/UIComponentListAndGridListChildMainSize.test.ets new file mode 100644 index 00000000..89b555ce --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListChildMainSizeTest/UIComponentListAndGridListChildMainSize.test.ets @@ -0,0 +1,214 @@ +/** + * 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 UIComponentListAndGridListChildMainSize() { + describe('UIComponentListAndGridListChildMainSize', () => { + 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_CHILDMAINSIZE_0100 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0100 + * @tc.desc Set scrollToIndex smooth parameter to true + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0100', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0100'; + let pageName = "UIComponentListAndGridListChildMainSize0100"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListChildMainSize/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + 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_CHILDMAINSIZE_0130 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0130 + * @tc.desc ScrollTo animates to specified position + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0130', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0130'; + let pageName = "UIComponentListAndGridListChildMainSize0130"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListChildMainSize/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + 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_CHILDMAINSIZE_0170 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0170 + * @tc.desc Combine start number with optional childrenSize Array + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0170', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0170'; + let pageName = "UIComponentListAndGridListChildMainSize0170"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListChildMainSize/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 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_CHILDMAINSIZE_0180 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0180 + * @tc.desc Configure start number deleteCount and optional childrenSize Array together + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0180', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0180'; + let pageName = "UIComponentListAndGridListChildMainSize0180"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListChildMainSize/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 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_CHILDMAINSIZE_0200 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0200 + * @tc.desc Combine update and splice to modify items + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0200', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0200'; + let pageName = "UIComponentListAndGridListChildMainSize0200"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListChildMainSize/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + 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_CHILDMAINSIZE_0220 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0220 + * @tc.desc Batch update item heights intermittently using splice + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0220', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0220'; + let pageName = "UIComponentListAndGridListChildMainSize0220"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListChildMainSize/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_01'); + await list.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_02'); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0470 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0470 + * @tc.desc Set scrollToItemInGroup smooth parameter to true + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0470', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_CHILDMAINSIZE_0470'; + let pageName = "UIComponentListAndGridListChildMainSize0470"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListChildMainSize/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + await driver.waitForIdle(2000, 2000); + await button.click(); + await driver.waitForIdle(2000, 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/test/UIComponentListAndGridListFadingEdgeTest/UIComponentListAndGridListFadingEdge.test.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListFadingEdgeTest/UIComponentListAndGridListFadingEdge.test.ets new file mode 100644 index 00000000..c4aa93ee --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListFadingEdgeTest/UIComponentListAndGridListFadingEdge.test.ets @@ -0,0 +1,108 @@ +/** + * 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 UIComponentListAndGridListFadingEdge() { + describe('UIComponentListAndGridListFadingEdge', () => { + 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_FADINGEDGE_0130 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_FADINGEDGE_0130 + * @tc.desc Observe edge bounce animation in List fadingEdge + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_FADINGEDGE_0130', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_FADINGEDGE_0130'; + let pageName = "UIComponentListAndGridListFadingEdge0130"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListFadingEdge/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(3000, 4000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_FADINGEDGE_0180 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_FADINGEDGE_0180 + * @tc.desc Combine List fadingEdge with chain animation effects + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_FADINGEDGE_0180', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_FADINGEDGE_0180'; + let pageName = "UIComponentListAndGridListFadingEdge0180"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListFadingEdge/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await list.scrollToBottom(2000); + await driver.waitForIdle(3000, 4000); + 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/test/UIComponentListAndGridListMirrorTest/UIComponentListAndGridListMirror.test.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListMirrorTest/UIComponentListAndGridListMirror.test.ets new file mode 100644 index 00000000..0f9685fd --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListMirrorTest/UIComponentListAndGridListMirror.test.ets @@ -0,0 +1,197 @@ +/** + * 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'; +import { i18n } from '@kit.LocalizationKit'; + + +let TAG = 'RunTimeTest'; + +function sleep(ms: number) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +export default function UIComponentListAndGridListMirror() { + describe('UIComponentListAndGridListMirror', () => { + 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_MIRROR_0020 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0020 + * @tc.desc List#lang#lang1 + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0020', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0020'; + let pageName = "UIComponentListAndGridListMirror0020"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMirror/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + await driver.waitForIdle(1000, 2000); + try { + i18n.System.setSystemLanguage('ar'); + } catch(error) { + let err: BusinessError = error as BusinessError; + Logger.error(`[${TAG}] call System.setSystemLanguage failed, error code: ${err.code}, message: ${err.message}.`); + } + await driver.waitForIdle(3000, 4000); + await windowSnap.snapShot(); + try { + i18n.System.setSystemLanguage('zh'); + } catch(error) { + let err: BusinessError = error as BusinessError; + Logger.error(`[${TAG}] call System.setSystemLanguage failed, error code: ${err.code}, message: ${err.message}.`); + } + await Utils.sleep(2000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0040 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0040 + * @tc.desc List#lang#lang5 + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0040', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0040'; + let pageName = "UIComponentListAndGridListMirror0040"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMirror/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + await driver.waitForIdle(1000, 2000); + try { + i18n.System.setSystemLanguage('ar'); + } catch(error) { + let err: BusinessError = error as BusinessError; + Logger.error(`[${TAG}] call System.setSystemLanguage failed, error code: ${err.code}, message: ${err.message}.`); + } + await driver.waitForIdle(3000, 4000); + await windowSnap.snapShot(); + try { + i18n.System.setSystemLanguage('zh'); + } catch(error) { + let err: BusinessError = error as BusinessError; + Logger.error(`[${TAG}] call System.setSystemLanguage failed, error code: ${err.code}, message: ${err.message}.`); + } + await Utils.sleep(2000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0050 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0050 + * @tc.desc List#lang#lang2 + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0050', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0050'; + let pageName = "UIComponentListAndGridListMirror0050"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMirror/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + await driver.waitForIdle(1000, 2000); + try { + i18n.System.setSystemLanguage('ar'); + } catch(error) { + let err: BusinessError = error as BusinessError; + Logger.error(`[${TAG}] call System.setSystemLanguage failed, error code: ${err.code}, message: ${err.message}.`); + } + await driver.waitForIdle(3000, 4000); + await windowSnap.snapShot(); + try { + i18n.System.setSystemLanguage('zh'); + } catch(error) { + let err: BusinessError = error as BusinessError; + Logger.error(`[${TAG}] call System.setSystemLanguage failed, error code: ${err.code}, message: ${err.message}.`); + } + await Utils.sleep(2000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0650 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0650 + * @tc.desc List#lang#lang7 + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0650', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MIRROR_0650'; + let pageName = "UIComponentListAndGridListMirror0650"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMirror/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + try { + i18n.System.setSystemLanguage('ar'); + } catch(error) { + let err: BusinessError = error as BusinessError; + Logger.error(`[${TAG}] call System.setSystemLanguage failed, error code: ${err.code}, message: ${err.message}.`); + } + await driver.waitForIdle(3000, 4000); + await windowSnap.snapShot(); + try { + i18n.System.setSystemLanguage('zh'); + } catch(error) { + let err: BusinessError = error as BusinessError; + Logger.error(`[${TAG}] call System.setSystemLanguage failed, error code: ${err.code}, message: ${err.message}.`); + } + await Utils.sleep(2000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + }) +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChainAnimation/UIComponentListAndGridListChainAnimation0010.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChainAnimation/UIComponentListAndGridListChainAnimation0010.ets new file mode 100644 index 00000000..adf64b80 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChainAnimation/UIComponentListAndGridListChainAnimation0010.ets @@ -0,0 +1,257 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListChainAnimation0010 { + @State name: string = 'UIComponentListAndGridListChainAnimation0010'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(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 < 60; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(40) + .height(80) + }, (item: number) => item.toString()) + } + .chainAnimation(true) + .scrollSnapAlign(ScrollSnapAlign.START) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.None) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 40, + maxLength: 80 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChainAnimation/UIComponentListAndGridListChainAnimation0020.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChainAnimation/UIComponentListAndGridListChainAnimation0020.ets new file mode 100644 index 00000000..ddea1ada --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChainAnimation/UIComponentListAndGridListChainAnimation0020.ets @@ -0,0 +1,272 @@ +/* + * 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 UIComponentListAndGridListChainAnimation0020 { + @State name: string = 'UIComponentListAndGridListChainAnimation0020'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + @State isAtEndValue: string = 'isAtEnd: unchecked'; + 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 < 15; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Text(this.isAtEndValue) + .fontSize(20) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Normal) + .textAlign(TextAlign.Center) + .width('90%') + .height(40) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('get isAtEnd') + .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.isAtEndValue = `isAtEnd: ${this.listScroller.isAtEnd()}`; + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(40) + .height(80) + }, (item: number) => item.toString()) + } + .chainAnimation(true) + .scrollSnapAlign(ScrollSnapAlign.START) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.None) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 40, + maxLength: 80 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListFadingEdge/UIComponentListAndGridListFadingEdge0130.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListFadingEdge/UIComponentListAndGridListFadingEdge0130.ets new file mode 100644 index 00000000..e933f1fa --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListFadingEdge/UIComponentListAndGridListFadingEdge0130.ets @@ -0,0 +1,257 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { LengthMetrics } from '@kit.ArkUI'; + +@Entry +@Component +struct UIComponentListAndGridListFadingEdge0130 { + @State name: string = 'UIComponentListAndGridListFadingEdge0130'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 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(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(100) + .height(150) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .fadingEdge(true, {fadingEdgeLength:LengthMetrics.vp(80)}) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListFadingEdge/UIComponentListAndGridListFadingEdge0180.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListFadingEdge/UIComponentListAndGridListFadingEdge0180.ets new file mode 100644 index 00000000..020001fd --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListFadingEdge/UIComponentListAndGridListFadingEdge0180.ets @@ -0,0 +1,258 @@ +/* + * 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 { LengthMetrics } from '@kit.ArkUI'; + +@Entry +@Component +struct UIComponentListAndGridListFadingEdge0180 { + @State name: string = 'UIComponentListAndGridListFadingEdge0180'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 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(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(100) + .height(150) + }, (item: number) => item.toString()) + } + .chainAnimation(true) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .fadingEdge(true, {fadingEdgeLength:LengthMetrics.vp(80)}) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} -- Gitee From 1e3695befb9711c5767aeb54682b8d7e665ef3c7 Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 15 Aug 2025 15:36:00 +0800 Subject: [PATCH 2/3] add uicompare cases2 Signed-off-by: jinzhao --- ...ponentListAndGridListChildMainSize0100.ets | 252 ++++++++++ ...ponentListAndGridListChildMainSize0130.ets | 257 ++++++++++ ...ponentListAndGridListChildMainSize0170.ets | 256 ++++++++++ ...ponentListAndGridListChildMainSize0180.ets | 255 ++++++++++ ...ponentListAndGridListChildMainSize0200.ets | 256 ++++++++++ ...ponentListAndGridListChildMainSize0220.ets | 257 ++++++++++ ...ponentListAndGridListChildMainSize0470.ets | 455 ++++++++++++++++++ 7 files changed, 1988 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0100.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0130.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0170.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0180.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0200.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0220.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0470.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0100.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0100.ets new file mode 100644 index 00000000..614e28fe --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0100.ets @@ -0,0 +1,252 @@ +/* + * 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 UIComponentListAndGridListChildMainSize0100 { + @State name: string = 'UIComponentListAndGridListChildMainSize0100'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('scrollToIndex') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollToIndex(15, true); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(100) + .height(150) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0130.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0130.ets new file mode 100644 index 00000000..bc9b13fc --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0130.ets @@ -0,0 +1,257 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListChildMainSize0130 { + @State name: string = 'UIComponentListAndGridListChildMainSize0130'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('scrollTo') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollTo({ + xOffset: 0, + yOffset: 150 * 2 + 50, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(100) + .height(150) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0170.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0170.ets new file mode 100644 index 00000000..2d6e2b42 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0170.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListChildMainSize0170 { + @State name: string = 'UIComponentListAndGridListChildMainSize0170'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + @State listChildrenSize: ChildrenMainSize = new ChildrenMainSize(100); + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(this.listChildrenSize.childDefaultSize) + .height(this.listChildrenSize.childDefaultSize) + .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); + } + this.listChildrenSize.splice(1, 0, [50]); + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('scrollToIndex') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollToIndex(15, true); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.listChildrenSize.childDefaultSize) + .height(this.listChildrenSize.childDefaultSize) + }, (item: number) => item.toString()) + } + .childrenMainSize(this.listChildrenSize) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0180.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0180.ets new file mode 100644 index 00000000..1e7207b4 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0180.ets @@ -0,0 +1,255 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListChildMainSize0180 { + @State name: string = 'UIComponentListAndGridListChildMainSize0180'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + @State listChildrenSize: ChildrenMainSize = new ChildrenMainSize(100); + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(this.listChildrenSize.childDefaultSize) + .height(this.listChildrenSize.childDefaultSize) + .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); + } + this.listChildrenSize.splice(1, 0, [100]); + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('scrollToIndex') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollToIndex(15, true); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.listChildrenSize.childDefaultSize) + .height(this.listChildrenSize.childDefaultSize) + }, (item: number) => item.toString()) + } + .childrenMainSize(this.listChildrenSize) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0200.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0200.ets new file mode 100644 index 00000000..b09afb3f --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0200.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListChildMainSize0200 { + @State name: string = 'UIComponentListAndGridListChildMainSize0200'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + @State listChildrenSize: ChildrenMainSize = new ChildrenMainSize(100); + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(this.listChildrenSize.childDefaultSize) + .height(this.listChildrenSize.childDefaultSize) + .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); + } + // this.listChildrenSize.splice(2, 5, [50]); + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('upgrade item') + .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.listChildrenSize.splice(2, 5, [50]); + this.listChildrenSize.update(1, 150); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.listChildrenSize.childDefaultSize) + .height(this.listChildrenSize.childDefaultSize) + }, (item: number) => item.toString()) + } + .childrenMainSize(this.listChildrenSize) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0220.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0220.ets new file mode 100644 index 00000000..1a06c59c --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0220.ets @@ -0,0 +1,257 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListChildMainSize0220 { + @State name: string = 'UIComponentListAndGridListChildMainSize0220'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @State listDirection: Axis = Axis.Vertical; + @State listChildrenSize: ChildrenMainSize = new ChildrenMainSize(50); + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(this.listChildrenSize.childDefaultSize) + .height(this.listChildrenSize.childDefaultSize) + .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); + } + this.listChildrenSize.splice(1, 40, [50]); + this.listChildrenSize.splice(6, 40, [100]); + this.listChildrenSize.splice(20, 40, [150]); + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('scrollToIndex') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollToIndex(15, true); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.listChildrenSize.childDefaultSize) + .height(this.listChildrenSize.childDefaultSize) + }, (item: number) => item.toString()) + } + .childrenMainSize(this.listChildrenSize) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width('90%') + .height(300) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0470.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0470.ets new file mode 100644 index 00000000..58eafb6e --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListChildMainSize/UIComponentListAndGridListChildMainSize0470.ets @@ -0,0 +1,455 @@ +/* + * 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 UIComponentListAndGridListChildMainSize0470 { + @State name: string = 'UIComponentListAndGridListChildMainSize0470'; + @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 itemAspectRatio: number = 2; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State listAspectRatio: number = 2; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + 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('scrollToItemInGroup') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollToItemInGroup(2, 2); + }) + + List({ + initialIndex: 0, + space: 10, + 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) + ListItem() { + Text('group1-item3') + .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) + ListItem() { + Text('group2-item3') + .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) + ListItem() { + Text('group3-item3') + .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) + ListItem() { + Text('group4-item3') + .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 + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} -- Gitee From 2e1490e377d1397870afe137e44be0b8c37124cb Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 15 Aug 2025 15:36:15 +0800 Subject: [PATCH 3/3] add uicompare cases3 Signed-off-by: jinzhao --- .../UIComponentListAndGridListMirror0020.ets | 399 +++++++++++++++++ .../UIComponentListAndGridListMirror0040.ets | 407 ++++++++++++++++++ .../UIComponentListAndGridListMirror0050.ets | 267 ++++++++++++ .../UIComponentListAndGridListMirror0650.ets | 259 +++++++++++ 4 files changed, 1332 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0020.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0040.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0050.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0650.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0020.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0020.ets new file mode 100644 index 00000000..efa5e702 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0020.ets @@ -0,0 +1,399 @@ +/* + * 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 UIComponentListAndGridListMirror0020 { + @State name: string = 'UIComponentListAndGridListMirror0020'; + @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 itemAspectRatio: number = 2; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State listAspectRatio: number = 2; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + 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 + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0040.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0040.ets new file mode 100644 index 00000000..6492d652 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0040.ets @@ -0,0 +1,407 @@ +/* + * 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 UIComponentListAndGridListMirror0040 { + @State name: string = 'UIComponentListAndGridListMirror0040'; + @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 itemAspectRatio: number = 2; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State listAspectRatio: number = 2; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + Scroll() { + List({ + initialIndex: 0, + space: 10, + 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 + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + } + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(400) + .margin(10) + + 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/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0050.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0050.ets new file mode 100644 index 00000000..0b97e68e --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0050.ets @@ -0,0 +1,267 @@ +/* + * 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 UIComponentListAndGridListMirror0050 { + @State name: string = 'UIComponentListAndGridListMirror0050'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @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; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + }) { + ListItem() { + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + } + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0650.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0650.ets new file mode 100644 index 00000000..9709a354 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMirror/UIComponentListAndGridListMirror0650.ets @@ -0,0 +1,259 @@ +/* + * 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 UIComponentListAndGridListMirror0650 { + @State name: string = 'UIComponentListAndGridListMirror0650'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State gutterValue: Dimension = 10; + @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; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(100) + .height(150) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 30; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(100) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('末尾增加元素') + .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.push(this.numbers.length); + this.message += `\n List add item: ${this.numbers[this.numbers.length - 1].toString()}`; + }) + + 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 + '_02_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + this.gutterValue + ) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} -- Gitee