diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentGridJiaoDianTest/UIComponentGridJiaoDian.test.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentGridJiaoDianTest/UIComponentGridJiaoDian.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..c7ed1e329541d750f8a35998fcb9b59443baaceb --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentGridJiaoDianTest/UIComponentGridJiaoDian.test.ets @@ -0,0 +1,761 @@ + +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect, Level } from '@ohos/hypium'; +import { BusinessError, commonEventManager } from '@kit.BasicServicesKit'; +import { Driver, ON ,Component, UiWindow } from '@kit.TestKit'; +import { screen, uiAppearance } from '@kit.ArkUI'; +import Settings from '../model/Settings'; +import windowSnap from '../model/snapShot'; +import Logger from '../model/Logger'; +import Utils from '../model/Utils'; + + +let TAG = 'RunTimeTest'; + +function sleep(ms: number) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +export default function UIComponentGridJiaoDian() { + describe('UIComponentGridJiaoDian', () => { + 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_GRID_JIAODIAN_0010 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0010 + * @tc.desc Observe focus retention when Grid items scroll off then back on screen + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0010', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0010'; + let pageName = "UIComponentGridJiaoDian0010"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + + await grid.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await grid.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await grid.scrollToTop(3000); + await driver.waitForIdle(1000, 2000); + + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0020 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0020 + * @tc.desc Test focused Grid item resizing after scrolling off then back on screen + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0020', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0020'; + let pageName = "UIComponentGridJiaoDian0020"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + 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.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await grid.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await grid.scrollToTop(3000); + await driver.waitForIdle(1000, 2000); + + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0050 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0050 + * @tc.desc Test resizing Grid while child node maintains focus + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0050', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0050'; + let pageName = "UIComponentGridJiaoDian0050"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + 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.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + + await button.click(); + await driver.waitForIdle(2000, 3000); + grid = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await grid.scrollToTop(); + await driver.waitForIdle(2000, 3000); + + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0060 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0060 + * @tc.desc Test focused Grid items scrolling with cachedCount set + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0060', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0060'; + let pageName = "UIComponentGridJiaoDian0060"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + + await grid.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await grid.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await grid.scrollToTop(3000); + await driver.waitForIdle(1000, 2000); + + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0070 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0070 + * @tc.desc Test focused Grid items scrolling with repeat loading mode + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0070', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0070'; + let pageName = "UIComponentGridJiaoDian0070"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + + await grid.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await grid.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await grid.scrollToTop(3000); + await driver.waitForIdle(1000, 2000); + + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0080 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0080 + * @tc.desc Test focused item retention during orientation changes with scrolling + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0080', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0080'; + let pageName = "UIComponentGridJiaoDian0080"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + + await grid.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + + let screenClass: screen.Screen | null = null; + screen.getAllScreens(async (err: BusinessError, data: Array) => { + const errCode: number = err.code; + if (errCode) { + Logger.error(`[${TAG}]: Failed to get all screens. Code:${err.code},message is ${err.message}`); + return; + } + Logger.info(`[${TAG}]: Succeeded in getting all screens. Data:` + JSON.stringify(data)); + screenClass = data[0]; + screenClass.setOrientation(screen.Orientation.HORIZONTAL, (err: BusinessError) => { + const errCode: number = err.code; + if (errCode) { + Logger.error(`[${TAG}]: Failed to set the horizontal orientation. Code:${err.code},message is ${err.message}`); + return; + } + Logger.info(`[${TAG}]: Succeeded in setting the horizontal orientation.`); + }); + await driver.waitForIdle(4000, 5000); + await windowSnap.snapShot(TAG + '_01'); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_02'); + await driver.waitForIdle(1000, 2000); + screenClass.setOrientation(screen.Orientation.VERTICAL, (err: BusinessError) => { + const errCode: number = err.code; + if (errCode) { + Logger.error(`[${TAG}]: Failed to set the vertical orientation. Code:${err.code},message is ${err.message}`); + return; + } + Logger.info(`[${TAG}]: Succeeded in setting the vertical orientation.`); + }); + }); + + await Utils.sleep(10000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0090 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0090 + * @tc.desc Test deleting focused Grid item after scrolling it off screen + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0090', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0090'; + let pageName = "UIComponentGridJiaoDian0090"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + 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.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await grid.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await grid.scrollToTop(3000); + await driver.waitForIdle(1000, 2000); + + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0100 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0100 + * @tc.desc Test modifying focused node properties within event callbacks + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0100', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0100'; + let pageName = "UIComponentGridJiaoDian0100"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + + await grid.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await grid.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await grid.scrollToTop(3000); + await driver.waitForIdle(1000, 2000); + + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0110 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0110 + * @tc.desc Test adding data while scrolling with focused child node + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0110', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0110'; + let pageName = "UIComponentGridJiaoDian0110"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + 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.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await grid.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await grid.scrollToTop(3000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_01'); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await grid.scrollToBottom(6000); + + await windowSnap.snapShot(TAG + '_02'); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0120 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0120 + * @tc.desc Test Refresh component nested with Grid + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0120', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0120'; + let pageName = "UIComponentGridJiaoDian0120"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let refresh: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + + await grid.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + let center = await refresh.getBoundsCenter(); + await driver.swipe(center.x, center.y, center.x, center.y + 300, 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_GRID_JIAODIAN_0130 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0130 + * @tc.desc Test List component nested with Grid + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0130', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0130'; + let pageName = "UIComponentGridJiaoDian0130"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + + await grid.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + let bounds = await list.getBounds(); + await driver.swipe(bounds.right - 10, bounds.bottom - 10, bounds.right - 10, bounds.top + 10, 1000); + await driver.waitForIdle(2000, 3000); + await driver.swipe(bounds.right - 10, bounds.top + 10, bounds.right - 10, bounds.bottom - 10, 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_GRID_JIAODIAN_0140 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0140 + * @tc.desc Test alternating focus between tabs via click events + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0140', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0140'; + let pageName = "UIComponentGridJiaoDian0140"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + + await grid.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + let center = await grid.getBoundsCenter(); + await driver.click(center.x, center.y); + await driver.waitForIdle(2000, 3000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0150 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0150 + * @tc.desc Test tab focus navigation after scrolling focused node off-screen + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0150', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0150'; + let pageName = "UIComponentGridJiaoDian0150"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + + await grid.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await grid.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await grid.scrollToTop(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_GRID_JIAODIAN_0160 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0160 + * @tc.desc Test focus movement with directional keys after a child node gains focus and scrolls out of the screen + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0160', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0160'; + let pageName = "UIComponentGridJiaoDian0160"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + + await grid.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await grid.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2015); + await driver.waitForIdle(1000, 2000); + await grid.scrollToTop(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_GRID_JIAODIAN_0170 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0170 + * @tc.desc Test focus retention in irregular layouts + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0170', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0170'; + let pageName = "UIComponentGridJiaoDian0170"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + await driver.waitForIdle(1000, 2000); + + await grid.click(); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await grid.scrollToBottom(2000); + await driver.waitForIdle(1000, 2000); + await grid.scrollToTop(3000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_01'); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await windowSnap.snapShot(TAG + '_02'); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0180 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0180 + * @tc.desc Test GridItem focus persistence when clicking then scrolling in/out + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0180', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0180'; + let pageName = "UIComponentGridJiaoDian0180"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + let itemA: Component = await driver.waitForComponent(ON.id(pageName + '_05'), 1000); + let itemB: Component = await driver.waitForComponent(ON.id(pageName + '_06'), 1000); + await driver.waitForIdle(1000, 2000); + + await itemA.click(); + await driver.waitForIdle(2000, 3000); + + await grid.scrollToBottom(3000); + await driver.waitForIdle(2000, 3000); + await grid.scrollToTop(3000); + await driver.waitForIdle(2000, 3000); + + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0190 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0190 + * @tc.desc Test GridItem focus via click combined with tab navigation + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0190', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0190'; + let pageName = "UIComponentGridJiaoDian0190"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + let itemA: Component = await driver.waitForComponent(ON.id(pageName + '_05'), 1000); + let itemB: Component = await driver.waitForComponent(ON.id(pageName + '_06'), 1000); + await driver.waitForIdle(1000, 2000); + + await itemA.click(); + await driver.waitForIdle(1000, 2000); + await grid.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await grid.scrollToTop(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_GRID_JIAODIAN_0200 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0200 + * @tc.desc Test focus switching between nodes A and B during scroll in/out + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0200', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0200'; + let pageName = "UIComponentGridJiaoDian0200"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + let itemA: Component = await driver.waitForComponent(ON.id(pageName + '_05'), 1000); + let itemB: Component = await driver.waitForComponent(ON.id(pageName + '_06'), 1000); + await driver.waitForIdle(1000, 2000); + + await itemA.click(); + await driver.waitForIdle(1000, 2000); + await itemB.click(); + await driver.waitForIdle(1000, 2000); + + await grid.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await grid.scrollToTop(2000); + await driver.waitForIdle(1000, 2000); + + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0210 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0210 + * @tc.desc Test focus shift from node A to B via tab during scroll in/out + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0210', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_JIAODIAN_0210'; + let pageName = "UIComponentGridJiaoDian0210"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridJiaoDian/' + pageName); + let driver: Driver = Driver.create(); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + let itemA: Component = await driver.waitForComponent(ON.id(pageName + '_05'), 1000); + let itemB: Component = await driver.waitForComponent(ON.id(pageName + '_06'), 1000); + await driver.waitForIdle(1000, 2000); + + await itemA.click(); + await driver.waitForIdle(1000, 2000); + + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + await driver.triggerKey(2049); + await driver.waitForIdle(1000, 2000); + + await grid.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await grid.scrollToTop(2000); + await driver.waitForIdle(1000, 2000); + + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + }) +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentGridXommonSmoothTest/UIComponentGridXommonSmooth.test.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentGridXommonSmoothTest/UIComponentGridXommonSmooth.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..49207a6889bf9e080dab29b152c6242eb294edea --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentGridXommonSmoothTest/UIComponentGridXommonSmooth.test.ets @@ -0,0 +1,178 @@ +/** + * 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 UIComponentGridXommonSmooth() { + describe('UIComponentGridXommonSmooth', () => { + 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_GRID_XOMMON_SMOOTH_0280 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0280 + * @tc.desc Test Grid animated scrollToIndex with onScrollIndex callback + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0280', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0280'; + let pageName = "UIComponentGridXommonSmooth0280"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridXommonSmooth/' + 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); + let scroll: Component = await driver.waitForComponent(ON.id(pageName + '_04'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await scroll.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0310 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0310 + * @tc.desc Test Grid animated scrollToIndex with onReachStart and onReachEnd callback + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0310', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0310'; + let pageName = "UIComponentGridXommonSmooth0310"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridXommonSmooth/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + let scroll: Component = await driver.waitForComponent(ON.id(pageName + '_04'), 1000); + await driver.waitForIdle(1000, 2000); + await button1.click(); + await driver.waitForIdle(1000, 2000); + await scroll.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_01'); + await button2.click(); + await driver.waitForIdle(2000, 3000); + await scroll.scrollToBottom(5000); + await driver.waitForIdle(2000, 3000); + await windowSnap.snapShot(TAG + '_02'); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0320 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0320 + * @tc.desc Test Grid animated scrollTo with onScrollIndex callback + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0320', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0320'; + let pageName = "UIComponentGridXommonSmooth0320"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridXommonSmooth/' + 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); + let scroll: Component = await driver.waitForComponent(ON.id(pageName + '_04'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await scroll.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0340 + * @tc.name SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0340 + * @tc.desc Test Grid animated scrollTo with onReachStart and onReachEnd callback + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0340', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_GRID_XOMMON_SMOOTH_0340'; + let pageName = "UIComponentGridXommonSmooth0340"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentGridXommonSmooth/' + pageName); + let driver: Driver = Driver.create(); + let button1: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let button2: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let grid: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + let scroll: Component = await driver.waitForComponent(ON.id(pageName + '_04'), 1000); + await driver.waitForIdle(1000, 2000); + await button1.click(); + await driver.waitForIdle(1000, 2000); + await scroll.scrollToBottom(3000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(TAG + '_01'); + await button2.click(); + await driver.waitForIdle(2000, 3000); + await scroll.scrollToBottom(5000); + await driver.waitForIdle(2000, 3000); + await windowSnap.snapShot(TAG + '_02'); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + }) +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0010.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0010.ets new file mode 100644 index 0000000000000000000000000000000000000000..eddb06a333b4372363d02d1092e80dd1939aa541 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0010.ets @@ -0,0 +1,234 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0010 { + @State name: string = 'UIComponentGridJiaoDian0010'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + // this.actualColors = this.originColors; + } + + 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) { + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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) => { + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0020.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0020.ets new file mode 100644 index 0000000000000000000000000000000000000000..6de644685ac8706064b6ee3ccacf134b1e0bc38e --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0020.ets @@ -0,0 +1,246 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0020 { + @State name: string = 'UIComponentGridJiaoDian0020'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + @State originWidth: Length = 80; + @State actualWidth: Length = this.originWidth; + @State originHeight: Length = 80; + @State actualHeight: Length = this.originHeight; + switchFlag: 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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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 size') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + if (this.switchFlag) { + this.actualWidth = this.originWidth; + this.actualHeight = this.originHeight; + this.switchFlag = false; + } else { + this.actualWidth = 100; + this.actualHeight = 100; + this.switchFlag = true; + } + }) + + Grid(this.scroller) { + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .width(this.actualWidth) + .height(this.actualHeight) + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0050.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0050.ets new file mode 100644 index 0000000000000000000000000000000000000000..c4984a250e99f78d749789c512a16e460cb38227 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0050.ets @@ -0,0 +1,265 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0050 { + @State name: string = 'UIComponentGridJiaoDian0050'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + @State originWidth: Length = '90%'; + @State actualWidth: Length = this.originWidth; + @State originHeight: Length = 300; + @State actualHeight: Length = this.originHeight; + switchFlag: 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 < 9; i++) { + this.numbers.push(i); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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 size') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + if (this.switchFlag) { + this.actualWidth = this.originWidth; + this.actualHeight = this.originHeight; + this.switchFlag = false; + } else { + this.actualWidth = 200; + this.actualHeight = 80; + this.switchFlag = true; + } + }) + + Grid(this.scroller) { + ForEach(this.numbers.slice(0, 5), (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers.slice(5), (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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(this.actualWidth) + .backgroundColor(Color.Grey) + .height(this.actualHeight) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0060.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0060.ets new file mode 100644 index 0000000000000000000000000000000000000000..945ff9cfaf26f30e2e90a49405f1ae4c69a3de27 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0060.ets @@ -0,0 +1,235 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0060 { + @State name: string = 'UIComponentGridJiaoDian0060'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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) { + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .cachedCount(5) + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0070.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0070.ets new file mode 100644 index 0000000000000000000000000000000000000000..a243e6964cc443a850b13c92e44ab1652930b724 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0070.ets @@ -0,0 +1,216 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0070 { + @State name: string = 'UIComponentGridJiaoDian0070'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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) { + Repeat(this.numbers) + .each((obj: RepeatItem) => { + GridItem() { + Text(obj.item.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[obj.item]) + .onFocus(() => { + this.message += `\n Grid item ${obj.item} onFocus`; + this.actualColors[obj.item] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${obj.item} onBlur`; + this.actualColors[obj.item] = this.originColors[obj.item]; + }) + .focusable(true) + }) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0080.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0080.ets new file mode 100644 index 0000000000000000000000000000000000000000..99d33f5b35176cf19f2f512d4dfded1405db673d --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0080.ets @@ -0,0 +1,234 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0080 { + @State name: string = 'UIComponentGridJiaoDian0080'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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) { + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0090.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0090.ets new file mode 100644 index 0000000000000000000000000000000000000000..0f81cba0a0ac2c9db9b50cf022ceee05196de1e2 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0090.ets @@ -0,0 +1,212 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0090 { + @State name: string = 'UIComponentGridJiaoDian0090'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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('delete node') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.numbers.shift(); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0100.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0100.ets new file mode 100644 index 0000000000000000000000000000000000000000..9060a38d33606caf864d2e6691f945a70691b34c --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0100.ets @@ -0,0 +1,241 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0100 { + @State name: string = 'UIComponentGridJiaoDian0100'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + @State actualWidth: number = 50; + @State actualHeight: number = 50; + private _offset: number = 30; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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) { + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .width(this.actualWidth) + .height(this.actualHeight) + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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`; + this.actualWidth = this.actualWidth + this._offset; + this.actualHeight = this.actualHeight + this._offset; + }) + .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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0110.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0110.ets new file mode 100644 index 0000000000000000000000000000000000000000..80a547b9ab9f446666bfa9c123b7260559599d15 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0110.ets @@ -0,0 +1,240 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0110 { + @State name: string = 'UIComponentGridJiaoDian0110'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + private flag: boolean = false; + private index: number = 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.index++; + this.numbers.push(i); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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 node increase') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.flag = !this.flag; + }) + + Grid(this.scroller) { + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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()}`; + if (this.flag) { + this.numbers.push(this.index); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + this.index++; + } + }) + .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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0120.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0120.ets new file mode 100644 index 0000000000000000000000000000000000000000..5db1922a45b90a1ae0cfb46bebe8df1161f204b1 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0120.ets @@ -0,0 +1,266 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0120 { + @State name: string = 'UIComponentGridJiaoDian0120'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + @State isRefreshing: 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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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 + }); + }) + + Refresh({ refreshing: $$this.isRefreshing }) { + + Grid(this.scroller) { + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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 onItemDragMove"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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 onReachEnd, 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`; + }) + + } + .id(this.name + '_02') + .onStateChange((refreshStatus: RefreshStatus) => { + this.message += `\n Refresh onStatueChange, state: ${refreshStatus}`; + console.info('Refresh onStatueChange state is ' + refreshStatus); + }) + .onOffsetChange((value: number) => { + this.message += `\n Refresh onOffsetChange, offset: ${value}`; + console.info('Refresh onOffsetChange offset:' + value); + }) + .onRefreshing(() => { + setTimeout(() => { + this.isRefreshing = false; + }, 1000) + this.message += `\n Refresh onRefreshing`; + console.log('onRefreshing test'); + }) + .backgroundColor(0x89CFFF) + .refreshOffset(64) + .width('95%') + .height(350) + .pullToRefresh(true) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0130.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0130.ets new file mode 100644 index 0000000000000000000000000000000000000000..10b6c968a4d7e106707cfd8cfcf3a3d117fd6d76 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0130.ets @@ -0,0 +1,255 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0130 { + @State name: string = 'UIComponentGridJiaoDian0130'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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 + }); + }) + + List() { + ListItem() { + Grid(this.scroller) { + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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 onItemDragMove"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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 onReachEnd, 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`; + }) + } + } + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor('#DCDCDC') + .width('95%') + .height(150) + .scrollBar(BarState.On) + .scrollBarColor(Color.Gray) + .scrollBarWidth(10) + .friction(0.6) + .edgeEffect(EdgeEffect.None) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0140.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0140.ets new file mode 100644 index 0000000000000000000000000000000000000000..4e293d74e2bca2da2265fc9b4d371a8bc0e5003f --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0140.ets @@ -0,0 +1,234 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0140 { + @State name: string = 'UIComponentGridJiaoDian0140'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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) { + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0150.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0150.ets new file mode 100644 index 0000000000000000000000000000000000000000..30e49c34fda2cedb90186f03131f1506e87fab9f --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0150.ets @@ -0,0 +1,234 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0150 { + @State name: string = 'UIComponentGridJiaoDian0150'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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) { + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0160.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0160.ets new file mode 100644 index 0000000000000000000000000000000000000000..acac0cacad7e02781a10e51c9f8eea8a554aee6a --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0160.ets @@ -0,0 +1,234 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0160 { + @State name: string = 'UIComponentGridJiaoDian0160'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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) { + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0170.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0170.ets new file mode 100644 index 0000000000000000000000000000000000000000..0a290107fe24717d80d7dfb11b7a438f8fd125d0 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0170.ets @@ -0,0 +1,245 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0170 { + @State name: string = 'UIComponentGridJiaoDian0170'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColor: ResourceColor = 0xF9CF93; + @State actualColor: ResourceColor = this.originColor; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + layoutOptions: GridLayoutOptions = { + regularSize: [1, 1], + irregularIndexes: [0, 7, 15, 20, 23, 26], + onGetIrregularSizeByIndex: (index: number) => { + if (index === 0) { + return [1, 5]; + } + return [1, index % 6 + 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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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, this.layoutOptions) { + GridItem() { + Text('item') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColor) + .onFocus(() => { + this.message += `\n Grid item onFocus`; + this.actualColor = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item onBlur`; + this.actualColor = this.originColor; + }) + .focusable(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0180.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0180.ets new file mode 100644 index 0000000000000000000000000000000000000000..f44fb099fc342cc2eebefdbc46fc0de5ef4ce821 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0180.ets @@ -0,0 +1,261 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0180 { + @State name: string = 'UIComponentGridJiaoDian0180'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColorA: ResourceColor = 0xF9CF93; + @State actualColorA: ResourceColor = this.originColorA; + @State originColorB: ResourceColor = 0xF9CF93; + @State actualColorB: ResourceColor = this.originColorB; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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) { + GridItem() { + Text('itemA') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + .focusOnTouch(true) + } + .id(this.name + '_05') + .backgroundColor(this.actualColorA) + .onFocus(() => { + this.message += `\n Grid itemA onFocus`; + this.actualColorA = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid itemA onBlur`; + this.actualColorA = this.originColorA; + }) + .focusable(true) + .focusOnTouch(true) + + GridItem() { + Text('itemB') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + .focusOnTouch(true) + } + .id(this.name + '_06') + .backgroundColor(this.actualColorB) + .onFocus(() => { + this.message += `\n Grid itemB onFocus`; + this.actualColorB = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid itemB onBlur`; + this.actualColorB = this.originColorB; + }) + .focusable(true) + .focusOnTouch(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0190.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0190.ets new file mode 100644 index 0000000000000000000000000000000000000000..526c7f814d7e67efe922c0d181324f95b4b70da7 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0190.ets @@ -0,0 +1,261 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0190 { + @State name: string = 'UIComponentGridJiaoDian0190'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColorA: ResourceColor = 0xF9CF93; + @State actualColorA: ResourceColor = this.originColorA; + @State originColorB: ResourceColor = 0xF9CF93; + @State actualColorB: ResourceColor = this.originColorB; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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) { + GridItem() { + Text('itemA') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + .focusOnTouch(true) + } + .id(this.name + '_05') + .backgroundColor(this.actualColorA) + .onFocus(() => { + this.message += `\n Grid itemA onFocus`; + this.actualColorA = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid itemA onBlur`; + this.actualColorA = this.originColorA; + }) + .focusable(true) + .focusOnTouch(true) + + GridItem() { + Text('itemB') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + .focusOnTouch(true) + } + .id(this.name + '_06') + .backgroundColor(this.actualColorB) + .onFocus(() => { + this.message += `\n Grid itemB onFocus`; + this.actualColorB = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid itemB onBlur`; + this.actualColorB = this.originColorB; + }) + .focusable(true) + .focusOnTouch(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0200.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0200.ets new file mode 100644 index 0000000000000000000000000000000000000000..35fd5a986b5d1519a106c98e466b520714d99def --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0200.ets @@ -0,0 +1,261 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0200 { + @State name: string = 'UIComponentGridJiaoDian0200'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColorA: ResourceColor = 0xF9CF93; + @State actualColorA: ResourceColor = this.originColorA; + @State originColorB: ResourceColor = 0xF9CF93; + @State actualColorB: ResourceColor = this.originColorB; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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) { + GridItem() { + Text('itemA') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + .focusOnTouch(true) + } + .id(this.name + '_05') + .backgroundColor(this.actualColorA) + .onFocus(() => { + this.message += `\n Grid itemA onFocus`; + this.actualColorA = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid itemA onBlur`; + this.actualColorA = this.originColorA; + }) + .focusable(true) + .focusOnTouch(true) + + GridItem() { + Text('itemB') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + .focusOnTouch(true) + } + .id(this.name + '_06') + .backgroundColor(this.actualColorB) + .onFocus(() => { + this.message += `\n Grid itemB onFocus`; + this.actualColorB = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid itemB onBlur`; + this.actualColorB = this.originColorB; + }) + .focusable(true) + .focusOnTouch(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridJiaoDian/UIComponentGridJiaoDian0210.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0210.ets new file mode 100644 index 0000000000000000000000000000000000000000..92868d65c024b1b0d282ad74a88191dde33d5c86 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridJiaoDian/UIComponentGridJiaoDian0210.ets @@ -0,0 +1,261 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentGridJiaoDian0210 { + @State name: string = 'UIComponentGridJiaoDian0210'; + @State message: string = this.name; + @State numbers: number[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + @State originColorA: ResourceColor = 0xF9CF93; + @State actualColorA: ResourceColor = this.originColorA; + @State originColorB: ResourceColor = 0xF9CF93; + @State actualColorB: ResourceColor = this.originColorB; + @State originColors: ResourceColor[] = []; + @State actualColors: ResourceColor[] = []; + + @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); + this.originColors.push(0xF9CF93); + this.actualColors.push(0xF9CF93); + } + } + + 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) { + GridItem() { + Text('itemA') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + .focusOnTouch(true) + } + .id(this.name + '_05') + .backgroundColor(this.actualColorA) + .onFocus(() => { + this.message += `\n Grid itemA onFocus`; + this.actualColorA = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid itemA onBlur`; + this.actualColorA = this.originColorA; + }) + .focusable(true) + .focusOnTouch(true) + + GridItem() { + Text('itemB') + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + .focusOnTouch(true) + } + .id(this.name + '_06') + .backgroundColor(this.actualColorB) + .onFocus(() => { + this.message += `\n Grid itemB onFocus`; + this.actualColorB = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid itemB onBlur`; + this.actualColorB = this.originColorB; + }) + .focusable(true) + .focusOnTouch(true) + + ForEach(this.numbers, (day: number) => { + GridItem() { + Text(day.toString()) + .fontSize(16) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + .focusable(true) + } + .backgroundColor(this.actualColors[day]) + .onFocus(() => { + this.message += `\n Grid item ${day} onFocus`; + this.actualColors[day] = Color.Orange; + }) + .onBlur(() => { + this.message += `\n Grid item ${day} onBlur`; + this.actualColors[day] = this.originColors[day]; + }) + .focusable(true) + }, (day: number) => day.toString()) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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/UIComponentGridXommonSmooth/UIComponentGridXommonSmooth0280.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridXommonSmooth/UIComponentGridXommonSmooth0280.ets new file mode 100644 index 0000000000000000000000000000000000000000..a8b2b9de19c8c78ebbfa64091f6f93cf8bc5154a --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridXommonSmooth/UIComponentGridXommonSmooth0280.ets @@ -0,0 +1,195 @@ +/* + * 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 { curves } from '@kit.ArkUI'; + +@Entry +@Component +struct UIComponentGridXommonSmooth0280 { + @State name: string = 'UIComponentGridXommonSmooth0280'; + @State message: string = this.name; + @State numbers: string[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 1;i <= 30; i++) { + this.numbers.push(i + ''); + } + } + + changeIndex(index1: number, index2: number) { + let temp: string; + 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('调用scrollToIndex') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.scroller.scrollToIndex(20, true, ScrollAlign.START); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: string) => day) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + this.text = this.numbers[itemIndex]; + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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) => { + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .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/UIComponentGridXommonSmooth/UIComponentGridXommonSmooth0310.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridXommonSmooth/UIComponentGridXommonSmooth0310.ets new file mode 100644 index 0000000000000000000000000000000000000000..d96e0c7cf56869b45c62e2aaa95f500b0ed7148c --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridXommonSmooth/UIComponentGridXommonSmooth0310.ets @@ -0,0 +1,206 @@ +/* + * 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 { curves } from '@kit.ArkUI'; + +@Entry +@Component +struct UIComponentGridXommonSmooth0310 { + @State name: string = 'UIComponentGridXommonSmooth0310'; + @State message: string = this.name; + @State numbers: string[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 1;i <= 30; i++) { + this.numbers.push(i + ''); + } + } + + changeIndex(index1: number, index2: number) { + let temp: string; + 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('调用scrollToIndex向下滚动') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.scroller.scrollToIndex(20, true, ScrollAlign.START); + }) + + Button('调用scrollToIndex向上滚动') + .id(this.name + '_02') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + this.scroller.scrollToIndex(0, true, ScrollAlign.START); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: string) => day) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + this.text = this.numbers[itemIndex]; + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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) => { + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .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/UIComponentGridXommonSmooth/UIComponentGridXommonSmooth0320.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridXommonSmooth/UIComponentGridXommonSmooth0320.ets new file mode 100644 index 0000000000000000000000000000000000000000..3958bc6822017071d050f2ceca81ad83f1b54a25 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridXommonSmooth/UIComponentGridXommonSmooth0320.ets @@ -0,0 +1,204 @@ +/* + * 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 { curves } from '@kit.ArkUI'; + +@Entry +@Component +struct UIComponentGridXommonSmooth0320 { + @State name: string = 'UIComponentGridXommonSmooth0320'; + @State message: string = this.name; + @State numbers: string[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 1;i <= 30; i++) { + this.numbers.push(i + ''); + } + } + + changeIndex(index1: number, index2: number) { + let temp: string; + 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('调用scrollTo') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + let curve = curves.interpolatingSpring(10, 1, 228, 30); + const yOffset: number = this.scroller.currentOffset().yOffset; + this.scroller.scrollTo({ + xOffset: 0, + yOffset: yOffset + 500, + animation: { + duration: 1000, + curve: curve + } + }); + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: string) => day) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + this.text = this.numbers[itemIndex]; + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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) => { + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .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/UIComponentGridXommonSmooth/UIComponentGridXommonSmooth0340.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridXommonSmooth/UIComponentGridXommonSmooth0340.ets new file mode 100644 index 0000000000000000000000000000000000000000..f0e646add0237e44f27887d3121445a8f599bfc0 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentGridXommonSmooth/UIComponentGridXommonSmooth0340.ets @@ -0,0 +1,224 @@ +/* + * 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 { curves } from '@kit.ArkUI'; + +@Entry +@Component +struct UIComponentGridXommonSmooth0340 { + @State name: string = 'UIComponentGridXommonSmooth0340'; + @State message: string = this.name; + @State numbers: string[] = []; + scroller: Scroller = new Scroller(); + @State text: string = 'drag'; + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width(80) + .height(80) + .textAlign(TextAlign.Center) + } + } + + aboutToAppear() { + for (let i = 1;i <= 30; i++) { + this.numbers.push(i + ''); + } + } + + changeIndex(index1: number, index2: number) { + let temp: string; + 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('调用scrollTo向下滚动') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + let curve = curves.interpolatingSpring(10, 1, 228, 30); + const yOffset: number = this.scroller.currentOffset().yOffset; + this.scroller.scrollTo({ + xOffset: 0, + yOffset: yOffset + 500, + animation: { + duration: 1000, + curve: curve + } + }); + }) + + Button('调用scrollTo向上滚动') + .id(this.name + '_02') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontSize(16) + .fontWeight(FontWeight.Bold) + .margin(10) + .onClick(() => { + let curve = curves.interpolatingSpring(10, 1, 228, 30); + const yOffset: number = this.scroller.currentOffset().yOffset; + this.scroller.scrollTo({ + xOffset: 0, + yOffset: yOffset - 500, + animation: { + duration: 1000, + curve: curve + } + }) + }) + + Grid(this.scroller) { + ForEach(this.numbers, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, (day: string) => day) + } + .id(this.name + '_03') + .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%') + .backgroundColor(Color.Grey) + .height(300) + .editMode(true) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + this.text = this.numbers[itemIndex]; + 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"); + this.message += `\n Grid onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + 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()); + 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) => { + this.message += `\n Grid onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .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%') + } +}