【中工开辟者】鸿蒙------电子相册

目次
简介
相干概念
相干权限
使用阐明
项目环境
 运行截图
代码示例
 DetailPage
方法
aboutToAppear
resetImg
handlePanEnd
DetailListPage
交互逻辑
UI 结构
IndexPage
 标题栏 (Row)
轮播图 (Swiper) 
ListPage
 网格结构 (Grid)

---

简介

  本学期学习了鸿蒙开辟课程，在课程学习中收获良多，用一个小项目分享一些学习成果。
  本项目是基于ArkTS实现的一个电子相册案例，通过捏合和拖拽手势控制图片的放大、缩小、左右拖动检察细节等效果。

相干概念

• Swiper：滑块视图容器，提供子组件滑动轮播表现的能力。
  
• Grid：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的结构。
  
• Navigation：Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。
  
• List：列表包罗一系列雷同宽度的列表项。得当连续、多行出现同类数据，例如图片和文本。
  
• 组合手势：手势识别组，多种手势组合为复合手势，支持连续识别、并行识别和互斥识别。
  

相干权限

不涉及
使用阐明

• 用户可以使用捏合手势实现图片的放大缩小。
  
• 用户可以通过滑动手势实现图片的左右切换。
  
• 用户可以在图片放大的底子上，可以通过拖拽手势对图片进行拖拽检察细节。
  

项目环境

• HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。
  
• DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。
  
• HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。
  

 运行截图

代码示例

 DetailPage

 

