From 3109c5d88a94d22f8a3aae6db609daa03b2ef15e Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 15 Aug 2025 18:03:31 +0800 Subject: [PATCH 1/4] add uicompare cases1 Signed-off-by: jinzhao --- .../UIComponentListAndGridListMouse.test.ets | 367 +++++++++++++ .../UIComponentListAndGridListMouse0010.ets | 455 +++++++++++++++ .../UIComponentListAndGridListMouse0020.ets | 519 ++++++++++++++++++ .../UIComponentListAndGridListMouse0040.ets | 463 ++++++++++++++++ 4 files changed, 1804 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListMouseTest/UIComponentListAndGridListMouse.test.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0010.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0020.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0040.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListMouseTest/UIComponentListAndGridListMouse.test.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListMouseTest/UIComponentListAndGridListMouse.test.ets new file mode 100644 index 00000000..b34e6658 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListMouseTest/UIComponentListAndGridListMouse.test.ets @@ -0,0 +1,367 @@ +/** + * 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, MouseButton } 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 UIComponentListAndGridListMouse() { + describe('UIComponentListAndGridListMouse', () => { + beforeAll(() => { + + }) + beforeEach(() => { + + }) + + afterEach(async (done: Function) => { + if (Settings.windowClass == undefined) { + return + } + Settings.windowClass.destroyWindow((err) => { + if (err.code) { + Logger.error(`[${TAG}_afterEach]`, `Failed to destroy the window. Cause : ${JSON.stringify(err)}`); + return; + } + Logger.info(`[${TAG}_afterEach]`, `Succeeded in destroy the window.`); + }) + await Utils.sleep(1000); + done(); + }) + + afterAll(() => { + + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0010 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0010 + * @tc.desc Observe box selection in ListItem under ListItemGroup + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0010', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0010'; + let pageName = "UIComponentListAndGridListMouse0010"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMouse/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: center.x, y: center.y}, {x: bounds.left, y: bounds.top}, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0020 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0020 + * @tc.desc Monitor mouse box selection for ListItemGroup header and footer + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0020', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0020'; + let pageName = "UIComponentListAndGridListMouse0020"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMouse/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: center.x, y: center.y}, {x: bounds.left, y: bounds.top}, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0040 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0040 + * @tc.desc Observe ListItem selected state polymorphic styles + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0040', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0040'; + let pageName = "UIComponentListAndGridListMouse0040"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMouse/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let item1: Component = await driver.waitForComponent(ON.id(pageName + '_02_1_1'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + let item1center = await item1.getBoundsCenter(); + await driver.waitForIdle(1000, 2000); + await driver.mouseClick({x: item1center.x, y: item1center.y}, MouseButton.MOUSE_BUTTON_LEFT); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0050 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0050 + * @tc.desc Enable mouse drag selection after clicking ListItem in List + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0050', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0050'; + let pageName = "UIComponentListAndGridListMouse0050"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMouse/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: center.x, y: center.y}, {x: bounds.left, y: bounds.top}, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0070 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0070 + * @tc.desc Observe mouse box selection during dynamic List column changes + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0070', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0070'; + let pageName = "UIComponentListAndGridListMouse0070"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMouse/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: center.x, y: center.y}, {x: bounds.left, y: bounds.top}, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0080 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0080 + * @tc.desc Observe List box selection rendering effects + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0080', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0080'; + let pageName = "UIComponentListAndGridListMouse0080"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMouse/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: center.x, y: center.y}, {x: bounds.left, y: bounds.top}, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0090 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0090 + * @tc.desc Configure List for lazy loading with mouse drag selection + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0090', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0090'; + let pageName = "UIComponentListAndGridListMouse0090"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMouse/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_03'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: center.x, y: center.y}, {x: bounds.left, y: bounds.bottom}, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0110 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0110 + * @tc.desc Continue scrolling when mouse drag selection reaches boundaries after adding ListItemGroup + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0110', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0110'; + let pageName = "UIComponentListAndGridListMouse0110"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMouse/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: center.x, y: center.y}, {x: bounds.left - 50, y: bounds.bottom + 100}, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0120 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0120 + * @tc.desc Observe effects when disabling box selection in parent List component + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0120', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0120'; + let pageName = "UIComponentListAndGridListMouse0120"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMouse/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: center.x, y: center.y}, {x: bounds.left, y: bounds.top}, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0130 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0130 + * @tc.desc Test mouse box selection on disabled components + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0130', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0130'; + let pageName = "UIComponentListAndGridListMouse0130"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMouse/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: center.x, y: center.y}, {x: bounds.left, y: bounds.top}, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0150 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0150 + * @tc.desc Observe box selection when components at mouse press position are non-draggable + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0150', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0150'; + let pageName = "UIComponentListAndGridListMouse0150"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMouse/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let item1: Component = await driver.waitForComponent(ON.id(pageName + '_02_1_1'), 1000); + let item1Center = await item1.getBoundsCenter(); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: item1Center.x, y: item1Center.y}, {x: bounds.left, y: bounds.bottom}, 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_LISTANDGR0ID_LIST_MOUSE_0160 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0160 + * @tc.desc Monitor initial box selection position during arbitrary mouse movement after press + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0160', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LIST_MOUSE_0160'; + let pageName = "UIComponentListAndGridListMouse0160"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListMouse/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + let center = await list.getBoundsCenter(); + let bounds = await list.getBounds(); + await driver.waitForIdle(1000, 2000); + await driver.mouseDrag({x: center.x, y: center.y}, {x: bounds.left, y: bounds.top}, 1000); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + }) +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0010.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0010.ets new file mode 100644 index 00000000..5d663d77 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0010.ets @@ -0,0 +1,455 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListMouse0010 { + @State name: string = 'UIComponentListAndGridListMouse0010'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State listSelectableValue: boolean = true; + @State itemSelectableValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItemGroup() { + ListItem() { + Text('group1-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item1 selected'; + } else { + this.message += '\n group1-item1 unselected'; + } + }) + ListItem() { + Text('group1-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item2 selected'; + } else { + this.message += '\n group1-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group2-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group2-item1 selected'; + } else { + this.message += '\n group2-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group2-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group2-item2 selected'; + } else { + this.message += '\n group2-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group3-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group3-item1 selected'; + } else { + this.message += '\n group3-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group3-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group3-item2 selected'; + } else { + this.message += '\n group3-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group4-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group4-item1 selected'; + } else { + this.message += '\n group4-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group4-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group4-item2 selected'; + } else { + this.message += '\n group4-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + } + .multiSelectable(this.listSelectableValue) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0020.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0020.ets new file mode 100644 index 00000000..5ef7912b --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0020.ets @@ -0,0 +1,519 @@ +/* + * 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 { ComponentContent } from '@kit.ArkUI'; + +class HeadBuilderParams { + text: string | Resource; + constructor(text: string | Resource) { + this.text = text; + } +} + +class FootBuilderParams { + text: string | Resource; + constructor(text: string | Resource) { + this.text = text; + } +} + +@Builder +function itemHead(params: HeadBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .width('100%') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .width('100%') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListMouse0020 { + @State name: string = 'UIComponentListAndGridListMouse0020'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State listSelectableValue: boolean = true; + @State itemSelectableValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + header?: ComponentContent = undefined; + footer?: ComponentContent = undefined; + headerParam = new HeadBuilderParams('HeaderText'); + footerParam = new FootBuilderParams('FooterText'); + + GetHeader(headerText: string) { + this.header = new ComponentContent(this.getUIContext(), wrapBuilder(itemHead), new HeadBuilderParams(headerText)); + return this.header; + } + + GetFooter(footerText: string) { + this.footer = new ComponentContent(this.getUIContext(), wrapBuilder(itemFoot), new FootBuilderParams(footerText)); + return this.footer; + } + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + this.header = new ComponentContent(this.getUIContext(), wrapBuilder(itemHead), this.headerParam); + this.footer = new ComponentContent(this.getUIContext(), wrapBuilder(itemFoot), this.footerParam); + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItemGroup({ + headerComponent: this.GetHeader('Group1-Header'), + footerComponent: this.GetFooter('Group1-Footer') + }) { + ListItem() { + Text('group1-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item1 selected'; + } else { + this.message += '\n group1-item1 unselected'; + } + }) + ListItem() { + Text('group1-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item2 selected'; + } else { + this.message += '\n group1-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup({ + headerComponent: this.GetHeader('Group2-Header'), + footerComponent: this.GetFooter('Group2-Footer') + }) { + ListItem() { + Text('group2-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group2-item1 selected'; + } else { + this.message += '\n group2-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group2-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group2-item2 selected'; + } else { + this.message += '\n group2-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup({ + headerComponent: this.GetHeader('Group3-Header'), + footerComponent: this.GetFooter('Group3-Footer') + }) { + ListItem() { + Text('group3-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group3-item1 selected'; + } else { + this.message += '\n group3-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group3-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group3-item2 selected'; + } else { + this.message += '\n group3-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup({ + headerComponent: this.GetHeader('Group4-Header'), + footerComponent: this.GetFooter('Group4-Footer') + }) { + ListItem() { + Text('group4-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group4-item1 selected'; + } else { + this.message += '\n group4-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group4-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group4-item2 selected'; + } else { + this.message += '\n group4-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + } + .sticky(StickyStyle.Header | StickyStyle.Footer) + .multiSelectable(this.listSelectableValue) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0040.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0040.ets new file mode 100644 index 00000000..fcf175ca --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0040.ets @@ -0,0 +1,463 @@ +/* + * 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 UIComponentListAndGridListMouse0040 { + @State name: string = 'UIComponentListAndGridListMouse0040'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State listSelectableValue: boolean = true; + @State itemSelectableValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItemGroup() { + ListItem() { + Text('group1-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_1') + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item1 selected'; + } else { + this.message += '\n group1-item1 unselected'; + } + }) + ListItem() { + Text('group1-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item2 selected'; + } else { + this.message += '\n group1-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group2-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group2-item1 selected'; + } else { + this.message += '\n group2-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group2-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group2-item2 selected'; + } else { + this.message += '\n group2-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group3-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group3-item1 selected'; + } else { + this.message += '\n group3-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group3-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group3-item2 selected'; + } else { + this.message += '\n group3-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group4-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group4-item1 selected'; + } else { + this.message += '\n group4-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group4-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group4-item2 selected'; + } else { + this.message += '\n group4-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + } + .multiSelectable(this.listSelectableValue) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + -- Gitee From d72ed4a8912601d32d56e43e0f96817ce0b56533 Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 15 Aug 2025 18:04:00 +0800 Subject: [PATCH 2/4] add uicompare cases2 Signed-off-by: jinzhao --- .../UIComponentListAndGridListMouse0070.ets | 449 +++++++++++++++++ .../UIComponentListAndGridListMouse0080.ets | 463 ++++++++++++++++++ .../UIComponentListAndGridListMouse0090.ets | 404 +++++++++++++++ .../UIComponentListAndGridListMouse0110.ets | 463 ++++++++++++++++++ 4 files changed, 1779 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0070.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0080.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0090.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0110.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0070.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0070.ets new file mode 100644 index 00000000..3242bf6f --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0070.ets @@ -0,0 +1,449 @@ +/* + * 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 UIComponentListAndGridListMouse0070 { + @State name: string = 'UIComponentListAndGridListMouse0070'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State listSelectableValue: boolean = true; + @State itemSelectableValue: boolean = true; + @State lanesLength: Length = 350; + switched: boolean = false; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('改变列数') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + if (this.switched) { + this.lanesLength = 350; + this.switched = false; + } else { + this.lanesLength = 180; + this.switched = true; + } + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItem() { + Text('item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_1') + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item1 selected'; + } else { + this.message += '\n item1 unselected'; + } + }) + ListItem() { + Text('item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item2 selected'; + } else { + this.message += '\n item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + + + ListItem() { + Text('item3') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item3 selected'; + } else { + this.message += '\n item3 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('item4') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item4 selected'; + } else { + this.message += '\n item4 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + + + ListItem() { + Text('item5') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item5 selected'; + } else { + this.message += '\n item5 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('item6') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item6 selected'; + } else { + this.message += '\n item6 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + + + ListItem() { + Text('item7') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item7 selected'; + } else { + this.message += '\n item7 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('item8') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item8 selected'; + } else { + this.message += '\n item8 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + } + .lanes( + { + minLength: this.lanesLength, + maxLength: this.lanesLength + }, + 10 + ) + .multiSelectable(this.listSelectableValue) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0080.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0080.ets new file mode 100644 index 00000000..6c2e2306 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0080.ets @@ -0,0 +1,463 @@ +/* + * 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 UIComponentListAndGridListMouse0080 { + @State name: string = 'UIComponentListAndGridListMouse0080'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State listSelectableValue: boolean = true; + @State itemSelectableValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItemGroup() { + ListItem() { + Text('group1-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_1') + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item1 selected'; + } else { + this.message += '\n group1-item1 unselected'; + } + }) + ListItem() { + Text('group1-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item2 selected'; + } else { + this.message += '\n group1-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group2-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group2-item1 selected'; + } else { + this.message += '\n group2-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group2-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group2-item2 selected'; + } else { + this.message += '\n group2-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group3-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group3-item1 selected'; + } else { + this.message += '\n group3-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group3-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group3-item2 selected'; + } else { + this.message += '\n group3-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group4-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group4-item1 selected'; + } else { + this.message += '\n group4-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group4-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group4-item2 selected'; + } else { + this.message += '\n group4-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + } + .multiSelectable(this.listSelectableValue) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0090.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0090.ets new file mode 100644 index 00000000..ad716aad --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0090.ets @@ -0,0 +1,404 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +class BasicDataSource_UIComponentListAndGridListMouse0090 implements IDataSource { + private listeners: DataChangeListener[] = []; + private originDataArray: string[] = []; + + public totalCount(): number { + return this.originDataArray.length; + } + + public getData(index: number): string { + return this.originDataArray[index]; + } + + // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听 + registerDataChangeListener(listener: DataChangeListener): void { + if (this.listeners.indexOf(listener) < 0) { + console.info('add listener'); + this.listeners.push(listener); + } + } + + // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听 + unregisterDataChangeListener(listener: DataChangeListener): void { + const pos = this.listeners.indexOf(listener); + if (pos >= 0) { + console.info('remove listener'); + this.listeners.splice(pos, 1); + } + } + + // 通知LazyForEach组件需要重载所有子组件 + notifyDataReload(): void { + this.listeners.forEach(listener => { + listener.onDataReloaded(); + }); + } + + // 通知LazyForEach组件需要在index对应索引处添加子组件 + notifyDataAdd(index: number): void { + this.listeners.forEach(listener => { + listener.onDataAdd(index); + // 写法2：listener.onDatasetChange([{type: DataOperationType.ADD, index: index}]); + }); + } + + // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件 + notifyDataChange(index: number): void { + this.listeners.forEach(listener => { + listener.onDataChange(index); + // 写法2：listener.onDatasetChange([{type: DataOperationType.CHANGE, index: index}]); + }); + } + + // 通知LazyForEach组件需要在index对应索引处删除该子组件 + notifyDataDelete(index: number): void { + this.listeners.forEach(listener => { + listener.onDataDelete(index); + // 写法2：listener.onDatasetChange([{type: DataOperationType.DELETE, index: index}]); + }); + } + + // 通知LazyForEach组件将from索引和to索引处的子组件进行交换 + notifyDataMove(from: number, to: number): void { + this.listeners.forEach(listener => { + listener.onDataMove(from, to); + // 写法2：listener.onDatasetChange( + // [{type: DataOperationType.EXCHANGE, index: {start: from, end: to}}]); + }); + } + + notifyDatasetChange(operations: DataOperation[]): void { + this.listeners.forEach(listener => { + listener.onDatasetChange(operations); + }); + } +} + + +class MyDataSource_UIComponentListAndGridListMouse0090 extends BasicDataSource_UIComponentListAndGridListMouse0090 { + private dataArray: string[] = []; + + public totalCount(): number { + return this.dataArray.length; + } + + public getData(index: number): string { + return this.dataArray[index]; + } + + public pushData(data: string): void { + this.dataArray.push(data); + this.notifyDataAdd(this.dataArray.length - 1); + } + + public deleteData(index: number): void { + this.dataArray.splice(index, 1); + this.notifyDataDelete(index); + } +} + + +@Entry +@Component +struct UIComponentListAndGridListMouse0090 { + @State name: string = 'UIComponentListAndGridListMouse0090'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + @State minSpaceValue: Length = 10; + @State maxSpaceValue: Length = 20; + @State conductivityValue: number = 0.5; + @State intensityValue: number = 0.5; + @State chainEdgeEffectValue: ChainEdgeEffect = ChainEdgeEffect.DEFAULT; + @State stiffnessValue: number = 228; + @State dampingValue: number = 30; + @State listSelectableValue: boolean = true; + @State itemSelectableValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + private data: MyDataSource_UIComponentListAndGridListMouse0090 = new MyDataSource_UIComponentListAndGridListMouse0090(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + this.data.pushData(`Hello ${i}`); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('删除末尾元素') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.numbers.pop(); + this.data.deleteData(this.data.totalCount() - 1); + }) + + Button('增加末尾元素') + .id(this.name + '_02') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.numbers.push(this.numbers.length); + this.data.pushData(`Hello ${this.data.totalCount()}`); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + LazyForEach(this.data, (item: string) => { + ListItem() { + Text(item) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .selectable(this.itemSelectableValue) + .id(this.name + '_03_' + item.toString()) + .width(this.itemWidth) + .height(this.itemHeight) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += `\n item ${item} selected`; + } else { + this.message += `\n item ${item} unselected`; + } + }) + }, (item: string) => item) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_03') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .chainAnimationOptions({ + minSpace: this.minSpaceValue, + maxSpace: this.maxSpaceValue, + conductivity: this.conductivityValue, + intensity: this.intensityValue, + edgeEffect: this.chainEdgeEffectValue, + stiffness: this.stiffnessValue, + damping: this.dampingValue + }) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("LazyForEach-List onItemMove"); + this.message += `\n LazyForEach-List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("LazyForEach-List onItemDragStart"); + this.message += `\n LazyForEach-List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("LazyForEach-List onItemDragEnter"); + this.message += `\n LazyForEach-List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("LazyForEach-List onItemDragLeave"); + this.message += `\n LazyForEach-List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("LazyForEach-List onItemDragMove"); + this.message += `\n LazyForEach-List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("LazyForEach-List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n LazyForEach-List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("LazyForEach-List onScrollVisibleContentChange"); + this.message += `\n LazyForEach-List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("LazyForEach-List onScrollFrameBegin"); + this.message += `\n LazyForEach-List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("LazyForEach-List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n LazyForEach-List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("LazyForEach-List onWillScroll"); + this.message += `\n LazyForEach-List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("LazyForEach-List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n LazyForEach-List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("LazyForEach-List onScrollFrameBegin"); + this.message += `\n LazyForEach-List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("LazyForEach-List onScrollStart"); + this.message += `\n LazyForEach-List onScrollStart`; + }) + .onScrollStop(() => { + console.info("LazyForEach-List onScrollStop"); + this.message += `\n LazyForEach-List onScrollStop`; + }) + .onReachStart(() => { + console.info("LazyForEach-List onReachStart"); + this.message += `\n LazyForEach-List onReachStart`; + }) + .onReachEnd(() => { + console.info("LazyForEach-List onReachEnd"); + this.message += `\n LazyForEach-List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_04') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} \ No newline at end of file diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0110.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0110.ets new file mode 100644 index 00000000..b530493f --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0110.ets @@ -0,0 +1,463 @@ +/* + * 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 UIComponentListAndGridListMouse0110 { + @State name: string = 'UIComponentListAndGridListMouse0110'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State listSelectableValue: boolean = true; + @State itemSelectableValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItemGroup() { + ListItem() { + Text('group1-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_1') + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item1 selected'; + } else { + this.message += '\n group1-item1 unselected'; + } + }) + ListItem() { + Text('group1-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item2 selected'; + } else { + this.message += '\n group1-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group2-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group2-item1 selected'; + } else { + this.message += '\n group2-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group2-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group2-item2 selected'; + } else { + this.message += '\n group2-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group3-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group3-item1 selected'; + } else { + this.message += '\n group3-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group3-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group3-item2 selected'; + } else { + this.message += '\n group3-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group4-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group4-item1 selected'; + } else { + this.message += '\n group4-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group4-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group4-item2 selected'; + } else { + this.message += '\n group4-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + } + .multiSelectable(this.listSelectableValue) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + -- Gitee From 53e460bb25bec5e59320ea857ac3d0a559dc687a Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 15 Aug 2025 18:04:27 +0800 Subject: [PATCH 3/4] add uicompare cases3 Signed-off-by: jinzhao --- .../UIComponentListAndGridListMouse0120.ets | 437 +++++++++++++++++ .../UIComponentListAndGridListMouse0130.ets | 446 +++++++++++++++++ .../UIComponentListAndGridListMouse0150.ets | 454 +++++++++++++++++ .../UIComponentListAndGridListMouse0160.ets | 463 ++++++++++++++++++ 4 files changed, 1800 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0120.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0130.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0150.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0160.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0120.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0120.ets new file mode 100644 index 00000000..523bfdc5 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0120.ets @@ -0,0 +1,437 @@ +/* + * 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 UIComponentListAndGridListMouse0120 { + @State name: string = 'UIComponentListAndGridListMouse0120'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State listSelectableValue: boolean = false; + @State itemSelectableValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItem() { + Text('item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_1') + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item1 selected'; + } else { + this.message += '\n item1 unselected'; + } + }) + ListItem() { + Text('item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item2 selected'; + } else { + this.message += '\n item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + + + ListItem() { + Text('item3') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item3 selected'; + } else { + this.message += '\n item3 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('item4') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item4 selected'; + } else { + this.message += '\n item4 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + + + ListItem() { + Text('item5') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item5 selected'; + } else { + this.message += '\n item5 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('item6') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item6 selected'; + } else { + this.message += '\n item6 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + + + ListItem() { + Text('item7') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item7 selected'; + } else { + this.message += '\n item7 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('item8') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item8 selected'; + } else { + this.message += '\n item8 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + } + .multiSelectable(this.listSelectableValue) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0130.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0130.ets new file mode 100644 index 00000000..f252ce67 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0130.ets @@ -0,0 +1,446 @@ +/* + * 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 UIComponentListAndGridListMouse0130 { + @State name: string = 'UIComponentListAndGridListMouse0130'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State listSelectableValue: boolean = true; + @State itemSelectableValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItem() { + Text('item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_1') + .enabled(false) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item1 selected'; + } else { + this.message += '\n item1 unselected'; + } + }) + ListItem() { + Text('item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item2 selected'; + } else { + this.message += '\n item2 unselected'; + } + }) + .enabled(false) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + + + ListItem() { + Text('item3') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item3 selected'; + } else { + this.message += '\n item3 unselected'; + } + }) + .enabled(false) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('item4') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item4 selected'; + } else { + this.message += '\n item4 unselected'; + } + }) + .enabled(false) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + + + ListItem() { + Text('item5') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item5 selected'; + } else { + this.message += '\n item5 unselected'; + } + }) + .enabled(false) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('item6') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item6 selected'; + } else { + this.message += '\n item6 unselected'; + } + }) + .enabled(false) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + + + ListItem() { + Text('item7') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item7 selected'; + } else { + this.message += '\n item7 unselected'; + } + }) + .enabled(false) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('item8') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item8 selected'; + } else { + this.message += '\n item8 unselected'; + } + }) + .enabled(false) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + } + .enabled(false) + .multiSelectable(this.listSelectableValue) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0150.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0150.ets new file mode 100644 index 00000000..37e570d0 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0150.ets @@ -0,0 +1,454 @@ +/* + * 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 UIComponentListAndGridListMouse0150 { + @State name: string = 'UIComponentListAndGridListMouse0150'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State listSelectableValue: boolean = true; + @State itemSelectableValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItem() { + Text('item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .draggable(false) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_1') + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .draggable(false) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item1 selected'; + } else { + this.message += '\n item1 unselected'; + } + }) + ListItem() { + Text('item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .draggable(false) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item2 selected'; + } else { + this.message += '\n item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .draggable(false) + + + + ListItem() { + Text('item3') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .draggable(false) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item3 selected'; + } else { + this.message += '\n item3 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .draggable(false) + ListItem() { + Text('item4') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .draggable(false) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item4 selected'; + } else { + this.message += '\n item4 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .draggable(false) + + + + ListItem() { + Text('item5') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .draggable(false) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item5 selected'; + } else { + this.message += '\n item5 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .draggable(false) + ListItem() { + Text('item6') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .draggable(false) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item6 selected'; + } else { + this.message += '\n item6 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .draggable(false) + + + + ListItem() { + Text('item7') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .draggable(false) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item7 selected'; + } else { + this.message += '\n item7 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .draggable(false) + ListItem() { + Text('item8') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .draggable(false) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item8 selected'; + } else { + this.message += '\n item8 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .draggable(false) + + } + .multiSelectable(this.listSelectableValue) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .draggable(false) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0160.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0160.ets new file mode 100644 index 00000000..7f0837b5 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0160.ets @@ -0,0 +1,463 @@ +/* + * 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 UIComponentListAndGridListMouse0160 { + @State name: string = 'UIComponentListAndGridListMouse0160'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State listSelectableValue: boolean = true; + @State itemSelectableValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItemGroup() { + ListItem() { + Text('group1-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_1') + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item1 selected'; + } else { + this.message += '\n group1-item1 unselected'; + } + }) + ListItem() { + Text('group1-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item2 selected'; + } else { + this.message += '\n group1-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group2-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group2-item1 selected'; + } else { + this.message += '\n group2-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group2-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group2-item2 selected'; + } else { + this.message += '\n group2-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group3-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group3-item1 selected'; + } else { + this.message += '\n group3-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group3-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group3-item2 selected'; + } else { + this.message += '\n group3-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group4-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group4-item1 selected'; + } else { + this.message += '\n group4-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group4-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group4-item2 selected'; + } else { + this.message += '\n group4-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + } + .multiSelectable(this.listSelectableValue) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + -- Gitee From c4b5b47dd0d7cf9f3c6c845febbc1de1a29ba2c9 Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 15 Aug 2025 18:04:39 +0800 Subject: [PATCH 4/4] add uicompare cases4 Signed-off-by: jinzhao --- .../UIComponentListAndGridListMouse0050.ets | 437 ++++++++++++++++++ 1 file changed, 437 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0050.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0050.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0050.ets new file mode 100644 index 00000000..f06e0dfb --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListMouse/UIComponentListAndGridListMouse0050.ets @@ -0,0 +1,437 @@ +/* + * 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 UIComponentListAndGridListMouse0050 { + @State name: string = 'UIComponentListAndGridListMouse0050'; + @State message: string = this.name + ' message:'; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State listSelectableValue: boolean = true; + @State itemSelectableValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItem() { + Text('item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_1') + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item1 selected'; + } else { + this.message += '\n item1 unselected'; + } + }) + ListItem() { + Text('item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_1_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item2 selected'; + } else { + this.message += '\n item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + + + ListItem() { + Text('item3') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item3 selected'; + } else { + this.message += '\n item3 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('item4') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_2_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item4 selected'; + } else { + this.message += '\n item4 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + + + ListItem() { + Text('item5') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item5 selected'; + } else { + this.message += '\n item5 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('item6') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_3_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item6 selected'; + } else { + this.message += '\n item6 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + + + ListItem() { + Text('item7') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_1') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item7 selected'; + } else { + this.message += '\n item7 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('item8') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .id(this.name + '_02_4_2') + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n item8 selected'; + } else { + this.message += '\n item8 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + + } + .multiSelectable(this.listSelectableValue) + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + -- Gitee