diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0850.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0850.ets new file mode 100644 index 0000000000000000000000000000000000000000..caa83dd291c4e4a5ffc75338a9c2748e93c8e5c4 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0850.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0850 { + @State name: string = 'UIComponentListAndGridListInterface0850'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0860.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0860.ets new file mode 100644 index 0000000000000000000000000000000000000000..d085b2cff99e017a8f466c8d4945f43a30272582 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0860.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0860 { + @State name: string = 'UIComponentListAndGridListInterface0860'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0870.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0870.ets new file mode 100644 index 0000000000000000000000000000000000000000..b5eeddc0af34d15e637453790efb6acdec458ff4 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0870.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0870 { + @State name: string = 'UIComponentListAndGridListInterface0870'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Fade; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0880.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0880.ets new file mode 100644 index 0000000000000000000000000000000000000000..9ee47281ee52eef256d5cab4ae2c36cb1922791b --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0880.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0880 { + @State name: string = 'UIComponentListAndGridListInterface0880'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.None; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0890.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0890.ets new file mode 100644 index 0000000000000000000000000000000000000000..0536b0c3a235b5c8f64056e990a48d1f957f95bb --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0890.ets @@ -0,0 +1,332 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0890 { + @State name: string = 'UIComponentListAndGridListInterface0890'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Horizontal; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State itemAspectRatio: number = 2; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State listAspectRatio: number = 2; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State itemStyle: ListItemStyle = ListItemStyle.CARD; + @State groupStyle: ListItemGroupStyle = ListItemGroupStyle.CARD; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItem({ + style: this.itemStyle + }) { + Text('ListItem1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_1') + + ListItem({ + style: this.itemStyle + }) { + Text('ListItem2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_2') + + ListItemGroup({ + style: this.groupStyle + }) { + ListItem({ + style: this.itemStyle + }) { + Text('listItemGroup-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_3_1') + + ListItem({ + style: this.itemStyle + }) { + Text('listItemGroup-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_3_2') + } + .id(this.name + '_02_3') + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0910.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0910.ets new file mode 100644 index 0000000000000000000000000000000000000000..9d6e55d5547549a4a594a8ffdd90a9ae53916e13 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0910.ets @@ -0,0 +1,370 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0910 { + @State name: string = 'UIComponentListAndGridListInterface0910'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State itemAspectRatio: number = 2; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State listAspectRatio: number = 2; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + @State itemStyle: ListItemStyle = ListItemStyle.CARD; + @State groupStyle: ListItemGroupStyle = ListItemGroupStyle.CARD; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: 10, + scroller: this.listScroller + }) { + + ListItem({ + style: this.itemStyle + }) { + Text('ListItem1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_1') + + ListItem({ + style: this.itemStyle + }) { + Text('ListItem2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_2') + + ListItem({ + style: this.itemStyle + }) { + Text('ListItem3') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_3') + + ListItem({ + style: this.itemStyle + }) { + Text('ListItem4') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_4') + + ListItemGroup({ + style: this.groupStyle + }) { + ListItem({ + style: this.itemStyle + }) { + Text('listItemGroup-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_5_1') + + ListItem({ + style: this.itemStyle + }) { + Text('listItemGroup-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + .id(this.name + '_02_5_2') + } + .id(this.name + '_02_5') + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(EdgeEffect.Spring) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0940.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0940.ets new file mode 100644 index 0000000000000000000000000000000000000000..4f1e25453b5cd791beb4f23af853fb0d88bff43a --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0940.ets @@ -0,0 +1,263 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0940 { + @State name: string = 'UIComponentListAndGridListInterface0940'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + 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()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0950.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0950.ets new file mode 100644 index 0000000000000000000000000000000000000000..b3d7b50843fd48869e6c03fe6e9e518cc069e0b4 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0950.ets @@ -0,0 +1,263 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0950 { + @State name: string = 'UIComponentListAndGridListInterface0950'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Fade; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + 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()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0960.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0960.ets new file mode 100644 index 0000000000000000000000000000000000000000..c9f37a8c49e8c1e155dfc910877e7b21fdaf6de1 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface0960.ets @@ -0,0 +1,263 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface0960 { + @State name: string = 'UIComponentListAndGridListInterface0960'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.None; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .lanes( + { + minLength: 100, + maxLength: 150 + }, + 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()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1000.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1000.ets new file mode 100644 index 0000000000000000000000000000000000000000..bccc65d642a29654de900b37a19f8b2a3ac5c534 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1000.ets @@ -0,0 +1,257 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface1000 { + @State name: string = 'UIComponentListAndGridListInterface1000'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .edgeEffect(EdgeEffect.Fade) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1030.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1030.ets new file mode 100644 index 0000000000000000000000000000000000000000..4c4550a9035c6dd2b650d4cf6c0c6f08ae7ebed4 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1030.ets @@ -0,0 +1,403 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface1030 { + @State name: string = 'UIComponentListAndGridListInterface1030'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + + @State itemAspectRatio: number = 2; + @State listAspectRatio: number = 2; + @State groupStrokeWidth: Length = 'abc'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ListItemGroup() { + ListItem() { + Text('group1-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group1-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group2-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group2-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group3-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group3-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group4-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group4-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1070.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1070.ets new file mode 100644 index 0000000000000000000000000000000000000000..8198d497a3b53332bf3a4680351bb817ee273cf4 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1070.ets @@ -0,0 +1,401 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface1070 { + @State name: string = 'UIComponentListAndGridListInterface1070'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + @State itemAspectRatio: number = 2; + @State listAspectRatio: number = 2; + @State groupStrokeWidth: Length = '10px'; + @State groupStrokeColor: ResourceColor = Color.Red; + @State groupStartMargin: Length = 10; + @State groupEndMargin: Length = 20; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ListItemGroup() { + ListItem() { + Text('group1-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group1-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group2-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group2-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group3-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group3-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + + ListItemGroup() { + ListItem() { + Text('group4-item1') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + ListItem() { + Text('group4-item2') + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .aspectRatio(this.itemAspectRatio) + .width(this.itemWidth) + .height(this.itemHeight) + } + .divider({ + strokeWidth: this.groupStrokeWidth, + color: this.groupStrokeColor, + startMargin: this.groupStartMargin, + endMargin: this.groupEndMargin + }) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1180.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1180.ets new file mode 100644 index 0000000000000000000000000000000000000000..7925ea1d4e9d2ab4c7bcfdceb2a36d9a5e2ac3e7 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1180.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface1180 { + @State name: string = 'UIComponentListAndGridListInterface1180'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1260.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1260.ets new file mode 100644 index 0000000000000000000000000000000000000000..d50b1227fb634df1543a678e772635bffe765604 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1260.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface1260 { + @State name: string = 'UIComponentListAndGridListInterface1260'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1470.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1470.ets new file mode 100644 index 0000000000000000000000000000000000000000..3ed1baf26b0f8382b3cd456a69d7eb346f3f6b52 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1470.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface1470 { + @State name: string = 'UIComponentListAndGridListInterface1470'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.None; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 20; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1490.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1490.ets new file mode 100644 index 0000000000000000000000000000000000000000..e3144a158fcddf40d33a2428deed39bfb2f70f61 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1490.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface1490 { + @State name: string = 'UIComponentListAndGridListInterface1490'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 10; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} + diff --git a/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1520.ets b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1520.ets new file mode 100644 index 0000000000000000000000000000000000000000..cbb3b50c8148937ec6029cb0499b0b3a7838eea3 --- /dev/null +++ b/sample/ui_compare/uiCompareTest_03/entry/src/ohosTest/ets/testability/pages/UIComponentListAndGridListInterface/UIComponentListAndGridListInterface1520.ets @@ -0,0 +1,256 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct UIComponentListAndGridListInterface1520 { + @State name: string = 'UIComponentListAndGridListInterface1520'; + @State message: string = this.name; + @State numbers: number[] = []; + @State text: string = 'drag'; + @State listDirection: Axis = Axis.Vertical; + @State itemWidth: Length = 100; + @State itemHeight: Length = 50; + @State listWidth: Length = 400; + @State listHeight: Length = 300; + @State spaceValue: number | string = 10; + @State edgeEffectValue: EdgeEffect = EdgeEffect.Spring; + @State chainAnimationValue: boolean = true; + listScroller: ListScroller = new ListScroller(); + + @Builder pixelMapBuilder() { + Column() { + Text(this.text) + .width(40) + .height(80) + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + } + + changeIndex(index1: number, index2: number) { + let temp: number; + temp = this.numbers[index1]; + this.numbers[index1] = this.numbers[index2]; + this.numbers[index2] = temp; + } + + aboutToAppear() { + for (let i = 0; i < 4; i++) { + this.numbers.push(i); + } + } + + build() { + Column() { + Text(this.name) + .fontSize(20) + .fontColor(Color.Black) + .fontWeight(FontWeight.Medium) + .fontStyle(FontStyle.Italic) + .textAlign(TextAlign.Center) + .width('90%') + .height(50) + .border({ width: 1 }) + .lineHeight(20) + .maxLines(2) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + + Button('next page') + .id(this.name + '_01') + .borderRadius(20) + .backgroundColor(0x317aff) + .fontWeight(FontWeight.Bold) + .margin(10) + .labelStyle({ overflow: TextOverflow.Clip, + maxLines: 1, + minFontSize: 10, + maxFontSize: 20, + font: { + size: 14, + weight: FontWeight.Bolder, + family: 'cursive', + style: FontStyle.Italic + } + }) + .onClick(() => { + this.listScroller.scrollPage({ + next: true, + animation: true + }); + }) + + List({ + initialIndex: 0, + space: this.spaceValue, + scroller: this.listScroller + }) { + ForEach(this.numbers, (item: number) => { + ListItem() { + Text(item.toString()) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ + top: 10 + }) + } + .width(this.itemWidth) + .height(this.itemHeight) + }, (item: number) => item.toString()) + } + .alignListItem(ListItemAlign.Start) + .id(this.name + '_02') + .backToTop(true) + .friction(0.6) + .backgroundColor(Color.Grey) + .width(this.listWidth) + .height(this.listHeight) + .enableScrollInteraction(true) + .multiSelectable(false) + .edgeEffect(this.edgeEffectValue, {alwaysEnabled: true}) + .chainAnimation(this.chainAnimationValue) + .scrollBar(BarState.On) + .scrollBarColor(Color.Red) + .scrollBarWidth(4) + .listDirection(this.listDirection) + .margin({ + top: 10, + bottom: 10, + left: 5, + right: 5 + }) + .onItemMove((from: number, to: number) =>{ + console.info("List onItemMove"); + this.message += `\n List onItemMove, from: ${from.toString()}, to: ${to.toString()}`; + return true; + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragStart"); + this.message += `\n List onItemDragStart, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + this.text = this.numbers[itemIndex].toString(); + return this.pixelMapBuilder(); + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.info("List onItemDragEnter"); + this.message += `\n List onItemDragEnter, event: ${JSON.stringify(event)}`; + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.info("List onItemDragLeave"); + this.message += `\n List onItemDragLeave, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}`; + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.info("List onItemDragMove"); + this.message += `\n List onItemDragMove, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}`; + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + console.info("List onItemDrop"); + if (!isSuccess || insertIndex >= this.numbers.length) { + return; + } + this.changeIndex(itemIndex, insertIndex); + this.message += `\n List onItemDrop, event: ${JSON.stringify(event)}, itemIndex: ${itemIndex.toString()}, insertIndex: ${insertIndex.toString()}, isSuccess: ${isSuccess}`; + }) + .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => { + console.info("List onScrollVisibleContentChange"); + this.message += `\n List onScrollVisibleContentChange, start: ${JSON.stringify(start)}, end: ${JSON.stringify(end)}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollIndex((first: number, last: number) => { + console.info("List onScrollIndex"); + console.info(first.toString()); + console.info(last.toString()); + this.message += `\n List onScrollIndex, first: ${first.toString()}, last: ${last.toString()}`; + }) + .onWillScroll((scrollOffset: number, scrollState: ScrollState, scrollSource: ScrollSource) => { + console.info("List onWillScroll"); + this.message += `\n List onWillScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}, scrollSource: ${scrollSource.toString()}`; + }) + .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { + console.info("List onDidScroll"); + console.info(scrollOffset.toString()); + console.info(scrollState.toString()); + this.message += `\n List onDidScroll, scrollOffset: ${scrollOffset.toString()}, scrollState: ${scrollState.toString()}`; + }) + .onScrollFrameBegin((offset: number, state: ScrollState) => { + console.info("List onScrollFrameBegin"); + this.message += `\n List onScrollFrameBegin, offset: ${offset}, state: ${state}`; + return { offsetRemain: offset }; + }) + .onScrollStart(() => { + console.info("List onScrollStart"); + this.message += `\n List onScrollStart`; + }) + .onScrollStop(() => { + console.info("List onScrollStop"); + this.message += `\n List onScrollStop`; + }) + .onReachStart(() => { + console.info("List onReachStart"); + this.message += `\n List onReachStart`; + }) + .onReachEnd(() => { + console.info("List onReachEnd"); + this.message += `\n List onReachEnd`; + }) + + Scroll() { + Text(this.message) + .fontSize(10) + .fontColor(Color.Red) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + .margin({ + left: 6, + right: 6, + top: 10, + bottom: 10 + }) + } + .id(this.name + '_03') + .friction(0.6) + .backgroundColor(Color.Yellow) + .edgeEffect(EdgeEffect.Spring) + .width('90%') + .height(200) + .margin(10) + + } + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.Green) + .width('100%') + .height('100%') + + } + +} +