1. @Entry
2. @Component
3. struct DetailPage {
4.   scroller: Scroller = new Scroller();
5.   photoArr: Array<Resource> = (router.getParams() as Record<string, Array<Resource>>)[`${Constants.PARAM_PHOTO_ARR_KEY}`];
6.   preOffsetX: number = 0;
7.   preOffsetY: number = 0;
8.   currentScale: number = 1;
9.   @State deviceWidth: number = Constants.DEFAULT_WIDTH;
10.   @State smallImgWidth: number = (Constants.DEFAULT_WIDTH - Constants.LIST_ITEM_SPACE * (Constants.SHOW_COUNT - 1)) /
11.   Constants.SHOW_COUNT;
12.   @State imageWidth: number = this.deviceWidth + this.smallImgWidth;
13.   @StorageLink('selectedIndex') selectedIndex: number = 0;
14.   @State isScaling: boolean = true;
15.   @State imgScale: number = 1;
16.   @State imgOffSetX: number = 0;
17.   @State imgOffSetY: number = 0;
18.   @State bgOpacity: number = 0;
20.   aboutToAppear() {
21.     let displayClass: display.Display = display.getDefaultDisplaySync();
22.     let width = displayClass?.width / displayClass.densityPixels ?? Constants.DEFAULT_WIDTH;
23.     this.deviceWidth = width;
24.     this.smallImgWidth = (width - Constants.LIST_ITEM_SPACE * (Constants.SHOW_COUNT - 1)) / Constants.SHOW_COUNT;
25.     this.imageWidth = this.deviceWidth + this.smallImgWidth;
26.   }
28.   resetImg(): void {
29.     this.imgScale = 1;
30.     this.currentScale = 1;
31.     this.preOffsetX = 0;
32.     this.preOffsetY = 0;
33.   }
35.   handlePanEnd(): void {
36.     let initOffsetX = (this.imgScale - 1) * this.imageWidth + this.smallImgWidth;
37.     if (Math.abs(this.imgOffSetX) > initOffsetX) {
38.       if (this.imgOffSetX > initOffsetX && this.selectedIndex > 0) {
39.         this.selectedIndex -= 1;
40.       } else if (this.imgOffSetX < -initOffsetX && this.selectedIndex < (this.photoArr.length - 1)) {
41.         this.selectedIndex += 1;
42.       }
43.       this.isScaling = false;
44.       this.resetImg();
45.       this.scroller.scrollTo({ xOffset: this.selectedIndex * this.imageWidth, yOffset: 0 });
46.     }
47.   }
49.   build() {
50.     Stack() {
51.       List({ scroller: this.scroller, initialIndex: this.selectedIndex }) {
52.         ForEach(this.photoArr, (img: Resource) => {
53.           ListItem() {
54.             Image(img)
55.               .objectFit(ImageFit.Contain)
56.               .onClick(() => router.back())
57.           }
58.           .gesture(GestureGroup(GestureMode.Exclusive,
59.             PinchGesture({ fingers: Constants.DOUBLE_NUMBER })
60.               .onActionStart(() => {
61.                 this.resetImg();
62.                 this.isScaling = true;
63.                 this.imgOffSetX = 0;
64.                 this.imgOffSetY = 0;
65.               })
66.               .onActionUpdate((event?: GestureEvent) => {
67.                 if (event) {
68.                   this.imgScale = this.currentScale * event.scale;
69.                 }
70.               })
71.               .onActionEnd(() => {
72.                 if (this.imgScale < 1) {
73.                   this.resetImg();
74.                   this.imgOffSetX = 0;
75.                   this.imgOffSetY = 0;
76.                 } else {
77.                   this.currentScale = this.imgScale;
78.                 }
79.               }), PanGesture()
80.               .onActionStart(() => {
81.                 this.resetImg();
82.                 this.isScaling = true;
83.               })
84.               .onActionUpdate((event?: GestureEvent) => {
85.                 if (event) {
86.                   this.imgOffSetX = this.preOffsetX + event.offsetX;
87.                   this.imgOffSetY = this.preOffsetY + event.offsetY;
88.                 }
89.               })
90.           ))
91.           .padding({
92.             left: this.smallImgWidth / Constants.DOUBLE_NUMBER,
93.             right: this.smallImgWidth / Constants.DOUBLE_NUMBER
94.           })
95.           .width(this.imageWidth)
96.         }, (item: Resource) => JSON.stringify(item))
97.       }
98.       .onScrollStop(() => {
99.         let currentIndex = Math.round(((this.scroller.currentOffset().xOffset as number) +
100.           (this.imageWidth / Constants.DOUBLE_NUMBER)) / this.imageWidth);
101.         this.selectedIndex = currentIndex;
102.         this.scroller.scrollTo({ xOffset: currentIndex * this.imageWidth, yOffset: 0 });
103.       })
104.       .width(Constants.FULL_PERCENT)
105.       .height(Constants.FULL_PERCENT)
106.       .listDirection(Axis.Horizontal)
107.       .visibility(this.isScaling ? Visibility.Hidden : Visibility.Visible)
109.       Row() {
110.         Image(this.photoArr[this.selectedIndex])
111.           .position({ x: this.imgOffSetX, y: this.imgOffSetY })
112.           .scale({ x: this.imgScale, y: this.imgScale })
113.           .objectFit(ImageFit.Contain)
114.           .onClick(() => router.back())
115.       }
116.       .gesture(GestureGroup(GestureMode.Exclusive,
117.         PinchGesture({ fingers: Constants.DOUBLE_NUMBER })
118.           .onActionUpdate((event?: GestureEvent) => {
119.             if (event) {
120.               this.imgScale = this.currentScale * event.scale;
121.             }
122.           })
123.           .onActionEnd(() => {
124.             if (this.imgScale < 1) {
125.               this.resetImg();
126.               this.imgOffSetX = 0;
127.               this.imgOffSetY = 0;
128.             } else {
129.               this.currentScale = this.imgScale;
130.             }
131.           }),
132.         PanGesture()
133.           .onActionStart(() => {
134.             this.preOffsetX = this.imgOffSetX;
135.             this.preOffsetY = this.imgOffSetY;
136.           })
137.           .onActionUpdate((event?: GestureEvent) => {
138.             if (event) {
139.               this.imgOffSetX = this.preOffsetX + event.offsetX;
140.               this.imgOffSetY = this.preOffsetY + event.offsetY;
141.             }
142.           })
143.           .onActionEnd(() => this.handlePanEnd())
144.       ))
145.       .padding({
146.         left: this.smallImgWidth / Constants.DOUBLE_NUMBER,
147.         right: this.smallImgWidth / Constants.DOUBLE_NUMBER
148.       })
149.       .width(this.imageWidth)
150.       .height(Constants.FULL_PERCENT)
151.       .visibility(this.isScaling ? Visibility.Visible : Visibility.Hidden)
152.     }
153.     .offset({ x: -(this.smallImgWidth / Constants.DOUBLE_NUMBER) })
154.     .width(this.imageWidth)
155.     .height(Constants.FULL_PERCENT)
156.     .backgroundColor($r('app.color.detail_background'))
157.   }
158. }

复制代码

这段代码定义了用于表现一组图片，并允许用户通过手势进行缩放和平移。该组件使用了鸿蒙操作系统（HarmonyOS）的声明式UI框架ArkUI来构建。
方法

