From 1671780c0aeb4bf9e55bec8962d8e040e8ef2acd Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 22 Aug 2025 15:46:11 +0800 Subject: [PATCH 1/4] add uicompare cases1 Signed-off-by: jinzhao --- ...AndGridListItemGroupScrollToIndex.test.ets | 339 +++++++++++ ...tAndGridListItemGroupScrollToIndex0250.ets | 572 +++++++++++++++++ ...tAndGridListItemGroupScrollToIndex0260.ets | 506 ++++++++++++++++ ...tAndGridListItemGroupScrollToIndex0270.ets | 573 ++++++++++++++++++ 4 files changed, 1990 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListItemGroupScrollToIndexTest/UIComponentListAndGridListItemGroupScrollToIndex.test.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0250.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0260.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0270.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListItemGroupScrollToIndexTest/UIComponentListAndGridListItemGroupScrollToIndex.test.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListItemGroupScrollToIndexTest/UIComponentListAndGridListItemGroupScrollToIndex.test.ets new file mode 100644 index 00000000..1b821ae0 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/test/UIComponentListAndGridListItemGroupScrollToIndexTest/UIComponentListAndGridListItemGroupScrollToIndex.test.ets @@ -0,0 +1,339 @@ + +/** + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect, Level } from '@ohos/hypium'; +import { BusinessError, commonEventManager } from '@kit.BasicServicesKit'; +import { Driver, ON ,Component, UiWindow } from '@kit.TestKit'; +import { uiAppearance } from '@kit.ArkUI'; +import Settings from '../model/Settings'; +import windowSnap from '../model/snapShot'; +import Logger from '../model/Logger'; +import Utils from '../model/Utils'; + + +let TAG = 'RunTimeTest'; + +function sleep(ms: number) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +export default function UIComponentListAndGridListItemGroupScrollToIndex() { + describe('UIComponentListAndGridListItemGroupScrollToIndex', () => { + 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_LISTITEMGROUP_SCROLLTOINDEX_0250 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0250 + * @tc.desc Single column List horizontal arrangement, set smooth to true, jump to specified index test + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0250', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0250'; + let pageName = "UIComponentListAndGridListItemGroupScrollToIndex0250"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0260 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0260 + * @tc.desc Single column List horizontal arrangement, set smooth to false, jump to specified index test + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0260', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0260'; + let pageName = "UIComponentListAndGridListItemGroupScrollToIndex0260"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0270 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0270 + * @tc.desc Single column List horizontal arrangement, do not set smooth, jump to specified index test + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0270', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0270'; + let pageName = "UIComponentListAndGridListItemGroupScrollToIndex0270"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0310 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0310 + * @tc.desc List#scroll#scroll_15 + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0310', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0310'; + let pageName = "UIComponentListAndGridListItemGroupScrollToIndex0310"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0430 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0430 + * @tc.desc Multi-column List vertical arrangement, set smooth to false, jump to specified index test + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0430', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0430'; + let pageName = "UIComponentListAndGridListItemGroupScrollToIndex0430"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0440 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0440 + * @tc.desc Multi-column List vertical arrangement, do not set smooth, jump to specified index test + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0440', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0440'; + let pageName = "UIComponentListAndGridListItemGroupScrollToIndex0440"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0470 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0470 + * @tc.desc List#scroll#scroll_10 + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0470', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0470'; + let pageName = "UIComponentListAndGridListItemGroupScrollToIndex0470"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0480 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0480 + * @tc.desc List#scroll#scroll_12 + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0480', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0480'; + let pageName = "UIComponentListAndGridListItemGroupScrollToIndex0480"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0490 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0490 + * @tc.desc List#scroll#scroll_11 + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0490', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0490'; + let pageName = "UIComponentListAndGridListItemGroupScrollToIndex0490"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0530 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0530 + * @tc.desc List#scroll#scroll_17 + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0530', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0530'; + let pageName = "UIComponentListAndGridListItemGroupScrollToIndex0530"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0590 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0590 + * @tc.desc Multi-column List horizontal arrangement, set smooth to true, jump to specified index test + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0590', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0590'; + let pageName = "UIComponentListAndGridListItemGroupScrollToIndex0590"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + /* + * @tc.number SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0600 + * @tc.name SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0600 + * @tc.desc Multi-column List horizontal arrangement, set smooth to false, jump to specified index test + * @tc.level 3 + */ + it('SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0600', Level.LEVEL3, async (done: Function) => { + TAG = 'SUB_ACE_UI_COMPONENT_LISTANDGRID_LISTITEMGROUP_SCROLLTOINDEX_0600'; + let pageName = "UIComponentListAndGridListItemGroupScrollToIndex0600"; + Logger.info(`[${TAG}]`, `Case start.`); + Settings.createWindow('testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/' + pageName); + let driver: Driver = Driver.create(); + let button: Component = await driver.waitForComponent(ON.id(pageName + '_01'), 1000); + let list: Component = await driver.waitForComponent(ON.id(pageName + '_02'), 1000); + await driver.waitForIdle(1000, 2000); + await button.click(); + await driver.waitForIdle(1000, 2000); + await windowSnap.snapShot(); + await Utils.sleep(1000); + Logger.info(`[${TAG}]`, `Case finish.`); + done(); + }) + + }) +} diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0250.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0250.ets new file mode 100644 index 00000000..ebaadb8e --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0250.ets @@ -0,0 +1,572 @@ +/* + * 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') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListItemGroupScrollToIndex0250 { + @State name: string = 'UIComponentListAndGridListItemGroupScrollToIndex0250'; + @State message: string = this.name + ' message:'; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Horizontal; + @State itemWidth: Length = 100; + @State itemHeight: Length = 200; + @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 smoothValue: boolean = true; + @State alignValue: ScrollAlign = ScrollAlign.START; + 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; + } + + aboutToAppear() { + 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('scrollToItemInGroup') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollToItemInGroup(1, 2, this.smoothValue); + }) + + 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) + ListItem() { + Text('group1-item3') + .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-item3 selected'; + } else { + this.message += '\n group1-item3 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) + ListItem() { + Text('group2-item3') + .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-item3 selected'; + } else { + this.message += '\n group2-item3 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) + ListItem() { + Text('group3-item3') + .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-item3 selected'; + } else { + this.message += '\n group3-item3 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) + ListItem() { + Text('group4-item3') + .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-item3 selected'; + } else { + this.message += '\n group4-item3 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()}`; + }) + .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"); + 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/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0260.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0260.ets new file mode 100644 index 00000000..e69d1f81 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0260.ets @@ -0,0 +1,506 @@ +/* + * 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') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListItemGroupScrollToIndex0260 { + @State name: string = 'UIComponentListAndGridListItemGroupScrollToIndex0260'; + @State message: string = this.name + ' message:'; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Horizontal; + @State itemWidth: Length = 100; + @State itemHeight: Length = 200; + @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 smoothValue: boolean = true; + @State alignValue: ScrollAlign = ScrollAlign.START; + @State targetGroupIndex: number = 0; + 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; + } + + aboutToAppear() { + 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 + }) + + Row() { + Button('Group 0') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(5) + .onClick(() => { + this.targetGroupIndex = 0; + this.listScroller.scrollToItemInGroup(0, 1, this.smoothValue); + }) + + Button('Group 1') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(5) + .onClick(() => { + this.targetGroupIndex = 1; + this.listScroller.scrollToItemInGroup(1, 2, this.smoothValue); + }) + + Button('Group 2') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(5) + .onClick(() => { + this.targetGroupIndex = 2; + this.listScroller.scrollToItemInGroup(2, 0, this.smoothValue); + }) + } + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItemGroup({ + headerComponent: this.GetHeader('Group0-Header'), + footerComponent: this.GetFooter('Group0-Footer') + }) { + ListItem() { + Text('group0-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 group0-item1 selected'; + } else { + this.message += '\n group0-item1 unselected'; + } + }) + ListItem() { + Text('group0-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 group0-item2 selected'; + } else { + this.message += '\n group0-item2 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group0-item3') + .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 group0-item3 selected'; + } else { + this.message += '\n group0-item3 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('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 + }) + } + .onSelect((isSelected: boolean) => { + if (isSelected) { + this.message += '\n group1-item1 selected'; + } else { + this.message += '\n group1-item1 unselected'; + } + }) + .selectable(this.itemSelectableValue) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group1-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .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) + ListItem() { + Text('group1-item3') + .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-item3 selected'; + } else { + this.message += '\n group1-item3 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) + ListItem() { + Text('group2-item3') + .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-item3 selected'; + } else { + this.message += '\n group2-item3 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()}`; + }) + .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"); + 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/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0270.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0270.ets new file mode 100644 index 00000000..bb35ecc0 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0270.ets @@ -0,0 +1,573 @@ +/* + * 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') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListItemGroupScrollToIndex0270 { + @State name: string = 'UIComponentListAndGridListItemGroupScrollToIndex0270'; + @State message: string = this.name + ' message:'; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Horizontal; + @State itemWidth: Length = 100; + @State itemHeight: Length = 200; + @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 smoothValue: boolean = true; + @State alignValue: ScrollAlign = ScrollAlign.START; + 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; + } + + aboutToAppear() { + 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('scrollToItemInGroup') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollToItemInGroup(1, 2); + }) + + 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) + ListItem() { + Text('group1-item3') + .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-item3 selected'; + } else { + this.message += '\n group1-item3 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) + ListItem() { + Text('group2-item3') + .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-item3 selected'; + } else { + this.message += '\n group2-item3 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) + ListItem() { + Text('group3-item3') + .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-item3 selected'; + } else { + this.message += '\n group3-item3 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) + ListItem() { + Text('group4-item3') + .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-item3 selected'; + } else { + this.message += '\n group4-item3 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()}`; + }) + .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"); + + 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 9f8b16c9ae1e531fd4c777e49e2e8c4538e155ac Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 22 Aug 2025 15:46:38 +0800 Subject: [PATCH 2/4] add uicompare cases2 Signed-off-by: jinzhao --- ...tAndGridListItemGroupScrollToIndex0440.ets | 577 ++++++++++++++++++ ...tAndGridListItemGroupScrollToIndex0470.ets | 577 ++++++++++++++++++ ...tAndGridListItemGroupScrollToIndex0480.ets | 577 ++++++++++++++++++ 3 files changed, 1731 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0440.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0470.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0480.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0440.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0440.ets new file mode 100644 index 00000000..dd08b9fa --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0440.ets @@ -0,0 +1,577 @@ +/* + * 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') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListItemGroupScrollToIndex0440 { + @State name: string = 'UIComponentListAndGridListItemGroupScrollToIndex0440'; + @State message: string = this.name + ' message:'; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 150; + @State itemHeight: Length = 200; + @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 smoothValue: boolean | undefined = undefined; + @State alignValue: ScrollAlign = ScrollAlign.END; + 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; + } + + aboutToAppear() { + 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('scrollToItemInGroup') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + try { + this.listScroller.scrollToItemInGroup(1, 2); + } catch (err) { + this.message += `\n scrollToItemInGroup error. err.code: ${err.code}, err.message: ${err.message}`; + } + }) + + 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) + ListItem() { + Text('group1-item3') + .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-item3 selected'; + } else { + this.message += '\n group1-item3 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) + ListItem() { + Text('group2-item3') + .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-item3 selected'; + } else { + this.message += '\n group2-item3 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) + ListItem() { + Text('group3-item3') + .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-item3 selected'; + } else { + this.message += '\n group3-item3 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) + ListItem() { + Text('group4-item3') + .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-item3 selected'; + } else { + this.message += '\n group4-item3 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) + .lanes(2, 10) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .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"); + 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/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0470.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0470.ets new file mode 100644 index 00000000..a8eb1c56 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0470.ets @@ -0,0 +1,577 @@ +/* + * 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') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListItemGroupScrollToIndex0470 { + @State name: string = 'UIComponentListAndGridListItemGroupScrollToIndex0470'; + @State message: string = this.name + ' message:'; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 150; + @State itemHeight: Length = 200; + @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 smoothValue: boolean | undefined = undefined; + @State alignValue: ScrollAlign = ScrollAlign.CENTER; + 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; + } + + aboutToAppear() { + 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('scrollToItemInGroup') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + try { + this.listScroller.scrollToItemInGroup(1, 2, this.smoothValue, this.alignValue); + } catch (err) { + this.message += `\n scrollToItemInGroup error. err.code: ${err.code}, err.message: ${err.message}`; + } + }) + + 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) + ListItem() { + Text('group1-item3') + .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-item3 selected'; + } else { + this.message += '\n group1-item3 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) + ListItem() { + Text('group2-item3') + .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-item3 selected'; + } else { + this.message += '\n group2-item3 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) + ListItem() { + Text('group3-item3') + .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-item3 selected'; + } else { + this.message += '\n group3-item3 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) + ListItem() { + Text('group4-item3') + .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-item3 selected'; + } else { + this.message += '\n group4-item3 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) + .lanes(2, 10) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .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"); + 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/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0480.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0480.ets new file mode 100644 index 00000000..85b577b9 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0480.ets @@ -0,0 +1,577 @@ +/* + * 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') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListItemGroupScrollToIndex0480 { + @State name: string = 'UIComponentListAndGridListItemGroupScrollToIndex0480'; + @State message: string = this.name + ' message:'; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 150; + @State itemHeight: Length = 200; + @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 smoothValue: boolean | undefined = undefined; + @State alignValue: ScrollAlign = ScrollAlign.END; + 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; + } + + aboutToAppear() { + 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('scrollToItemInGroup') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + try { + this.listScroller.scrollToItemInGroup(1, 2, this.smoothValue, this.alignValue); + } catch (err) { + this.message += `\n scrollToItemInGroup error. err.code: ${err.code}, err.message: ${err.message}`; + } + }) + + 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) + ListItem() { + Text('group1-item3') + .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-item3 selected'; + } else { + this.message += '\n group1-item3 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) + ListItem() { + Text('group2-item3') + .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-item3 selected'; + } else { + this.message += '\n group2-item3 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) + ListItem() { + Text('group3-item3') + .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-item3 selected'; + } else { + this.message += '\n group3-item3 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) + ListItem() { + Text('group4-item3') + .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-item3 selected'; + } else { + this.message += '\n group4-item3 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) + .lanes(2, 10) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .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"); + 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 f03163e009576e56e68f59fec0ff5630d801499b Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 22 Aug 2025 15:46:49 +0800 Subject: [PATCH 3/4] add uicompare cases3 Signed-off-by: jinzhao --- ...tAndGridListItemGroupScrollToIndex0310.ets | 577 ++++++++++++++++++ ...tAndGridListItemGroupScrollToIndex0430.ets | 577 ++++++++++++++++++ ...tAndGridListItemGroupScrollToIndex0490.ets | 577 ++++++++++++++++++ 3 files changed, 1731 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0310.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0430.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0490.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0310.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0310.ets new file mode 100644 index 00000000..f9c5ba13 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0310.ets @@ -0,0 +1,577 @@ +/* + * 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') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListItemGroupScrollToIndex0310 { + @State name: string = 'UIComponentListAndGridListItemGroupScrollToIndex0310'; + @State message: string = this.name + ' message:'; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 150; + @State itemHeight: Length = 200; + @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 smoothValue: boolean | undefined = undefined; + @State alignValue: ScrollAlign = ScrollAlign.END; + 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; + } + + aboutToAppear() { + 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('scrollToItemInGroup') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + try { + this.listScroller.scrollToItemInGroup(1, 2, this.smoothValue, this.alignValue); + } catch (err) { + this.message += `\n scrollToItemInGroup error. err.code: ${err.code}, err.message: ${err.message}`; + } + }) + + 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) + ListItem() { + Text('group1-item3') + .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-item3 selected'; + } else { + this.message += '\n group1-item3 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) + ListItem() { + Text('group2-item3') + .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-item3 selected'; + } else { + this.message += '\n group2-item3 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) + ListItem() { + Text('group3-item3') + .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-item3 selected'; + } else { + this.message += '\n group3-item3 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) + ListItem() { + Text('group4-item3') + .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-item3 selected'; + } else { + this.message += '\n group4-item3 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) + .lanes(2, 10) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .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"); + 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/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0430.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0430.ets new file mode 100644 index 00000000..ff488a59 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0430.ets @@ -0,0 +1,577 @@ +/* + * 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') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListItemGroupScrollToIndex0430 { + @State name: string = 'UIComponentListAndGridListItemGroupScrollToIndex0430'; + @State message: string = this.name + ' message:'; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 150; + @State itemHeight: Length = 200; + @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 smoothValue: boolean | undefined = false; + @State alignValue: ScrollAlign = ScrollAlign.END; + 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; + } + + aboutToAppear() { + 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('scrollToItemInGroup') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + try { + this.listScroller.scrollToItemInGroup(1, 2, this.smoothValue, this.alignValue); + } catch (err) { + this.message += `\n scrollToItemInGroup error. err.code: ${err.code}, err.message: ${err.message}`; + } + }) + + 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) + ListItem() { + Text('group1-item3') + .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-item3 selected'; + } else { + this.message += '\n group1-item3 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) + ListItem() { + Text('group2-item3') + .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-item3 selected'; + } else { + this.message += '\n group2-item3 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) + ListItem() { + Text('group3-item3') + .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-item3 selected'; + } else { + this.message += '\n group3-item3 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) + ListItem() { + Text('group4-item3') + .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-item3 selected'; + } else { + this.message += '\n group4-item3 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) + .lanes(2, 10) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .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"); + 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/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0490.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0490.ets new file mode 100644 index 00000000..e6ba96fc --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0490.ets @@ -0,0 +1,577 @@ +/* + * 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') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListItemGroupScrollToIndex0490 { + @State name: string = 'UIComponentListAndGridListItemGroupScrollToIndex0490'; + @State message: string = this.name + ' message:'; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 150; + @State itemHeight: Length = 200; + @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 smoothValue: boolean | undefined = undefined; + @State alignValue: ScrollAlign = ScrollAlign.END; + 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; + } + + aboutToAppear() { + 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('scrollToItemInGroup') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + try { + this.listScroller.scrollToItemInGroup(1, 2); + } catch (err) { + this.message += `\n scrollToItemInGroup error. err.code: ${err.code}, err.message: ${err.message}`; + } + }) + + 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) + ListItem() { + Text('group1-item3') + .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-item3 selected'; + } else { + this.message += '\n group1-item3 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) + ListItem() { + Text('group2-item3') + .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-item3 selected'; + } else { + this.message += '\n group2-item3 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) + ListItem() { + Text('group3-item3') + .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-item3 selected'; + } else { + this.message += '\n group3-item3 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) + ListItem() { + Text('group4-item3') + .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-item3 selected'; + } else { + this.message += '\n group4-item3 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) + .lanes(2, 10) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .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"); + 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 88f5fc68d72372c93fd7e4e9c17f6154d7681b6c Mon Sep 17 00:00:00 2001 From: jinzhao Date: Fri, 22 Aug 2025 15:47:02 +0800 Subject: [PATCH 4/4] add uicompare cases4 Signed-off-by: jinzhao --- ...tAndGridListItemGroupScrollToIndex0530.ets | 577 +++++++++++++++++ ...tAndGridListItemGroupScrollToIndex0590.ets | 579 ++++++++++++++++++ ...tAndGridListItemGroupScrollToIndex0600.ets | 578 +++++++++++++++++ 3 files changed, 1734 insertions(+) create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0530.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0590.ets create mode 100644 sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0600.ets diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0530.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0530.ets new file mode 100644 index 00000000..4c649f1d --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0530.ets @@ -0,0 +1,577 @@ +/* + * 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') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListItemGroupScrollToIndex0530 { + @State name: string = 'UIComponentListAndGridListItemGroupScrollToIndex0530'; + @State message: string = this.name + ' message:'; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 150; + @State itemHeight: Length = 200; + @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 smoothValue: boolean | undefined = undefined; + @State alignValue: ScrollAlign = ScrollAlign.END; + 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; + } + + aboutToAppear() { + 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('scrollToItemInGroup') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + try { + this.listScroller.scrollToItemInGroup(1, 2); + } catch (err) { + this.message += `\n scrollToItemInGroup error. err.code: ${err.code}, err.message: ${err.message}`; + } + }) + + 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) + ListItem() { + Text('group1-item3') + .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-item3 selected'; + } else { + this.message += '\n group1-item3 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) + ListItem() { + Text('group2-item3') + .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-item3 selected'; + } else { + this.message += '\n group2-item3 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) + ListItem() { + Text('group3-item3') + .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-item3 selected'; + } else { + this.message += '\n group3-item3 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) + ListItem() { + Text('group4-item3') + .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-item3 selected'; + } else { + this.message += '\n group4-item3 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) + .lanes(2, 10) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .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"); + 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/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0590.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0590.ets new file mode 100644 index 00000000..589372be --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0590.ets @@ -0,0 +1,579 @@ +/* + * 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') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListItemGroupScrollToIndex0590 { + @State name: string = 'UIComponentListAndGridListItemGroupScrollToIndex0590'; + @State message: string = this.name + ' message:'; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 150; + @State itemHeight: Length = 200; + @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 smoothValue: boolean | undefined = true; + @State alignValue: ScrollAlign = ScrollAlign.END; + 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; + } + + aboutToAppear() { + + 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('scrollToItemInGroup') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + try { + this.listScroller.scrollToItemInGroup(1, 2, this.smoothValue, this.alignValue); + } catch (err) { + this.message += `\n scrollToItemInGroup error. err.code: ${err.code}, err.message: ${err.message}`; + } + }) + + 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) + ListItem() { + Text('group1-item3') + .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-item3 selected'; + } else { + this.message += '\n group1-item3 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) + ListItem() { + Text('group2-item3') + .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-item3 selected'; + } else { + this.message += '\n group2-item3 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) + ListItem() { + Text('group3-item3') + .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-item3 selected'; + } else { + this.message += '\n group3-item3 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) + ListItem() { + Text('group4-item3') + .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-item3 selected'; + } else { + this.message += '\n group4-item3 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) + .lanes(2, 10) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .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"); + + 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/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0600.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0600.ets new file mode 100644 index 00000000..b6201d02 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListItemGroupScrollToIndex/UIComponentListAndGridListItemGroupScrollToIndex0600.ets @@ -0,0 +1,578 @@ +/* + * 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') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Builder +function itemFoot(params: FootBuilderParams) { + Text(params.text) + .fontSize(20) + .height('48vp') + .padding(10) + .backgroundColor($r('sys.color.background_tertiary')) +} + +@Entry +@Component +struct UIComponentListAndGridListItemGroupScrollToIndex0600 { + @State name: string = 'UIComponentListAndGridListItemGroupScrollToIndex0600'; + @State message: string = this.name + ' message:'; + + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 150; + @State itemHeight: Length = 200; + @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 smoothValue: boolean | undefined = false; + @State alignValue: ScrollAlign = ScrollAlign.END; + 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; + } + + aboutToAppear() { + 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('scrollToItemInGroup') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + try { + this.listScroller.scrollToItemInGroup(1, 2, this.smoothValue, this.alignValue); + } catch (err) { + this.message += `\n scrollToItemInGroup error. err.code: ${err.code}, err.message: ${err.message}`; + } + }) + + 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) + ListItem() { + Text('group1-item3') + .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-item3 selected'; + } else { + this.message += '\n group1-item3 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) + ListItem() { + Text('group2-item3') + .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-item3 selected'; + } else { + this.message += '\n group2-item3 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) + ListItem() { + Text('group3-item3') + .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-item3 selected'; + } else { + this.message += '\n group3-item3 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) + ListItem() { + Text('group4-item3') + .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-item3 selected'; + } else { + this.message += '\n group4-item3 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) + .lanes(2, 10) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .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"); + 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