From 3c3560517debb9c918875f0769fb1705f04acc43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=9F=B3=E7=BA=A2=E6=9D=B0?= Date: Sat, 13 Sep 2025 18:01:49 +0800 Subject: [PATCH] add demo three MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 石红杰 --- .../src/main/ets/pages/List/ListIndex.ets | 57 ++++++++ .../List/ListItemGroup/ListItemGroupIndex.ets | 54 ++++++++ .../ListItemGroupModifierIndex.ets | 54 ++++++++ .../src/main/ets/pages/List/ListMainPage.ets | 5 +- .../src/main/ets/pages/Scroll/ScrollIndex.ets | 52 +++++++ .../main/ets/pages/Scroll/ScrollMainPage.ets | 8 +- .../ScrollModifier/ScrollModifierIndex.ets | 52 +++++++ .../pages/Scroll/ScrollModifier/friction.ets | 76 +++++++++++ .../ScrollModifier/initialOffsetXOffset.ets | 94 +++++++++++++ .../ScrollModifier/initialOffsetYOffset.ets | 94 +++++++++++++ .../Scroll/ScrollModifier/scrollSnap.ets | 67 +++++++++ .../src/main/ets/pages/grid/GridIndex.ets | 51 +++++++ .../src/main/ets/pages/grid/GridMainPage.ets | 4 +- .../main/ets/pages/grid/GridModifierIndex.ets | 51 +++++++ .../main/ets/pages/refresh/RefreshIndex.ets | 51 +++++++ .../ets/pages/refresh/RefreshMainPage.ets | 3 +- .../ets/pages/waterflow/WaterFlowMainPage.ets | 4 + .../waterflow/demo01/waterFlowFriction.ets | 71 ++++++++++ .../ets/pages/waterflow/waterFlowIndex.ets | 51 +++++++ .../waterFlowModifier/WaterFlowDataSource.ets | 127 ++++++++++++++++++ .../waterFlowFrictionModifier.ets | 81 +++++++++++ .../waterFlowModifierIndex.ets | 51 +++++++ .../resources/base/profile/main_pages.json | 16 +++ 23 files changed, 1170 insertions(+), 4 deletions(-) create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListIndex.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListItemGroup/ListItemGroupIndex.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListItemGroupModifier/ListItemGroupModifierIndex.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollIndex.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/ScrollModifierIndex.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/friction.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/initialOffsetXOffset.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/initialOffsetYOffset.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/scrollSnap.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/grid/GridIndex.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/grid/GridModifierIndex.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/refresh/RefreshIndex.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/demo01/waterFlowFriction.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowIndex.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowModifier/WaterFlowDataSource.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowModifier/waterFlowFrictionModifier.ets create mode 100644 examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowModifier/waterFlowModifierIndex.ets diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListIndex.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListIndex.ets new file mode 100644 index 00000000000..578f2a02e7d --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListIndex.ets @@ -0,0 +1,57 @@ +import router from '@ohos.router'; + +interface routerInfo { + url: string; + info: string; +} + +let routerData: routerInfo[] = [ + { url: 'pages/List/dividerColor', info: 'divider_Color' }, + { url: 'pages/List/dividerEndMargin', info: 'divider_EndMargin' }, + { url: 'pages/List/dividerStartMargin', info: 'divider_StartMargin' }, + { url: 'pages/List/dividerStrokeWidth', info: 'divider_StrokeWidth' }, + { url: 'pages/List/friction', info: 'friction' }, + { url: 'pages/List/lanesMaxLength', info: 'lanes_MaxLength' }, + { url: 'pages/List/lanesMinLength', info: 'lanes_MinLength' } +] + +@Entry +@Component +struct Index { + listScroller: Scroller = new Scroller(); + + build() { + Column({ space: 10 }) { + List({ space: 10, scroller: this.listScroller }) { + ForEach(routerData, (item: routerInfo) => { + ListItem() { + Text(item.info) + .width('100%') + .height('120vp') + .fontSize('15vp') + .backgroundColor('#ffb6c1') + + .borderRadius(10) + .textAlign(TextAlign.Center) + .onClick(() => { + router.pushUrl({ + url: item.url + }) + }) + } + }) + } + .width('90%') + .height('100%') + .scrollBar(BarState.Off) + .friction(0.6) + .divider({ + strokeWidth: 2, + color: 0xFFFFFF, + startMargin: 20, + endMargin: 20 + }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring + }.width('100%').height('100%').padding({ top: 5 }) + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListItemGroup/ListItemGroupIndex.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListItemGroup/ListItemGroupIndex.ets new file mode 100644 index 00000000000..e6112c51f0c --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListItemGroup/ListItemGroupIndex.ets @@ -0,0 +1,54 @@ +import router from '@ohos.router'; + +interface routerInfo { + url: string; + info: string; +} + +let routerData: routerInfo[] = [ + { url: 'pages/List/ListItemGroup/dividerColor', info: 'divider_Color' }, + { url: 'pages/List/ListItemGroup/dividerEndMargin', info: 'divider_EndMargin' }, + { url: 'pages/List/ListItemGroup/dividerStartMargin', info: 'divider_StartMargin' }, + { url: 'pages/List/ListItemGroup/dividerStrokeWidth', info: 'divider_StrokeWidth' }, +] + +@Entry +@Component +struct Index { + listScroller: Scroller = new Scroller(); + + build() { + Column({ space: 10 }) { + List({ space: 10, scroller: this.listScroller }) { + ForEach(routerData, (item: routerInfo) => { + ListItem() { + Text(item.info) + .width('100%') + .height('120vp') + .fontSize('15vp') + .backgroundColor('#ffb6c1') + + .borderRadius(10) + .textAlign(TextAlign.Center) + .onClick(() => { + router.pushUrl({ + url: item.url + }) + }) + } + }) + } + .width('90%') + .height('100%') + .scrollBar(BarState.Off) + .friction(0.6) + .divider({ + strokeWidth: 2, + color: 0xFFFFFF, + startMargin: 20, + endMargin: 20 + }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring + }.width('100%').height('100%').padding({ top: 5 }) + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListItemGroupModifier/ListItemGroupModifierIndex.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListItemGroupModifier/ListItemGroupModifierIndex.ets new file mode 100644 index 00000000000..d9f32a69c3a --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListItemGroupModifier/ListItemGroupModifierIndex.ets @@ -0,0 +1,54 @@ +import router from '@ohos.router'; + +interface routerInfo { + url: string; + info: string; +} + +let routerData: routerInfo[] = [ + { url: 'pages/List/ListItemGroupModifier/dividerColor', info: 'divider_Color' }, + { url: 'pages/List/ListItemGroupModifier/dividerEndMargin', info: 'divider_EndMargin' }, + { url: 'pages/List/ListItemGroupModifier/dividerStartMargin', info: 'divider_StartMargin' }, + { url: 'pages/List/ListItemGroupModifier/dividerStrokeWidth', info: 'divider_StrokeWidth' }, +] + +@Entry +@Component +struct Index { + listScroller: Scroller = new Scroller(); + + build() { + Column({ space: 10 }) { + List({ space: 10, scroller: this.listScroller }) { + ForEach(routerData, (item: routerInfo) => { + ListItem() { + Text(item.info) + .width('100%') + .height('120vp') + .fontSize('15vp') + .backgroundColor('#ffb6c1') + + .borderRadius(10) + .textAlign(TextAlign.Center) + .onClick(() => { + router.pushUrl({ + url: item.url + }) + }) + } + }) + } + .width('90%') + .height('100%') + .scrollBar(BarState.Off) + .friction(0.6) + .divider({ + strokeWidth: 2, + color: 0xFFFFFF, + startMargin: 20, + endMargin: 20 + }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring + }.width('100%').height('100%').padding({ top: 5 }) + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListMainPage.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListMainPage.ets index d4ea5efecd5..aa78be6d944 100644 --- a/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListMainPage.ets +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/List/ListMainPage.ets @@ -76,7 +76,10 @@ struct IndexPage { new TextList(42, 'dividerStrokeWidth(ListModifier)', 'pages/List/ListModifier/dividerStrokeWidth'), new TextList(43, 'friction(ListModifier)', 'pages/List/ListModifier/friction'), new TextList(44, 'lanesMaxLength(ListModifier)', 'pages/List/ListModifier/lanesMaxLength'), - new TextList(45, 'lanesMinLength(ListModifier)', 'pages/List/ListModifier/lanesMinLength') + new TextList(45, 'lanesMinLength(ListModifier)', 'pages/List/ListModifier/lanesMinLength'), + new TextList(46, 'ListItemGroupModifierIndex', 'pages/List/ListItemGroupModifier/ListItemGroupModifierIndex'), + new TextList(47, 'ListItemGroupIndex', 'pages/List/ListItemGroup/ListItemGroupIndex'), + new TextList(48, 'ListIndex', 'pages/List/ListIndex') ] @State fontSize: Resource | undefined = undefined build() { diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollIndex.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollIndex.ets new file mode 100644 index 00000000000..d447d88e5c4 --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollIndex.ets @@ -0,0 +1,52 @@ +import router from '@ohos.router'; + +interface routerInfo { + url: string; + info: string; +} + +let routerData: routerInfo[] = [ + { url: 'pages/Scroll/friction', info: 'friction' }, + { url: 'pages/Scroll/scrollSnap', info: 'scrollSnap' }, +] + +@Entry +@Component +struct Index { + listScroller: Scroller = new Scroller(); + + build() { + Column({ space: 10 }) { + List({ space: 10, scroller: this.listScroller }) { + ForEach(routerData, (item: routerInfo) => { + ListItem() { + Text(item.info) + .width('100%') + .height('120vp') + .fontSize('15vp') + .backgroundColor('#ffb6c1') + + .borderRadius(10) + .textAlign(TextAlign.Center) + .onClick(() => { + router.pushUrl({ + url: item.url + }) + }) + } + }) + } + .width('90%') + .height('100%') + .scrollBar(BarState.Off) + .friction(0.6) + .divider({ + strokeWidth: 2, + color: 0xFFFFFF, + startMargin: 20, + endMargin: 20 + }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring + }.width('100%').height('100%').padding({ top: 5 }) + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollMainPage.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollMainPage.ets index cac2ebf1e08..ab66ccae5f4 100644 --- a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollMainPage.ets +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollMainPage.ets @@ -47,7 +47,13 @@ struct IndexPage { new TextList(13, 'friction', 'pages/Scroll/friction'), new TextList(14, 'initialOffsetXOffset', 'pages/Scroll/initialOffsetXOffset'), new TextList(15, 'initialOffsetYOffset', 'pages/Scroll/initialOffsetYOffset'), - new TextList(16, 'scrollSnap', 'pages/Scroll/scrollSnap') + new TextList(16, 'scrollSnap', 'pages/Scroll/scrollSnap'), + new TextList(17, 'friction(ScrollModifier)', 'pages/Scroll/ScrollModifier/friction'), + new TextList(18, 'initialOffsetXOffset(ScrollModifier)', 'pages/Scroll/ScrollModifier/initialOffsetXOffset'), + new TextList(19, 'initialOffsetYOffset(ScrollModifier)', 'pages/Scroll/ScrollModifier/initialOffsetYOffset'), + new TextList(20, 'scrollSnap(ScrollModifier)', 'pages/Scroll/ScrollModifier/scrollSnap'), + new TextList(21, 'ScrollIndex', 'pages/Scroll/ScrollIndex'), + new TextList(22, 'ScrollModifierIndex', 'pages/Scroll/ScrollModifier/ScrollModifierIndex') ] @State fontSize: Resource | undefined = undefined build() { diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/ScrollModifierIndex.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/ScrollModifierIndex.ets new file mode 100644 index 00000000000..d8eafd1be30 --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/ScrollModifierIndex.ets @@ -0,0 +1,52 @@ +import router from '@ohos.router'; + +interface routerInfo { + url: string; + info: string; +} + +let routerData: routerInfo[] = [ + { url: 'pages/Scroll/ScrollModifier/friction', info: 'Scroll/ScrollModifier/friction' }, + { url: 'pages/Scroll/ScrollModifier/scrollSnap', info: 'Scroll/ScrollModifier/scrollSnap' }, +] + +@Entry +@Component +struct Index { + listScroller: Scroller = new Scroller(); + + build() { + Column({ space: 10 }) { + List({ space: 10, scroller: this.listScroller }) { + ForEach(routerData, (item: routerInfo) => { + ListItem() { + Text(item.info) + .width('100%') + .height('120vp') + .fontSize('15vp') + .backgroundColor('#ffb6c1') + + .borderRadius(10) + .textAlign(TextAlign.Center) + .onClick(() => { + router.pushUrl({ + url: item.url + }) + }) + } + }) + } + .width('90%') + .height('100%') + .scrollBar(BarState.Off) + .friction(0.6) + .divider({ + strokeWidth: 2, + color: 0xFFFFFF, + startMargin: 20, + endMargin: 20 + }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring + }.width('100%').height('100%').padding({ top: 5 }) + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/friction.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/friction.ets new file mode 100644 index 00000000000..40860d85b27 --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/friction.ets @@ -0,0 +1,76 @@ +import { LengthMetrics, ScrollModifier } from '@kit.ArkUI'; +import { common, ConfigurationConstant } from '@kit.AbilityKit'; + +class CustomModifier1 implements AttributeModifier { + public changeIndex: number = 0; + public changeList: (number | Resource | undefined | null)[] = [ + 99, 11, 0.9, 99, undefined, + 99, null, 11, 0.1, 99, -99 + ]; + + applyNormalAttribute(instance: ScrollAttribute): void { + instance.friction(this.changeList[this.changeIndex]); + } +} + +@Entry +@Component +struct NestedScroll1 { + @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。 + private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; + private scrollerForScroll: Scroller = new Scroller(); + private scrollerForList: Scroller = new Scroller(); + @State isDark: boolean = false; + @State context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext; + @State vOutSetValueTwo: number = 40; + @State changeIndex: number = 0; + @State modifier1: CustomModifier1 = new CustomModifier1(); + scroller: Scroller = new Scroller(); + + build() { + Stack({ alignContent: Alignment.TopStart }) { + + Scroll(this.scroller) { + Column() { + ForEach(this.arr, (item: number) => { + Text(item.toString()) + .width('90%') + .height(150) + .backgroundColor(0xFFFFFF) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ top: 10 }) + }, (item: string) => item) + }.width('100%') + } + .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 + .scrollBar(BarState.On) // 滚动条常驻显示 + .scrollBarColor(Color.Gray) // 滚动条颜色 + .scrollBarWidth(10) // 滚动条宽度 + .attributeModifier(this.modifier1 as CustomModifier1) + .edgeEffect(EdgeEffect.None) + .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => { + console.info(xOffset + ' ' + yOffset); + }) + .onScrollEdge((side: Edge) => { + console.info('To the edge'); + }) + .onScrollStop(() => { + console.info('Scroll Stop'); + }) + + Column() { + Button('切换数值') + .onClick(() => { + this.modifier1.changeIndex++ + if (this.modifier1.changeIndex > this.modifier1.changeList.length - 1) { + this.modifier1.changeIndex = 0; + } + }) + Text('Index' + this.modifier1.changeIndex + '数值' + this.modifier1.changeList[this.modifier1.changeIndex]) + .fontColor(Color.Blue) + } + }.width('100%').height('100%').backgroundColor(0xDCDCDC) + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/initialOffsetXOffset.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/initialOffsetXOffset.ets new file mode 100644 index 00000000000..9a166efff05 --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/initialOffsetXOffset.ets @@ -0,0 +1,94 @@ +import { LengthMetrics, ScrollModifier } from '@kit.ArkUI'; +import { common, ConfigurationConstant } from '@kit.AbilityKit'; + +class CustomModifier extends ScrollModifier { + applyNormalAttribute(instance: ScrollModifier): void { + super.applyNormalAttribute?.(instance); + } +} + +@Entry +@Component +struct NestedScroll11 { + @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。 + private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + private scrollerForScroll: Scroller = new Scroller(); + private scrollerForList: Scroller = new Scroller(); + @State isDark: boolean = false; + @State context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext; + @State vOutSetValueTwo: number = 40; + @State modifier: ScrollModifier = new CustomModifier() + .initialOffset({ + xOffset: 20, +}) + + build() { + Flex() { + + Button('深浅色') + .onClick(() => { + if (this.isDark) { + this.isDark = false; + this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT); + } else { + this.isDark = true; + this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK); + } + }) + Scroll(this.scrollerForScroll) { + Column() { + Text('Scroll Area') + .width('100%') + .height('40%') + .backgroundColor(0X330000FF) + .fontSize(16) + .textAlign(TextAlign.Center) + .onClick(() => { + this.scrollerForList.scrollToIndex(5, false, ScrollAlign.START, { extraOffset: LengthMetrics.vp(5) }); + }) + + List({ space: 20, scroller: this.scrollerForList }) { + ForEach(this.arr, (item: number) => { + ListItem() { + Text('ListItem' + item) + .width('100%') + .height('100%') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.width('100%').height(100) + }, (item: string) => item) + } + .width('100%') + .height('50%') + .edgeEffect(EdgeEffect.None) + .friction(0.6) + .onReachStart(() => { + this.listPosition = 0; + }) + .onReachEnd(() => { + this.listPosition = 2; + }) + .onScrollFrameBegin((offset: number) => { + if ((this.listPosition == 0 && offset <= 0) || (this.listPosition == 2 && offset >= 0)) { + this.scrollerForScroll.scrollBy(0, offset); + return { offsetRemain: 0 }; + } + this.listPosition = 1; + return { offsetRemain: offset }; + }) + + Text('Scroll Area') + .width('100%') + .height('40%') + .backgroundColor(0X330000FF) + .fontSize(16) + .textAlign(TextAlign.Center) + } + } + .attributeModifier(this.modifier as CustomModifier) + .width('100%').height('100%') + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20) + } +} diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/initialOffsetYOffset.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/initialOffsetYOffset.ets new file mode 100644 index 00000000000..eaa77920184 --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/initialOffsetYOffset.ets @@ -0,0 +1,94 @@ +import { LengthMetrics, ScrollModifier } from '@kit.ArkUI'; +import { common, ConfigurationConstant } from '@kit.AbilityKit'; + +class CustomModifier extends ScrollModifier { + applyNormalAttribute(instance: ScrollModifier): void { + super.applyNormalAttribute?.(instance); + } +} + +@Entry +@Component +struct NestedScroll11 { + @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。 + private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + private scrollerForScroll: Scroller = new Scroller(); + private scrollerForList: Scroller = new Scroller(); + @State isDark: boolean = false; + @State context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext; + @State vOutSetValueTwo: number = 40; + @State modifier: ScrollModifier = new CustomModifier() + .initialOffset({ + yOffset: 40, +}) + + build() { + Flex() { + + Button('深浅色') + .onClick(() => { + if (this.isDark) { + this.isDark = false; + this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT); + } else { + this.isDark = true; + this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK); + } + }) + Scroll(this.scrollerForScroll) { + Column() { + Text('Scroll Area') + .width('100%') + .height('40%') + .backgroundColor(0X330000FF) + .fontSize(16) + .textAlign(TextAlign.Center) + .onClick(() => { + this.scrollerForList.scrollToIndex(5, false, ScrollAlign.START, { extraOffset: LengthMetrics.vp(5) }); + }) + + List({ space: 20, scroller: this.scrollerForList }) { + ForEach(this.arr, (item: number) => { + ListItem() { + Text('ListItem' + item) + .width('100%') + .height('100%') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.width('100%').height(100) + }, (item: string) => item) + } + .width('100%') + .height('50%') + .edgeEffect(EdgeEffect.None) + .friction(0.6) + .onReachStart(() => { + this.listPosition = 0; + }) + .onReachEnd(() => { + this.listPosition = 2; + }) + .onScrollFrameBegin((offset: number) => { + if ((this.listPosition == 0 && offset <= 0) || (this.listPosition == 2 && offset >= 0)) { + this.scrollerForScroll.scrollBy(0, offset); + return { offsetRemain: 0 }; + } + this.listPosition = 1; + return { offsetRemain: offset }; + }) + + Text('Scroll Area') + .width('100%') + .height('40%') + .backgroundColor(0X330000FF) + .fontSize(16) + .textAlign(TextAlign.Center) + } + } + .attributeModifier(this.modifier as CustomModifier) + .width('100%').height('100%') + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20) + } +} diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/scrollSnap.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/scrollSnap.ets new file mode 100644 index 00000000000..c996c6707da --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/Scroll/ScrollModifier/scrollSnap.ets @@ -0,0 +1,67 @@ +import { common } from '@kit.AbilityKit'; + +class CustomModifier1 implements AttributeModifier { + public changeIndex: number = 0; + public changeList: (number | Resource | undefined | null)[] = [ + 200, 330, undefined, 200, null, + 200, 60, 200, -900 + ]; + + applyNormalAttribute(instance: ScrollAttribute): void { + instance.scrollSnap({ + snapAlign: ScrollSnapAlign.START, + snapPagination: this.changeList[this.changeIndex], + enableSnapToStart: true, + enableSnapToEnd: true + }); + } +} + +@Entry +@Component +struct NestedScroll11 { + @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。 + private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]; + private scrollerForScroll: Scroller = new Scroller(); + private scrollerForList: Scroller = new Scroller(); + @State isDark: boolean = false; + @State context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext; + @State vOutSetValueTwo: number = 40; + @State modifier1: CustomModifier1 = new CustomModifier1(); + scroller: Scroller = new Scroller; + + build() { + Scroll(this.scroller) { + + Column() { + Column() { + Button('切换数值') + .onClick(() => { + this.modifier1.changeIndex++ + if (this.modifier1.changeIndex > this.modifier1.changeList.length - 1) { + this.modifier1.changeIndex = 0 + } + }) + Text('Index' + this.modifier1.changeIndex + '数值' + this.modifier1.changeList[this.modifier1.changeIndex]) + .fontColor(Color.Blue) + } + + ForEach(this.arr, (item: number) => { + Text(item.toString()) + .width('90%') + .height(200) + .backgroundColor(0xFFFFFF) + .borderWidth(1) + .borderColor(Color.Black) + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + }, (item: string) => item) + }.width('100%').backgroundColor(0xDCDCDC) + } + .backgroundColor(Color.Yellow) + .height('100%') + .edgeEffect(EdgeEffect.Spring) + .attributeModifier(this.modifier1 as CustomModifier1) + } +} diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/grid/GridIndex.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/grid/GridIndex.ets new file mode 100644 index 00000000000..2923f4a8b1e --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/grid/GridIndex.ets @@ -0,0 +1,51 @@ +import router from '@ohos.router'; + +interface routerInfo { + url: string; + info: string; +} + +let routerData: routerInfo[] = [ + { url: 'pages/Grid/friction/friction', info: 'friction' }, +] + +@Entry +@Component +struct Index { + listScroller: Scroller = new Scroller(); + + build() { + Column({ space: 10 }) { + List({ space: 10, scroller: this.listScroller }) { + ForEach(routerData, (item: routerInfo) => { + ListItem() { + Text(item.info) + .width('100%') + .height('120vp') + .fontSize('15vp') + .backgroundColor('#ffb6c1') + + .borderRadius(10) + .textAlign(TextAlign.Center) + .onClick(() => { + router.pushUrl({ + url: item.url + }) + }) + } + }) + } + .width('90%') + .height('100%') + .scrollBar(BarState.Off) + .friction(0.6) + .divider({ + strokeWidth: 2, + color: 0xFFFFFF, + startMargin: 20, + endMargin: 20 + }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring + }.width('100%').height('100%').padding({ top: 5 }) + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/grid/GridMainPage.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/grid/GridMainPage.ets index 3f750ca8750..1ed84c02d80 100644 --- a/examples/ScrollableComponentTest/entry/src/main/ets/pages/grid/GridMainPage.ets +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/grid/GridMainPage.ets @@ -49,7 +49,9 @@ struct WaterFlowMainPage { new TextList(15, 'GridDemo002', 'pages/grid/st/GridDemo002'), new TextList(16, 'GridDemo006', 'pages/grid/st/GridDemo006'), new TextList(17, 'LazyVGridSample', 'pages/grid/st/LazyVGridSample'), - new TextList(18, 'NestedScroll001', 'pages/grid/st/NestedScroll001') + new TextList(18, 'NestedScroll001', 'pages/grid/st/NestedScroll001'), + new TextList(19, 'GridIndex', 'pages/grid/GridIndex'), + new TextList(20, 'GridModifierIndex', 'pages/grid/GridModifierIndex') ] @State fontSize: Resource | undefined = undefined diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/grid/GridModifierIndex.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/grid/GridModifierIndex.ets new file mode 100644 index 00000000000..381d9068fca --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/grid/GridModifierIndex.ets @@ -0,0 +1,51 @@ +import router from '@ohos.router'; + +interface routerInfo { + url: string; + info: string; +} + +let routerData: routerInfo[] = [ + { url: 'pages/friction/friction', info: 'friction' } +] + +@Entry +@Component +struct Index { + listScroller: Scroller = new Scroller(); + + build() { + Column({ space: 10 }) { + List({ space: 10, scroller: this.listScroller }) { + ForEach(routerData, (item: routerInfo) => { + ListItem() { + Text(item.info) + .width('100%') + .height('120vp') + .fontSize('15vp') + .backgroundColor('#ffb6c1') + + .borderRadius(10) + .textAlign(TextAlign.Center) + .onClick(() => { + router.pushUrl({ + url: item.url + }) + }) + } + }) + } + .width('90%') + .height('100%') + .scrollBar(BarState.Off) + .friction(0.6) + .divider({ + strokeWidth: 2, + color: 0xFFFFFF, + startMargin: 20, + endMargin: 20 + }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring + }.width('100%').height('100%').padding({ top: 5 }) + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/refresh/RefreshIndex.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/refresh/RefreshIndex.ets new file mode 100644 index 00000000000..604e704a3d5 --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/refresh/RefreshIndex.ets @@ -0,0 +1,51 @@ +import router from '@ohos.router'; + +interface routerInfo { + url: string; + info: string; +} + +let routerData: routerInfo[] = [ + { url: 'pages/refresh/RefreshPromptText', info: 'PromptText' }, +] + +@Entry +@Component +struct Index { + listScroller: Scroller = new Scroller(); + + build() { + Column({ space: 10 }) { + List({ space: 10, scroller: this.listScroller }) { + ForEach(routerData, (item: routerInfo) => { + ListItem() { + Text(item.info) + .width('100%') + .height('120vp') + .fontSize('15vp') + .backgroundColor('#ffb6c1') + + .borderRadius(10) + .textAlign(TextAlign.Center) + .onClick(() => { + router.pushUrl({ + url: item.url + }) + }) + } + }) + } + .width('90%') + .height('100%') + .scrollBar(BarState.Off) + .friction(0.6) + .divider({ + strokeWidth: 2, + color: 0xFFFFFF, + startMargin: 20, + endMargin: 20 + }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring + }.width('100%').height('100%').padding({ top: 5 }) + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/refresh/RefreshMainPage.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/refresh/RefreshMainPage.ets index 2e232af3b4c..1196a4ee609 100644 --- a/examples/ScrollableComponentTest/entry/src/main/ets/pages/refresh/RefreshMainPage.ets +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/refresh/RefreshMainPage.ets @@ -41,7 +41,8 @@ struct RefreshMainPage { new TextList(7, 'GridRefreshLoad', 'pages/refresh/GridRefreshLoad'), new TextList(8, 'WaterFlowRefreshLoad', 'pages/refresh/WaterFlowRefreshLoad'), new TextList(9, 'ListLanesRefreshLoad', 'pages/refresh/ListLanesRefreshLoad'), - new TextList(10, 'RefreshPromptText', 'pages/refresh/RefreshPromptText') + new TextList(10, 'RefreshPromptText', 'pages/refresh/RefreshPromptText'), + new TextList(11, 'RefreshIndex', 'pages/refresh/RefreshIndex') ] @State fontSize: Resource | undefined = undefined diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/WaterFlowMainPage.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/WaterFlowMainPage.ets index 7ec0c1bc6ad..dfb5051af8e 100644 --- a/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/WaterFlowMainPage.ets +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/WaterFlowMainPage.ets @@ -41,6 +41,10 @@ struct WaterFlowMainPage { new TextList(7, 'WaterFlowNodeFooterContent', 'pages/waterflow/demo01/WaterFlowNodeFooterContent'), new TextList(8, 'lazyVGrid-ori', 'pages/waterflow/lazyVGrid/lazyVGrid-ori'), new TextList(9, 'lazyVGrid-seg', 'pages/waterflow/lazyVGrid/lazyVGrid-seg'), + new TextList(10, 'waterFlowFriction', 'pages/waterflow/demo01/waterFlowFriction'), + new TextList(11, 'waterFlowFrictionModifier', 'pages/waterflow/waterFlowModifier/waterFlowFrictionModifier'), + new TextList(12, 'waterFlowModifierIndex', 'pages/waterflow/waterFlowModifier/waterFlowModifierIndex'), + new TextList(13, 'waterFlowIndex', 'pages/waterflow/waterFlowIndex') ] @State fontSize: Resource | undefined = undefined build() { diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/demo01/waterFlowFriction.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/demo01/waterFlowFriction.ets new file mode 100644 index 00000000000..f4136ab8634 --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/demo01/waterFlowFriction.ets @@ -0,0 +1,71 @@ +//index.ets +import { WaterFlowDataSource } from './WaterFlowDataSource'; +import { common, ConfigurationConstant } from '@kit.AbilityKit'; + +@Entry +@Component +struct WaterFlowDemo { + @State minSize: number = 80; + @State maxSize: number = 180; + @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]; + dataSource: WaterFlowDataSource = new WaterFlowDataSource(); + private itemWidthArray: number[] = []; + private itemHeightArray: number[] = []; + @State changeIndex: number = 0; + @State changeList: (number | Resource | undefined | null)[] = [ + 99, 11, 0.9, 99, undefined, 99, null, 11, 0.1, 99, -99 + ]; + @State isDark: boolean = false; + @State context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext; + + // 计算FlowItem宽/高 + getSize() { + let ret = Math.floor(Math.random() * this.maxSize); + return (ret > this.minSize ? ret : this.minSize); + } + + // 设置FlowItem宽/高数组 + setItemSizeArray() { + for (let i = 0; i < 100; i++) { + this.itemWidthArray.push(this.getSize()); + this.itemHeightArray.push(this.getSize()); + } + } + + aboutToAppear() { + this.setItemSizeArray(); + } + + build() { + Column({ space: 2 }) { + Button('切换数值') + .onClick(() => { + this.changeIndex++; + if (this.changeIndex > this.changeList.length - 1) { + this.changeIndex = 0; + } + }) + Text('Index' + this.changeIndex + '数值' + this.changeList[this.changeIndex]).fontColor(Color.Blue) + WaterFlow() { + LazyForEach(this.dataSource, (item: number) => { + FlowItem() { + Column() { + Text('N' + item).fontSize(12).height('16') + } + } + .width('100%') + .height(this.itemHeightArray[item % 100]) + .backgroundColor(this.colors[item % 5]) + }, (item: string) => item) + } + .friction(this.changeList[this.changeIndex]) + .columnsTemplate('repeat(auto-fill,80)') + .columnsGap(10) + .rowsGap(5) + .padding({ left: 5 }) + .backgroundColor(0xFAEEE0) + .width('100%') + .height('100%') + } + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowIndex.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowIndex.ets new file mode 100644 index 00000000000..e28b7457e60 --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowIndex.ets @@ -0,0 +1,51 @@ +import router from '@ohos.router'; + +interface routerInfo { + url: string; + info: string; +} + +let routerData: routerInfo[] = [ + { url: 'pages/waterflow/demo01/waterFlowFriction', info: 'Friction' }, +] + +@Entry +@Component +struct Index { + listScroller: Scroller = new Scroller(); + + build() { + Column({ space: 10 }) { + List({ space: 10, scroller: this.listScroller }) { + ForEach(routerData, (item: routerInfo) => { + ListItem() { + Text(item.info) + .width('100%') + .height('120vp') + .fontSize('15vp') + .backgroundColor('#ffb6c1') + + .borderRadius(10) + .textAlign(TextAlign.Center) + .onClick(() => { + router.pushUrl({ + url: item.url + }) + }) + } + }) + } + .width('90%') + .height('100%') + .scrollBar(BarState.Off) + .friction(0.6) + .divider({ + strokeWidth: 2, + color: 0xFFFFFF, + startMargin: 20, + endMargin: 20 + }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring + }.width('100%').height('100%').padding({ top: 5 }) + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowModifier/WaterFlowDataSource.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowModifier/WaterFlowDataSource.ets new file mode 100644 index 00000000000..f6330e1cade --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowModifier/WaterFlowDataSource.ets @@ -0,0 +1,127 @@ +// 实现IDataSource接口的对象，用于瀑布流组件加载数据 +export class WaterFlowDataSource implements IDataSource { + private dataArray: number[] = []; + private listeners: DataChangeListener[] = []; + + constructor() { + for (let i = 0; i < 100; i++) { + this.dataArray.push(i); + } + } + + // 获取索引对应的数据 + public getData(index: number): number { + return this.dataArray[index]; + } + + // 通知控制器数据重新加载 + notifyDataReload(): void { + this.listeners.forEach(listener => { + listener.onDataReloaded(); + }) + } + + // 通知控制器数据增加 + notifyDataAdd(index: number): void { + this.listeners.forEach(listener => { + listener.onDataAdd(index); + }) + } + + // 通知控制器数据变化 + notifyDataChange(index: number): void { + this.listeners.forEach(listener => { + listener.onDataChange(index); + }) + } + + // 通知控制器数据删除 + notifyDataDelete(index: number): void { + this.listeners.forEach(listener => { + listener.onDataDelete(index); + }) + } + + // 通知控制器数据位置变化 + notifyDataMove(from: number, to: number): void { + this.listeners.forEach(listener => { + listener.onDataMove(from, to); + }) + } + + //通知控制器数据批量修改 + notifyDatasetChange(operations: DataOperation[]): void { + this.listeners.forEach(listener => { + listener.onDatasetChange(operations); + }) + } + + // 获取数据总数 + public totalCount(): number { + return this.dataArray.length; + } + + // 注册改变数据的控制器 + registerDataChangeListener(listener: DataChangeListener): void { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener); + } + } + + // 注销改变数据的控制器 + unregisterDataChangeListener(listener: DataChangeListener): void { + const pos = this.listeners.indexOf(listener); + if (pos >= 0) { + this.listeners.splice(pos, 1); + } + } + + // 增加数据 + public add1stItem(): void { + this.dataArray.splice(0, 0, this.dataArray.length); + this.notifyDataAdd(0); + } + + // 在数据尾部增加一个元素 + public addLastItem(): void { + this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length); + this.notifyDataAdd(this.dataArray.length - 1); + } + + // 在指定索引位置增加一个元素 + public addItem(index: number): void { + this.dataArray.splice(index, 0, this.dataArray.length); + this.notifyDataAdd(index); + } + + // 删除第一个元素 + public delete1stItem(): void { + this.dataArray.splice(0, 1); + this.notifyDataDelete(0); + } + + // 删除第二个元素 + public delete2ndItem(): void { + this.dataArray.splice(1, 1); + this.notifyDataDelete(1); + } + + // 删除最后一个元素 + public deleteLastItem(): void { + this.dataArray.splice(-1, 1); + this.notifyDataDelete(this.dataArray.length); + } + + // 在指定索引位置删除一个元素 + public deleteItem(index: number): void { + this.dataArray.splice(index, 1); + this.notifyDataDelete(index); + } + + // 重新加载数据 + public reload(): void { + this.dataArray.splice(1, 1); + this.dataArray.splice(3, 2); + this.notifyDataReload(); + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowModifier/waterFlowFrictionModifier.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowModifier/waterFlowFrictionModifier.ets new file mode 100644 index 00000000000..7fc042fe861 --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowModifier/waterFlowFrictionModifier.ets @@ -0,0 +1,81 @@ +//index.ets +import { WaterFlowDataSource } from './WaterFlowDataSource'; +import { common, ConfigurationConstant } from '@kit.AbilityKit'; + +class MyTabContentModifier1 implements AttributeModifier { + public isDark: boolean = false; + public changeIndex: number = 0; + public changeList: (number | Resource | undefined | null)[] = [ + 99, 11, 0.9, 99, undefined, 99, null, 11, 0.1, 99, -99 + ]; + + applyNormalAttribute(instance: WaterFlowAttribute): void { + instance.friction(this.changeList[this.changeIndex]) + }; +} + +@Entry +@Component +struct WaterFlowDemo { + @State minSize: number = 80; + @State maxSize: number = 180; + @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]; + dataSource: WaterFlowDataSource = new WaterFlowDataSource(); + private itemWidthArray: number[] = []; + private itemHeightArray: number[] = []; + @State modifier1: MyTabContentModifier1 = new MyTabContentModifier1(); + @State isDark: boolean = false; + @State context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext; + + // 计算FlowItem宽/高 + getSize() { + let ret = Math.floor(Math.random() * this.maxSize); + return (ret > this.minSize ? ret : this.minSize); + } + + // 设置FlowItem宽/高数组 + setItemSizeArray() { + for (let i = 0; i < 100; i++) { + this.itemWidthArray.push(this.getSize()); + this.itemHeightArray.push(this.getSize()); + } + } + + aboutToAppear() { + this.setItemSizeArray(); + } + + build() { + Column({ space: 2 }) { + Button('切换数值') + .onClick(() => { + this.modifier1.changeIndex++ + if (this.modifier1.changeIndex > this.modifier1.changeList.length - 1) { + this.modifier1.changeIndex = 0; + } + }) + Text('Index' + this.modifier1.changeIndex + '数值' + this.modifier1.changeList[this.modifier1.changeIndex]) + .fontColor(Color.Blue) + WaterFlow() { + LazyForEach(this.dataSource, (item: number) => { + FlowItem() { + Column() { + Text('N' + item).fontSize(12).height('16') + } + } + .width('100%') + .height(this.itemHeightArray[item % 100]) + .backgroundColor(this.colors[item % 5]) + }, (item: string) => item) + } + .attributeModifier(this.modifier1 as MyTabContentModifier1) + .columnsTemplate('repeat(auto-fill,80)') + .columnsGap(10) + .rowsGap(5) + .padding({ left: 5 }) + .backgroundColor(0xFAEEE0) + .width('100%') + .height('100%') + } + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowModifier/waterFlowModifierIndex.ets b/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowModifier/waterFlowModifierIndex.ets new file mode 100644 index 00000000000..c0fcbbc7dae --- /dev/null +++ b/examples/ScrollableComponentTest/entry/src/main/ets/pages/waterflow/waterFlowModifier/waterFlowModifierIndex.ets @@ -0,0 +1,51 @@ +import router from '@ohos.router'; + +interface routerInfo { + url: string; + info: string; +} + +let routerData: routerInfo[] = [ + { url: 'pages/waterflow/waterFlowModifier/waterFlowFrictionModifier', info: 'Friction' }, +] + +@Entry +@Component +struct Index { + listScroller: Scroller = new Scroller(); + + build() { + Column({ space: 10 }) { + List({ space: 10, scroller: this.listScroller }) { + ForEach(routerData, (item: routerInfo) => { + ListItem() { + Text(item.info) + .width('100%') + .height('120vp') + .fontSize('15vp') + .backgroundColor('#ffb6c1') + + .borderRadius(10) + .textAlign(TextAlign.Center) + .onClick(() => { + router.pushUrl({ + url: item.url + }) + }) + } + }) + } + .width('90%') + .height('100%') + .scrollBar(BarState.Off) + .friction(0.6) + .divider({ + strokeWidth: 2, + color: 0xFFFFFF, + startMargin: 20, + endMargin: 20 + }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring + }.width('100%').height('100%').padding({ top: 5 }) + } +} \ No newline at end of file diff --git a/examples/ScrollableComponentTest/entry/src/main/resources/base/profile/main_pages.json b/examples/ScrollableComponentTest/entry/src/main/resources/base/profile/main_pages.json index e2de9dd90ee..686fc19beb7 100644 --- a/examples/ScrollableComponentTest/entry/src/main/resources/base/profile/main_pages.json +++ b/examples/ScrollableComponentTest/entry/src/main/resources/base/profile/main_pages.json @@ -29,6 +29,10 @@ "pages/waterflow/demo01/WaterFlowNodeFooterContent", "pages/waterflow/lazyVGrid/lazyVGrid-ori", "pages/waterflow/lazyVGrid/lazyVGrid-seg", + "pages/waterflow/demo01/waterFlowFriction", + "pages/waterflow/waterFlowModifier/waterFlowFrictionModifier", + "pages/waterflow/waterFlowModifier/waterFlowModifierIndex", + "pages/waterflow/waterFlowIndex", "pages/Swiper/SwiperMainPage", "pages/Swiper/OnContentWillScrollNormal", "pages/Swiper/OnContentWillScrollNestList", @@ -87,6 +91,9 @@ "pages/List/ListModifier/friction", "pages/List/ListModifier/lanesMaxLength", "pages/List/ListModifier/lanesMinLength", + "pages/List/ListItemGroupModifier/ListItemGroupModifierIndex", + "pages/List/ListItemGroup/ListItemGroupIndex", + "pages/List/ListIndex", "pages/alphabetIndexer/AlphabetIndexerMainPage", "pages/alphabetIndexer/AutoCollapse", "pages/alphabetIndexer/PopupPosition", @@ -100,6 +107,7 @@ "pages/refresh/WaterFlowRefreshLoad", "pages/refresh/ListLanesRefreshLoad", "pages/refresh/RefreshPromptText", + "pages/refresh/RefreshIndex", "pages/grid/GridBindSheetDrag", "pages/grid/GridCalculator", "pages/grid/GridCAPI", @@ -120,6 +128,8 @@ "pages/grid/st/GridDemo006", "pages/grid/st/LazyVGridSample", "pages/grid/st/NestedScroll001", + "pages/grid/GridIndex", + "pages/grid/GridModifierIndex", "pages/Scroll/ScrollMainPage", "pages/Scroll/InfiniteScrolling", "pages/Scroll/CustomSnap", @@ -136,6 +146,12 @@ "pages/Scroll/initialOffsetXOffset", "pages/Scroll/initialOffsetYOffset", "pages/Scroll/scrollSnap", + "pages/Scroll/ScrollModifier/friction", + "pages/Scroll/ScrollModifier/initialOffsetXOffset", + "pages/Scroll/ScrollModifier/initialOffsetYOffset", + "pages/Scroll/ScrollModifier/scrollSnap", + "pages/Scroll/ScrollIndex", + "pages/Scroll/ScrollModifier/ScrollModifierIndex", "pages/LazyVGridLayout/LazyVGridLayoutMainPage", "pages/LazyVGridLayout/LazyVGridLayoutAttribute" ] -- Gitee