aboutToAppear

这个方法会在组件即将出如今屏幕上时调用，用来初始化一些依赖于屏幕尺寸的状态变量。
resetImg

重置图像的缩放和平移值到默认状态。
handlePanEnd

当用户结束拖动手势时调用此方法。根据用户的拖动距离和方向调整 selectedIndex 并重置图像状态，同时滚动到新的选定图像位置。
DetailListPage

1. @Entry
2. @Component
3. struct DetailListPage {
4.   private smallScroller: Scroller = new Scroller();
5.   private bigScroller: Scroller = new Scroller();
6.   @State deviceWidth: number = Constants.DEFAULT_WIDTH;
7.   @State smallImgWidth: number = (this.deviceWidth - Constants.LIST_ITEM_SPACE * (Constants.SHOW_COUNT - 1)) /
8.   Constants.SHOW_COUNT;
9.   @State imageWidth: number = this.deviceWidth + this.smallImgWidth;
10.   private photoArr: Array<Resource | string> = (router.getParams() as Record<string, Array<Resource | string>>)[`${Constants.PARAM_PHOTO_ARR_KEY}`];
11.   private smallPhotoArr: Array<Resource | string> = new Array<Resource | string>().concat(Constants.CACHE_IMG_LIST,
12.     (router.getParams() as Record<string, Array<Resource | string>>)[`${Constants.PARAM_PHOTO_ARR_KEY}`],
13.     Constants.CACHE_IMG_LIST)
14.   @StorageLink('selectedIndex') selectedIndex: number = 0;
16.   @Builder SmallImgItemBuilder(img: Resource, index?: number) {
17.     if (index && index > (Constants.CACHE_IMG_SIZE - 1) && index < (this.smallPhotoArr.length - Constants.CACHE_IMG_SIZE)) {
18.       Image(img)
19.         .onClick(() => this.smallImgClickAction(index))
20.     }
21.   }
23.   aboutToAppear() {
24.     let displayClass: display.Display = display.getDefaultDisplaySync();
25.     let width = displayClass?.width / displayClass.densityPixels ?? Constants.DEFAULT_WIDTH;
26.     this.deviceWidth = width;
27.     this.smallImgWidth = (width - Constants.LIST_ITEM_SPACE * (Constants.SHOW_COUNT - 1)) / Constants.SHOW_COUNT;
28.     this.imageWidth = this.deviceWidth + this.smallImgWidth;
29.   }
31.   onPageShow() {
32.     this.smallScroller.scrollToIndex(this.selectedIndex);
33.     this.bigScroller.scrollToIndex(this.selectedIndex);
34.   }
36.   goDetailPage(): void {
37.     router.pushUrl({
38.       url: Constants.URL_DETAIL_PAGE,
39.       params: { photoArr: this.photoArr }
40.     });
41.   }
43.   smallImgClickAction(index: number): void {
44.     this.selectedIndex = index - Constants.CACHE_IMG_SIZE;
45.     this.smallScroller.scrollToIndex(this.selectedIndex);
46.     this.bigScroller.scrollToIndex(this.selectedIndex);
47.   }
49.   smallScrollAction(type: scrollTypeEnum): void {
50.     this.selectedIndex = Math.round(((this.smallScroller.currentOffset().xOffset as number) +
51.     this.smallImgWidth / Constants.DOUBLE_NUMBER) / (this.smallImgWidth + Constants.LIST_ITEM_SPACE));
52.     if (type === scrollTypeEnum.SCROLL) {
53.       this.bigScroller.scrollTo({ xOffset: this.selectedIndex * this.imageWidth, yOffset: 0 });
54.     } else {
55.       this.smallScroller.scrollTo({ xOffset: this.selectedIndex * this.smallImgWidth, yOffset: 0 });
56.     }
57.   }
59.   bigScrollAction(type: scrollTypeEnum): void {
60.     let smallWidth = this.smallImgWidth + Constants.LIST_ITEM_SPACE;
61.     this.selectedIndex = Math.round(((this.bigScroller.currentOffset().xOffset as number) +
62.       smallWidth / Constants.DOUBLE_NUMBER) / this.imageWidth);
63.     if (type === scrollTypeEnum.SCROLL) {
64.       this.smallScroller.scrollTo({ xOffset: this.selectedIndex * smallWidth, yOffset: 0 });
65.     } else {
66.       this.bigScroller.scrollTo({ xOffset: this.selectedIndex * this.imageWidth, yOffset: 0 });
67.     }
68.   }
70.   build() {
71.     Navigation() {
72.       Stack({ alignContent: Alignment.Bottom }) {
73.         List({ scroller: this.bigScroller, initialIndex: this.selectedIndex }) {
74.           ForEach(this.photoArr, (img: Resource) => {
75.             ListItem() {
76.               Image(img)
77.                 .height(Constants.FULL_PERCENT)
78.                 .width(Constants.FULL_PERCENT)
79.                 .objectFit(ImageFit.Contain)
80.                 .gesture(PinchGesture({ fingers: Constants.DOUBLE_NUMBER })
81.                   .onActionStart(() => this.goDetailPage()))
82.                 .onClick(() => this.goDetailPage())
83.             }
84.             .padding({
85.               left: this.smallImgWidth / Constants.DOUBLE_NUMBER,
86.               right: this.smallImgWidth / Constants.DOUBLE_NUMBER
87.             })
88.             .width(this.imageWidth)
89.           }, (item: Resource) => JSON.stringify(item))
90.         }
91.         .onScroll((scrollOffset, scrollState) => {
92.           if (scrollState === ScrollState.Fling) {
93.             this.bigScrollAction(scrollTypeEnum.SCROLL);
94.           }
95.         })
96.         .scrollBar(BarState.Off)
97.         .onScrollStop(() => this.bigScrollAction(scrollTypeEnum.STOP))
98.         .width(Constants.FULL_PERCENT)
99.         .height(Constants.FULL_PERCENT)
100.         .padding({ bottom: this.smallImgWidth * Constants.DOUBLE_NUMBER })
101.         .listDirection(Axis.Horizontal)
103.         List({
104.           scroller: this.smallScroller,
105.           space: Constants.LIST_ITEM_SPACE,
106.           initialIndex: this.selectedIndex
107.         }) {
108.           ForEach(this.smallPhotoArr, (img: Resource, index?: number) => {
109.             ListItem() {
110.               this.SmallImgItemBuilder(img, index)
111.             }
112.             .width(this.smallImgWidth)
113.             .aspectRatio(1)
114.           }, (item: Resource) => JSON.stringify(item))
115.         }
116.         .listDirection(Axis.Horizontal)
117.         .onScroll((scrollOffset, scrollState) => {
118.           if (scrollState === ScrollState.Fling) {
119.             this.smallScrollAction(scrollTypeEnum.SCROLL);
120.           }
121.         })
122.         .scrollBar(BarState.Off)
123.         .onScrollStop(() => this.smallScrollAction(scrollTypeEnum.STOP))
124.         .margin({ top: $r('app.float.detail_list_margin'), bottom: $r('app.float.detail_list_margin') })
125.         .height(this.smallImgWidth)
126.         .width(Constants.FULL_PERCENT)
127.       }
128.       .width(this.imageWidth)
129.       .height(Constants.FULL_PERCENT)
130.     }
131.     .title(Constants.PAGE_TITLE)
132.     .hideBackButton(false)
133.     .titleMode(NavigationTitleMode.Mini)
134.   }
135. }

