From fefc64659f5a22a31a2870d19df3e1e339323f27 Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 1 Aug 2025 14:37:02 +0800 Subject: [PATCH 1/3] add uicompare cases1 Signed-off-by: jinzhao --- ...omponentListAndGridGridFadingEdge.test.ets | 369 ++++++++++++++++++ ...ComponentListAndGridGridFadingEdge0030.ets | 210 ++++++++++ ...ComponentListAndGridGridFadingEdge0040.ets | 210 ++++++++++ ...ComponentListAndGridGridFadingEdge0060.ets | 210 ++++++++++ ...ComponentListAndGridGridFadingEdge0070.ets | 210 ++++++++++ ...ComponentListAndGridGridFadingEdge0080.ets | 210 ++++++++++ ...ComponentListAndGridGridFadingEdge0090.ets | 217 ++++++++++ ...ComponentListAndGridGridFadingEdge0100.ets | 210 ++++++++++ 8 files changed, 1846 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridGridFadingEdgeTest/UIComponentListAndGridGridFadingEdge.test.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0030.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0040.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0060.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0070.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0080.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0090.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0100.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridGridFadingEdgeTest/UIComponentListAndGridGridFadingEdge.test.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridGridFadingEdgeTest/UIComponentListAndGridGridFadingEdge.test.ets new file mode 100644 index 00000000..3b28abe2 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridGridFadingEdgeTest/UIComponentListAndGridGridFadingEdge.test.ets @@ -0,0 +1,369 @@ +/** + * 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 UIComponentListAndGridGridFadingEdge() { + describe('UIComponentListAndGridGridFadingEdge', () => { + 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_GRID_FADINGEDGE_0030 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0030 + * @tc.desc Test Grid component with fadingEdge set to undefined + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0030', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0030'; + let pageName = "UIComponentListAndGridGridFadingEdge0030"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + 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_GRID_FADINGEDGE_0040 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0040 + * @tc.desc Test Grid component with fadingEdge set to null + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0040', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0040'; + let pageName = "UIComponentListAndGridGridFadingEdge0040"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + 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_GRID_FADINGEDGE_0060 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0060 + * @tc.desc Set Grid fadingEdge distance to 0vp + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0060', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0060'; + let pageName = "UIComponentListAndGridGridFadingEdge0060"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + 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_GRID_FADINGEDGE_0070 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0070 + * @tc.desc Set Grid fadingEdge distance to -1 + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0070', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0070'; + let pageName = "UIComponentListAndGridGridFadingEdge0070"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + 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_GRID_FADINGEDGE_0080 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0080 + * @tc.desc Set Grid fadingEdge distance exceeding component height + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0080', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0080'; + let pageName = "UIComponentListAndGridGridFadingEdge0080"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + 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_GRID_FADINGEDGE_0090 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0090 + * @tc.desc Dynamically adjust Grid fadingEdge distance + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0090', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0090'; + let pageName = "UIComponentListAndGridGridFadingEdge0090"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + 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 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_GRID_FADINGEDGE_0100 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0100 + * @tc.desc Test edge effects combined with fading effects + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0100', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0100'; + let pageName = "UIComponentListAndGridGridFadingEdge0100"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + await grid.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0110 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0110 + * @tc.desc Dynamically change Grid column count + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0110', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0110'; + let pageName = "UIComponentListAndGridGridFadingEdge0110"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + 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 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_GRID_FADINGEDGE_0120 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0120 + * @tc.desc Test fading effects during dynamic Grid item count changes + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0120', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0120'; + let pageName = "UIComponentListAndGridGridFadingEdge0120"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await button.click(); + await driver.waitForIdle(1000, 2000); + await grid.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0130 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0130 + * @tc.desc Test fading effects in Grid mirroring mode + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0130', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0130'; + let pageName = "UIComponentListAndGridGridFadingEdge0130"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + 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_GRID_FADINGEDGE_0150 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0150 + * @tc.desc Test fading effects in height-unset Grid + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0150', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0150'; + let pageName = "UIComponentListAndGridGridFadingEdge0150"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + 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_GRID_FADINGEDGE_0160 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0160 + * @tc.desc Test fading effects during dynamic Grid padding changes + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0160', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0160'; + let pageName = "UIComponentListAndGridGridFadingEdge0160"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + 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 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_GRID_FADINGEDGE_0170 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0170 + * @tc.desc Test fading effects during dynamic Grid margin changes + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0170', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0170'; + let pageName = "UIComponentListAndGridGridFadingEdge0170"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + 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 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_GRID_FADINGEDGE_0180 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0180 + * @tc.desc Test fading effects with underfilled Grid edge spring behavior + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0180', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_GRID_FADINGEDGE_0180'; + let pageName = "UIComponentListAndGridGridFadingEdge0180"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridGridFadingEdge/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + let center = await grid.getBoundsCenter(); + let bounds = await grid.getBounds(); + await driver.swipe(center.x, center.y, center.x, bounds.top - 100, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + }) +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0030.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0030.ets new file mode 100644 index 00000000..783e33f0 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0030.ets @@ -0,0 +1,210 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0030 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0030'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = undefined; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(0)}; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 30; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.scroller.scrollPage({ + next: true, + animation: true + }); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .fadingEdge(this.fadingEdgeEnabled) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0040.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0040.ets new file mode 100644 index 00000000..20091153 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0040.ets @@ -0,0 +1,210 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0040 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0040'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = null; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(0)}; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 30; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.scroller.scrollPage({ + next: true, + animation: true + }); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .fadingEdge(this.fadingEdgeEnabled) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0060.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0060.ets new file mode 100644 index 00000000..83fd3fdc --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0060.ets @@ -0,0 +1,210 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0060 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0060'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = true; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(0)}; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 30; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.scroller.scrollPage({ + next: true, + animation: true + }); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .fadingEdge(this.fadingEdgeEnabled, this.fadingEdgeOptions) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0070.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0070.ets new file mode 100644 index 00000000..33d8c1c6 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0070.ets @@ -0,0 +1,210 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0070 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0070'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = true; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(-1)}; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 30; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.scroller.scrollPage({ + next: true, + animation: true + }); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .fadingEdge(this.fadingEdgeEnabled, this.fadingEdgeOptions) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0080.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0080.ets new file mode 100644 index 00000000..02ecf741 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0080.ets @@ -0,0 +1,210 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0080 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0080'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = true; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(500)}; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 30; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.scroller.scrollPage({ + next: true, + animation: true + }); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .fadingEdge(this.fadingEdgeEnabled, this.fadingEdgeOptions) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0090.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0090.ets new file mode 100644 index 00000000..b1a54b5a --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0090.ets @@ -0,0 +1,217 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0090 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0090'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = true; + @State fadingEdgeLength: LengthMetrics = new LengthMetrics(30); + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: this.fadingEdgeLength}; + switched: boolean = false; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 30; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('switch fading edge length') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + if (this.switched) { + this.fadingEdgeLength = new LengthMetrics(30); + this.fadingEdgeOptions = {fadingEdgeLength: this.fadingEdgeLength}; + this.switched = false; + } else { + this.fadingEdgeLength = new LengthMetrics(80); + this.fadingEdgeOptions = {fadingEdgeLength: this.fadingEdgeLength}; + this.switched = true; + } + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .fadingEdge(this.fadingEdgeEnabled, this.fadingEdgeOptions) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0100.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0100.ets new file mode 100644 index 00000000..eccb3680 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0100.ets @@ -0,0 +1,210 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0100 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0100'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = true; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(0)}; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 30; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.scroller.scrollPage({ + next: true, + animation: true + }); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .fadingEdge(this.fadingEdgeEnabled) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} -- Gitee From 14514bac8aa71030b60a26e9859ed84d5edd466d Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 1 Aug 2025 14:37:20 +0800 Subject: [PATCH 2/3] add uicompare cases2 Signed-off-by: jinzhao --- ...ComponentListAndGridGridFadingEdge0110.ets | 215 +++++++++++++++++ ...ComponentListAndGridGridFadingEdge0120.ets | 220 +++++++++++++++++ ...ComponentListAndGridGridFadingEdge0130.ets | 211 ++++++++++++++++ ...ComponentListAndGridGridFadingEdge0150.ets | 209 ++++++++++++++++ ...ComponentListAndGridGridFadingEdge0160.ets | 228 ++++++++++++++++++ ...ComponentListAndGridGridFadingEdge0170.ets | 228 ++++++++++++++++++ ...ComponentListAndGridGridFadingEdge0180.ets | 210 ++++++++++++++++ 7 files changed, 1521 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0110.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0120.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0130.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0150.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0160.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0170.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0180.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0110.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0110.ets new file mode 100644 index 00000000..bb33e1b9 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0110.ets @@ -0,0 +1,215 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0110 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0110'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = true; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(0)}; + @State columns: string = '1fr 1fr 1fr 1fr 1fr'; + switched: boolean = false; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 30; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('switch columns') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + if (this.switched) { + this.columns = '1fr 1fr 1fr 1fr 1fr'; + this.switched = false; + } else { + this.columns = '1fr 1fr 1fr'; + this.switched = true; + } + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .fadingEdge(this.fadingEdgeEnabled) + .columnsTemplate(this.columns) + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0120.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0120.ets new file mode 100644 index 00000000..943a1e08 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0120.ets @@ -0,0 +1,220 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0120 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0120'; + @State message: string = this.name; + @State numbers: number[] = []; + @State numbersMuch: number[] = []; + @State numbersLittle: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = true; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(0)}; + switched: boolean = false; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 30; i++) { + this.numbersMuch.push(i); + } + for (let i = 0;i < 10; i++) { + this.numbersLittle.push(i); + } + this.numbers = this.numbersMuch; + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('switch item numbers') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + if (this.switched) { + this.numbers = this.numbersMuch; + this.switched = false; + } else { + this.numbers = this.numbersLittle; + this.switched = true; + } + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .fadingEdge(this.fadingEdgeEnabled) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring, {alwaysEnabled: true}) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0130.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0130.ets new file mode 100644 index 00000000..d98fad3f --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0130.ets @@ -0,0 +1,211 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0130 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0130'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = true; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(0)}; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 30; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.scroller.scrollPage({ + next: true, + animation: true + }); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .fadingEdge(this.fadingEdgeEnabled) + .direction(Direction.Rtl) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0150.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0150.ets new file mode 100644 index 00000000..e77ccd3d --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0150.ets @@ -0,0 +1,209 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0150 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0150'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = true; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(0)}; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 20; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.scroller.scrollPage({ + next: true, + animation: true + }); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .fadingEdge(this.fadingEdgeEnabled) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0160.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0160.ets new file mode 100644 index 00000000..abac9c26 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0160.ets @@ -0,0 +1,228 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0160 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0160'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = true; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(0)}; + padding1: Padding | Length | LocalizedPadding = { + left: 6, + right: 6, + top: 10, + bottom: 10 + }; + padding2: Padding | Length | LocalizedPadding = { + left: 26, + right: 26, + top: 30, + bottom: 30 + }; + @State paddingValue: Padding | Length | LocalizedPadding = this.padding1; + switched: boolean = false; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 20; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('switch padding') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + if (this.switched) { + this.paddingValue = this.padding1; + this.switched = false; + } else { + this.paddingValue = this.padding2; + this.switched = true; + } + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .padding(this.paddingValue) + .fadingEdge(this.fadingEdgeEnabled) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0170.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0170.ets new file mode 100644 index 00000000..d19a65d6 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0170.ets @@ -0,0 +1,228 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0170 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0170'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = true; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(0)}; + margin1: Padding | Length | LocalizedPadding = { + left: 6, + right: 6, + top: 10, + bottom: 10 + }; + margin2: Padding | Length | LocalizedPadding = { + left: 26, + right: 26, + top: 30, + bottom: 30 + }; + @State marginValue: Padding | Length | LocalizedPadding = this.margin1; + switched: boolean = false; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 20; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('switch margin') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + if (this.switched) { + this.marginValue = this.margin1; + this.switched = false; + } else { + this.marginValue = this.margin2; + this.switched = true; + } + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .margin(this.marginValue) + .fadingEdge(this.fadingEdgeEnabled) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0180.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0180.ets new file mode 100644 index 00000000..6ac7776e --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridGridFadingEdge/UIComponentListAndGridGridFadingEdge0180.ets @@ -0,0 +1,210 @@ +/* + * 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 UIComponentListAndGridGridFadingEdge0180 { + @State name: string = 'UIComponentListAndGridGridFadingEdge0180'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State fadingEdgeEnabled: boolean | undefined | null = true; + @State fadingEdgeOptions: FadingEdgeOptions = {fadingEdgeLength: new LengthMetrics(0)}; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 0;i < 13; i++) { + this.numbers.push(i); + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.scroller.scrollPage({ + next: true, + animation: true + }); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .fadingEdge(this.fadingEdgeEnabled) + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .friction(0.6) + .enableScrollInteraction(true) + .supportAnimation(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring, {alwaysEnabled: true}) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .width('90%') + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragStart"); + this.message += `\n Grid onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("Grid onItemDragEnter"); + this.message += `\n Grid onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("Grid onItemDragLeave"); + this.message += `\n Grid onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("Grid onItemDragMove"); + this.message += `\n Grid onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("Grid onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n Grid onItemDrop, event: ${event.toString()}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollBarUpdate((index: number, offset: number) => { + console.info('Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString()); + this.message += `\n Grid onScrollBarUpdate, index: ${index.toString()}, offset: ${offset.toString()}`; + return { + totalOffset: (index / 5) * (80 + 10) - offset, + totalLength: 80 * 5 + 10 * 4 + }; + }) + .onScrollIndex((first: number, last: number) => { + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n Grid onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("Grid onWillScroll"); + this.message += `\n Grid onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n Grid onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("Grid onScrollFrameBegin"); + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("Grid onScrollStart"); + this.message += `\n Grid onScrollStart`; + }) + .onScrollStop(() => { + console.info("Grid onScrollStop"); + this.message += `\n Grid onScrollStop`; + }) + .onReachStart(() => { + console.info("Grid onReachStart"); + this.message += `\n Grid onReachStart`; + }) + .onReachEnd(() => { + console.info("Grid onReachEnd"); + this.message += `\n Grid 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 + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .backgroundColor(Color.Green) + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} -- Gitee From a46de1d3bcf67b30bf9c2ff428b37a984dbb0c75 Mon Sep 17 00:00:00 2001 From: jinzhao Date: Mon, 11 Aug 2025 17:10:52 +0800 Subject: [PATCH 3/3] Fix snapshot params Signed-off-by: jinzhao --- ...omponentListAndGridGridFadingEdge.test.ets | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridGridFadingEdgeTest/UIComponentListAndGridGridFadingEdge.test.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridGridFadingEdgeTest/UIComponentListAndGridGridFadingEdge.test.ets index 3b28abe2..a2e2d457 100644 --- a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridGridFadingEdgeTest/UIComponentListAndGridGridFadingEdge.test.ets +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridGridFadingEdgeTest/UIComponentListAndGridGridFadingEdge.test.ets @@ -172,10 +172,10 @@ export default function UIComponentListAndGridGridFadingEdge() { 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 windowSnap.snapShot(TAG + '_01'); await button.click(); await driver.waitForIdle(1000, 2000); - await windowSnap.snapShot(); + await windowSnap.snapShot(TAG + '_02'); await Utils.sleep(1000); Logger.info(`[${TAG}]`, `Case finish.`); done(); @@ -218,10 +218,10 @@ export default function UIComponentListAndGridGridFadingEdge() { 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 windowSnap.snapShot(TAG + '_01'); await button.click(); await driver.waitForIdle(1000, 2000); - await windowSnap.snapShot(); + await windowSnap.snapShot(TAG + '_02'); await Utils.sleep(1000); Logger.info(`[${TAG}]`, `Case finish.`); done(); @@ -242,12 +242,12 @@ export default function UIComponentListAndGridGridFadingEdge() { let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); await driver.waitForIdle(1000, 2000); - await windowSnap.snapShot(); + await windowSnap.snapShot(TAG + '_01'); await button.click(); await driver.waitForIdle(1000, 2000); await grid.scrollToBottom(2000); await driver.waitForIdle(1000, 2000); - await windowSnap.snapShot(); + await windowSnap.snapShot(TAG + '_02'); await Utils.sleep(1000); Logger.info(`[${TAG}]`, `Case finish.`); done(); @@ -307,10 +307,10 @@ export default function UIComponentListAndGridGridFadingEdge() { 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 windowSnap.snapShot(TAG + '_01'); await button.click(); await driver.waitForIdle(1000, 2000); - await windowSnap.snapShot(); + await windowSnap.snapShot(TAG + '_02'); await Utils.sleep(1000); Logger.info(`[${TAG}]`, `Case finish.`); done(); @@ -330,10 +330,10 @@ export default function UIComponentListAndGridGridFadingEdge() { 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 windowSnap.snapShot(TAG + '_01'); await button.click(); await driver.waitForIdle(1000, 2000); - await windowSnap.snapShot(); + await windowSnap.snapShot(TAG + '_02'); await Utils.sleep(1000); Logger.info(`[${TAG}]`, `Case finish.`); done(); @@ -354,12 +354,12 @@ export default function UIComponentListAndGridGridFadingEdge() { let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); await driver.waitForIdle(1000, 2000); - await windowSnap.snapShot(); + await windowSnap.snapShot(TAG + '_01'); let center = await grid.getBoundsCenter(); let bounds = await grid.getBounds(); await driver.swipe(center.x, center.y, center.x, bounds.top - 100, 1000); await driver.waitForIdle(1000, 2000); - await windowSnap.snapShot(); + await windowSnap.snapShot(TAG + '_02'); await Utils.sleep(1000); Logger.info(`[${TAG}]`, `Case finish.`); done(); -- Gitee