From fbcd67dfdac8caeccd3726a2deddf774d2005ce9 Mon Sep 17 00:00:00 2001 From: dongwei Date: Thu, 23 Jan 2025 14:56:28 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4select=20swiper=20slider?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: dongwei --- .../src/main/ets/pages/Select/select01.ets | 142 ++++++---------- .../src/main/ets/pages/Slider/slider01.ets | 86 ++++++++++ .../src/main/ets/pages/Swiper/swiper01.ets | 158 ++++++++++++++++++ .../resources/base/profile/main_pages.json | 5 +- 4 files changed, 296 insertions(+), 95 deletions(-) create mode 100644 function/arkui/inspector_test/entry/src/main/ets/pages/Slider/slider01.ets create mode 100644 function/arkui/inspector_test/entry/src/main/ets/pages/Swiper/swiper01.ets diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/Select/select01.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/Select/select01.ets index a033b08f..15ccc1fe 100644 --- a/function/arkui/inspector_test/entry/src/main/ets/pages/Select/select01.ets +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/Select/select01.ets @@ -13,108 +13,62 @@ * limitations under the License. */ -class MyDataSource implements IDataSource { - private list: number[] = [] - - constructor(list: number[]) { - this.list = list - } - - totalCount(): number { - return this.list.length - } - - getData(index: number): number { - return this.list[index] - } - - registerDataChangeListener(listener: DataChangeListener): void { - } - - unregisterDataChangeListener() { - } -} +import router from '@ohos.router' @Entry @Component -struct SwiperExample { - private swiperController: SwiperController = new SwiperController() - private data: MyDataSource = new MyDataSource([]) - - aboutToAppear(): void { - let list: number[] = [] - for (let i = 1; i <= 10; i++) { - list.push(i); - } - this.data = new MyDataSource(list) - } +struct Select01 { + @State text: string = "TTTTT" + @State index: number = 2 + @State space: number = 8 + @State arrowPosition: ArrowPosition = ArrowPosition.END + @State idOrKeyArray: Array> = [ + ['', ''], + ['dW_select_id', ''], + ['', 'dW_select_key'], + ['dW_select_id', 'dW_select_key'], + ]; build() { - Column({ space: 5 }) { - Swiper(this.swiperController) { - LazyForEach(this.data, (item: string) => { - Text(item.toString()) - .width('90%') - .height(160) - .backgroundColor(0xAFEEEE) - .textAlign(TextAlign.Center) - .fontSize(30) - }, (item: string) => item) - } - .cachedCount(2) - .index(1) - .autoPlay(true) - .interval(4000) - .loop(true) - .duration(1000) - .itemSpace(0) - .indicator( // 设置圆点导航点样式 - new DotIndicator() - .itemWidth(15) - .itemHeight(15) - .selectedItemWidth(15) - .selectedItemHeight(15) - .color(Color.Gray) - .selectedColor(Color.Blue)) - .displayArrow({ // 设置导航点箭头样式 - showBackground: true, - isSidebarMiddle: true, - backgroundSize: 24, - backgroundColor: Color.White, - arrowSize: 18, - arrowColor: Color.Blue - }, false) - .curve(Curve.Linear) - .onChange((index: number) => { - console.info(index.toString()) - }) - .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => { - console.info("index: " + index) - console.info("current offset: " + extraInfo.currentOffset) - }) - .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => { - console.info("index: " + index) - console.info("targetIndex: " + targetIndex) - console.info("current offset: " + extraInfo.currentOffset) - console.info("target offset: " + extraInfo.targetOffset) - console.info("velocity: " + extraInfo.velocity) - }) - .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => { - console.info("index: " + index) - console.info("current offset: " + extraInfo.currentOffset) + Column() { + Text("Select") + .fontSize(18) + .margin({ top: 24 }) + ForEach(this.idOrKeyArray, (item: Array) => { + Select([{ value: 'aaa', icon: $r("app.media.icon") }, + { value: 'bbb', icon: $r("app.media.icon") }, + { value: 'ccc', icon: $r("app.media.icon") }, + { value: 'ddd', icon: $r("app.media.icon") }]) + .selected(this.index) + .value(this.text) + .font({ size: 16, weight: 500 }) + .fontColor('#182431') + .selectedOptionFont({ size: 16, weight: 400 }) + .optionFont({ size: 16, weight: 400 }) + .space(this.space) + .arrowPosition(this.arrowPosition) + .menuAlign(MenuAlignType.START, {dx:0, dy:0}) + .optionWidth(200) + .optionHeight(300) + .id(item[0]) + .key(item[1]) + .onSelect((index:number, text?: string | undefined)=>{ + console.info('Select:' + index) + this.index = index; + if(text){ + this.text = text; + } + }) }) - Row({ space: 12 }) { - Button('showNext') - .onClick(() => { - this.swiperController.showNext() + Button('Back') + .onClick(()=> { + router.pushUrl({ + url: 'pages/IndexD', + params: '' }) - Button('showPrevious') - .onClick(() => { - this.swiperController.showPrevious() - }) - }.margin(5) + }) + }.width('100%') - .margin({ top: 5 }) } } diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/Slider/slider01.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/Slider/slider01.ets new file mode 100644 index 00000000..762309f3 --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/Slider/slider01.ets @@ -0,0 +1,86 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import router from '@ohos.router' + +@Entry +@Component +struct Slider01 { + @State outSetValueOne: number = 40 + @State inSetValueOne: number = 40 + @State noneValueOne: number = 40 + @State outSetValueTwo: number = 40 + @State inSetValueTwo: number = 40 + @State vOutSetValueOne: number = 40 + @State vInSetValueOne: number = 40 + @State vOutSetValueTwo: number = 40 + @State vInSetValueTwo: number = 40 + @State tipsValue: number = 40 + @State idOrKeyArray: Array> = [ + ['', ''], + ['dW_slider_id', ''], + ['', 'dW_slider_key'], + ['dW_slider_id', 'dW_slider_key'], + ]; + + @State idOrKeyArrayBlockStyle: Array> = [ + ['', ''], + ['dW_slider_style_id', ''], + ['', 'dW_slider_style_key'], + ['dW_slider_style_id', 'dW_slider_style_key'], + ]; + + build() { + Column() { + Text("Slider") + .fontSize(18) + .margin({ top: 24 }) + ForEach(this.idOrKeyArray, (item: Array) => { + Slider({ + value: this.outSetValueOne, + min: 0, + max: 100, + style: SliderStyle.OutSet + }) + .showTips(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.outSetValueOne = value + console.info('value:' + value + 'mode:' + mode.toString()) + }) + .id(item[0]) + .key(item[1]) + }) + + Text("Slider with attr blockStyle") + .fontSize(18) + .margin({ top: 24 }) + ForEach(this.idOrKeyArrayBlockStyle, (item: Array) => { + Slider({ style: SliderStyle.OutSet, value: 40 }) + .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') }) + .id(item[0]) + .key(item[1]) + }) + + Button('Back') + .onClick(()=> { + router.pushUrl({ + url: 'pages/IndexD', + params: '' + }) + }) + + }.width('100%') + } +} diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/Swiper/swiper01.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/Swiper/swiper01.ets new file mode 100644 index 00000000..08df9a9e --- /dev/null +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/Swiper/swiper01.ets @@ -0,0 +1,158 @@ +/* + * Copyright (c) 2025 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import router from '@ohos.router' + +class MyDataSource implements IDataSource { + private list: number[] = [] + + constructor(list: number[]) { + this.list = list + } + + totalCount(): number { + return this.list.length + } + + getData(index: number): number { + return this.list[index] + } + + registerDataChangeListener(listener: DataChangeListener): void { + } + + unregisterDataChangeListener() { + } +} + +@Entry +@Component +struct Swiper01 { + private swiperController: SwiperController = new SwiperController() + private data: MyDataSource = new MyDataSource([]) + @State idOrKeyArray: Array> = [ + ['', ''], + ['dW_swiper_id', ''], + ['', 'dW_swiper_key'], + ['dW_swiper_id', 'dW_swiper_key'], + ]; + @State idOrKeyArrayDisplayArrow: Array> = [ + ['', ''], + ['dW_swiper_dis_id', ''], + ['', 'dW_swiper_dis_key'], + ['dW_swiper_dis_id', 'dW_swiper_dis_key'], + ]; + + aboutToAppear(): void { + let list: number[] = [] + for (let i = 1; i <= 10; i++) { + list.push(i); + } + this.data = new MyDataSource(list) + } + + build() { + Column() { + Text("Swiper") + .fontSize(18) + ForEach(this.idOrKeyArray, (item: Array) => { + Swiper(this.swiperController) { + LazyForEach(this.data, (item: string) => { + Text(item.toString()) + .width('90%') + .height(80) + .backgroundColor(0xAFEEEE) + .textAlign(TextAlign.Center) + .fontSize(18) + }, (item: string) => item) + } + .id(item[0]) + .key(item[1]) + .displayCount(1, true) + .autoPlay(true) + .interval(4000) + .loop(true) + .duration(1000) + .itemSpace(10) + .indicator( + new DotIndicator() + .itemWidth(15) + .itemHeight(15) + .selectedItemWidth(15) + .selectedItemHeight(15) + .color(Color.Gray) + .selectedColor(Color.Blue)) + }) + + Text("Swiper with attr displayArrow") + .fontSize(18) + .margin({ top: 24 }) + ForEach(this.idOrKeyArrayDisplayArrow, (item: Array) => { + Swiper(this.swiperController) { + LazyForEach(this.data, (item: string) => { + Text(item.toString()) + .width('90%') + .height(85) + .backgroundColor(0xAFEEEE) + .textAlign(TextAlign.Center) + .fontSize(18) + }, (item: string) => item) + } + .cachedCount(2) + .index(1) + .autoPlay(true) + .interval(4000) + .loop(true) + .duration(1000) + .itemSpace(0) + .indicator( + new DotIndicator() + .itemWidth(15) + .itemHeight(15) + .selectedItemWidth(15) + .selectedItemHeight(15) + .color(Color.Gray) + .selectedColor(Color.Blue)) + .displayArrow({ + showBackground: true, + isSidebarMiddle: true, + backgroundSize: 24, + backgroundColor: Color.White, + arrowSize: 18, + arrowColor: Color.Blue + }, false) + .curve(Curve.Linear) + .onChange((index: number) => { + console.info(index.toString()) + }) + .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => { + console.info("displayArrow index: " + index) + console.info("displayArrow current offset: " + extraInfo.currentOffset) + }) + .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => { + console.info("displayArrow index: " + index) + console.info("displayArrow targetIndex: " + targetIndex) + console.info("displayArrow current offset: " + extraInfo.currentOffset) + console.info("displayArrow target offset: " + extraInfo.targetOffset) + console.info("displayArrow velocity: " + extraInfo.velocity) + }) + .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => { + console.info("displayArrow index: " + index) + console.info("displayArrow current offset: " + extraInfo.currentOffset) + }) + }) + }.width('100%') + } +} diff --git a/function/arkui/inspector_test/entry/src/main/resources/base/profile/main_pages.json b/function/arkui/inspector_test/entry/src/main/resources/base/profile/main_pages.json index 63bebc1b..c1d39bf6 100644 --- a/function/arkui/inspector_test/entry/src/main/resources/base/profile/main_pages.json +++ b/function/arkui/inspector_test/entry/src/main/resources/base/profile/main_pages.json @@ -1,10 +1,13 @@ { "src": [ "pages/Index", + "pages/IndexD", "pages/IndexQ", "pages/IndexJ", "pages/Rating/rating01", "pages/Rating/ratingModifier", - "pages/Select/select01" + "pages/Select/select01", + "pages/Slider/slider01", + "pages/Swiper/swiper01" ] } -- Gitee From 186086011d345a35bd34708fd3b9eb0eedb04eb4 Mon Sep 17 00:00:00 2001 From: dongwei Date: Thu, 23 Jan 2025 15:01:36 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4select=20swiper=20slider?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: dongwei --- .../inspector_test/entry/src/main/ets/pages/IndexD.ets | 2 ++ .../entry/src/main/ets/pages/Swiper/swiper01.ets | 10 +++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/IndexD.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/IndexD.ets index 5117ed8d..9adf8266 100644 --- a/function/arkui/inspector_test/entry/src/main/ets/pages/IndexD.ets +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/IndexD.ets @@ -22,6 +22,8 @@ struct IndexD { 'Rating/rating01', 'Rating/ratingModifier', 'Select/select01', + 'Slider/slider01', + 'Swiper/swiper01', ]; @State arrRight: Array = [ diff --git a/function/arkui/inspector_test/entry/src/main/ets/pages/Swiper/swiper01.ets b/function/arkui/inspector_test/entry/src/main/ets/pages/Swiper/swiper01.ets index 08df9a9e..a7029904 100644 --- a/function/arkui/inspector_test/entry/src/main/ets/pages/Swiper/swiper01.ets +++ b/function/arkui/inspector_test/entry/src/main/ets/pages/Swiper/swiper01.ets @@ -104,7 +104,7 @@ struct Swiper01 { LazyForEach(this.data, (item: string) => { Text(item.toString()) .width('90%') - .height(85) + .height(78) .backgroundColor(0xAFEEEE) .textAlign(TextAlign.Center) .fontSize(18) @@ -153,6 +153,14 @@ struct Swiper01 { console.info("displayArrow current offset: " + extraInfo.currentOffset) }) }) + + Button('Back') + .onClick(()=> { + router.pushUrl({ + url: 'pages/IndexD', + params: '' + }) + }) }.width('100%') } } -- Gitee