复制代码

 这段代码是一个包罗两个程度滚动列表的页面：一个用于表现较大的图片（bigScroller），另一个用于表现较小的缩略图（smallScroller）。用户可以通过点击缩略图来切换大图，或者直接在大图上进行交互。
交互逻辑

1. goDetailPage(): void {
2.   // 导航到详情页
3. }
5. smallImgClickAction(index: number): void {
6.   // 更新选中索引并滚动到对应位置
7. }
9. smallScrollAction(type: scrollTypeEnum): void {
10.   // 根据滚动类型更新索引和滚动位置
11. }
13. bigScrollAction(type: scrollTypeEnum): void {
14.   // 根据滚动类型更新索引和滚动位置
15. }

复制代码

UI 结构

1. build() {
2.   Navigation() {
3.     Stack({ alignContent: Alignment.Bottom }) {
4.       // 大图列表
5.       List({ scroller: this.bigScroller, initialIndex: this.selectedIndex }) {
6.         // ...
7.       }
9.       // 小图列表
10.       List({
11.         scroller: this.smallScroller,
12.         space: Constants.LIST_ITEM_SPACE,
13.         initialIndex: this.selectedIndex
14.       }) {
15.         // ...
16.       }
17.     }
18.   }
19.   .title(Constants.PAGE_TITLE)
20.   .hideBackButton(false)
21.   .titleMode(NavigationTitleMode.Mini)
22. }

复制代码

• Navigation 包装整个结构，并设置了标题栏配置。
  
• Stack 用于堆叠大图列表和小图列表。
  
• 每个 List 都有自己的滚动控制器 (scroller) 并绑定了滚动变乱监听器，以同步两个列表之间的滚动状态。
  
• ForEach 循环生成列表项，每个项目都绑定有手势识别或点击变乱处理步调。
  

IndexPage

 

1. @Entry
2. @Component
3. struct IndexPage {
4.   swiperController: SwiperController = new SwiperController();
5.   scroller: Scroller = new Scroller();
6.   @State currentIndex: number = 0;
7.   @State angle: number = 0;
9.   build() {
10.     Column() {
11.       Row() {
12.         Text($r('app.string.EntryAbility_label'))
13.           .fontSize($r('app.float.title_font_size'))
14.           .fontWeight(Constants.TITLE_FONT_WEIGHT)
15.       }
16.       .height($r('app.float.navi_bar_height'))
17.       .alignItems(VerticalAlign.Center)
18.       .justifyContent(FlexAlign.Start)
19.       .margin({ top: $r('app.float.grid_padding') })
20.       .padding({ left: $r('app.float.title_padding') })
21.       .width(Constants.FULL_PERCENT)
23.       Swiper(this.swiperController) {
24.         ForEach(Constants.BANNER_IMG_LIST, (item: Resource) => {
25.           Row() {
26.             Image(item)
27.               .width(Constants.FULL_PERCENT)
28.               .height(Constants.FULL_PERCENT)
29.           }
30.           .width(Constants.FULL_PERCENT)
31.           .aspectRatio(Constants.BANNER_ASPECT_RATIO)
32.         }, (item: Resource, index?: number) => JSON.stringify(item) + index)
33.       }
34.       .autoPlay(true)
35.       .loop(true)
36.       .margin($r('app.float.grid_padding'))
37.       .borderRadius($r('app.float.img_border_radius'))
38.       .clip(true)
39.       .duration(Constants.BANNER_ANIMATE_DURATION)
40.       .indicator(false)
42.       Grid() {
43.         ForEach(Constants.IMG_ARR, (photoArr: Array<Resource>) => {
44.           GridItem() {
45.             PhotoItem({ photoArr })
46.           }
47.           .width(Constants.FULL_PERCENT)
48.           .aspectRatio(Constants.STACK_IMG_RATIO)
49.           .onClick(() => {
50.             router.pushUrl({
51.               url: Constants.URL_LIST_PAGE,
52.               params: { photoArr: photoArr }
53.             });
54.           })
55.         }, (item: Resource, index?: number) => JSON.stringify(item) + index)
56.       }
57.       .scrollBar(BarState.Off)
58.       .columnsTemplate(Constants.INDEX_COLUMNS_TEMPLATE)
59.       .columnsGap($r('app.float.grid_padding'))
60.       .rowsGap($r('app.float.grid_padding'))
61.       .padding({ left: $r('app.float.grid_padding'), right: $r('app.float.grid_padding') })
62.       .width(Constants.FULL_PERCENT)
63.       .layoutWeight(1)
64.     }
65.     .width(Constants.FULL_PERCENT)
66.     .height(Constants.FULL_PERCENT)
67.   }
68. }

复制代码

 这段代码定义了应用的首页或入口页面，包罗顶部的文字标题、一个轮播图（Swiper）和一个网格结构（Grid）。
 标题栏 (Row)

1. Row() {
2.   Text($r('app.string.EntryAbility_label'))
3.     .fontSize($r('app.float.title_font_size'))
4.     .fontWeight(Constants.TITLE_FONT_WEIGHT)
5. }
6. .height($r('app.float.navi_bar_height'))
7. .alignItems(VerticalAlign.Center)
8. .justifyContent(FlexAlign.Start)
9. .margin({ top: $r('app.float.grid_padding') })
10. .padding({ left: $r('app.float.title_padding') })
11. .width(Constants.FULL_PERCENT)

复制代码

• 创建一个行容器 Row 来放置文本 Text，用作页面标题。
  
• 设置了字体大小、权重，并调整了结构属性如高度、对齐方式、边距和内边距。
  

轮播图 (Swiper) 

1. Swiper(this.swiperController) {
2.   ForEach(Constants.BANNER_IMG_LIST, (item: Resource) => {
3.     Row() {
4.       Image(item)
5.         .width(Constants.FULL_PERCENT)
6.         .height(Constants.FULL_PERCENT)
7.     }
8.     .width(Constants.FULL_PERCENT)
9.     .aspectRatio(Constants.BANNER_ASPECT_RATIO)
10.   }, (item: Resource, index?: number) => JSON.stringify(item) + index)
11. }
12. .autoPlay(true)
13. .loop(true)
14. .margin($r('app.float.grid_padding'))
15. .borderRadius($r('app.float.img_border_radius'))
16. .clip(true)
17. .duration(Constants.BANNER_ANIMATE_DURATION)
18. .indicator(false)

复制代码

• 使用 Swiper 组件创建一个自动播放且循环的轮播图。
  
• ForEach 循环遍历 Constants.BANNER_IMG_LIST 数组来生成轮播项。
  

ListPage

 

1. @Entry
2. @Component
3. struct ListPage {
4.   photoArr: Array<Resource> = (router.getParams() as Record<string, Array<Resource>>)[`${Constants.PARAM_PHOTO_ARR_KEY}`];
5.   @StorageLink('selectedIndex') selectedIndex: number = 0;
7.   build() {
8.     Navigation() {
9.       Grid() {
10.         ForEach(this.photoArr, (img: Resource, index?: number) => {
11.           GridItem() {
12.             Image(img)
13.               .height(Constants.FULL_PERCENT)
14.               .width(Constants.FULL_PERCENT)
15.               .objectFit(ImageFit.Cover)
16.               .onClick(() => {
17.                 if (!index) {
18.                   index = 0;
19.                 }
20.                 this.selectedIndex = index;
21.                 router.pushUrl({
22.                   url: Constants.URL_DETAIL_LIST_PAGE,
23.                   params: {
24.                     photoArr: this.photoArr,
25.                   }
26.                 });
27.               })
28.           }
29.           .width(Constants.FULL_PERCENT)
30.           .aspectRatio(1)
31.         }, (item: Resource) => JSON.stringify(item))
32.       }
33.       .scrollBar(BarState.Off)
34.       .columnsTemplate(Constants.GRID_COLUMNS_TEMPLATE)
35.       .rowsGap(Constants.LIST_ITEM_SPACE)
36.       .columnsGap(Constants.LIST_ITEM_SPACE)
37.       .layoutWeight(1)
38.     }
39.     .title(Constants.PAGE_TITLE)
40.     .hideBackButton(false)
41.     .titleMode(NavigationTitleMode.Mini)
42.   }
43. }

复制代码

 这段代码定义了一个列表页面，用于展示一组图片。这个页面从上一页接收参数，并根据这些参数来加载和表现对应的图片列表。
 网格结构 (Grid)

1. Grid() {
2.   ForEach(this.photoArr, (img: Resource, index?: number) => {
3.     GridItem() {
4.       Image(img)
5.         .height(Constants.FULL_PERCENT)
6.         .width(Constants.FULL_PERCENT)
7.         .objectFit(ImageFit.Cover)
8.         .onClick(() => {
9.           if (!index) {
10.             index = 0;
11.           }
12.           this.selectedIndex = index;
13.           router.pushUrl({
14.             url: Constants.URL_DETAIL_LIST_PAGE,
15.             params: {
16.               photoArr: this.photoArr,
17.             }
18.           });
19.         })
20.     }
21.     .width(Constants.FULL_PERCENT)
22.     .aspectRatio(1)
23.   }, (item: Resource) => JSON.stringify(item))
24. }
25. .scrollBar(BarState.Off)
26. .columnsTemplate(Constants.GRID_COLUMNS_TEMPLATE)
27. .rowsGap(Constants.LIST_ITEM_SPACE)
28. .columnsGap(Constants.LIST_ITEM_SPACE)
29. .layoutWeight(1)

复制代码

• 创建一个网格结构 Grid 来展示 photoArr 中的每一张图片。
  
• 使用 ForEach 循环遍历 photoArr 数组，为每个图片生成一个 GridItem。
  
• 每个 GridItem 包罗一个 Image 组件，用来展示单张图片。设置了图片的高度和宽度为全屏百分比，并使用 objectFit 属性确保图片覆盖整个容器。
  
• 当点击某个 GridItem 时，触发 onClick 变乱处理器，更新 selectedIndex 为当前项的索引，并通过路由跳转到详情页 URL_DETAIL_LIST_PAGE，同时传递图片数组作为参数。 
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。