ArkUI声明式编程：仿朋友圈图片九宫格和图片预览_arkui实现照片显示并且仅显示部分照片,其他照片为查看全部-CSDN博客

本文链接：https://blog.csdn.net/maniuT/article/details/137511374

项目介绍

项目名称：ArkUI声明式编程：仿朋友圈图片九宫格和图片预览
功能：仿朋友圈列表展示，九宫格小图图片展示，点击图片进行图片预览，图片左右滑动切换。
开发版本：sdk7，DevEco Studio3.0 Beta1

效果演示

开发简介

通过ArkUI声明式编程，实现，仿朋友圈列表展示，九宫格小图图片展示，点击图片进行图片预览，图片左右滑动切换。

主要功能和知识点

主要功能：1，列表展示 2，九宫格图片展示 3，图片预览

主要知识点：

九宫格列表和选择图片列表：网格容器组件（Grid）
浏览大图切换页面：滑动容器组件（Swiper）
循环渲染迭代数组：渲染组件（ForEach）
基础的组件：图片显示（Image）文本显示（Text）
布局容器组件：Column，Row，Stack

代码解析

1、朋友圈列表展示

列表使用List组件实现多数据列表展示。(核心代码实例)

 List({ initialIndex: 0 }) {
    ForEach(this.listItems, item => {
      ListItem() {
        Row() {
          Column() {
            Image(item.bigImg)
              .width(50)
              .height(50)
              .borderRadius(30)
              .margin(5)
              .onClick(() => {
              })

            Blank()
          }.height("100%")

          Column() {
            Text(item.name)
              .fontSize(16)
              .margin({ left: 0})
              .width("100%")

            Row() {
              Text(item.content)
                .fontSize(14)
                .margin({ top: 10 })
                .fontColor(Color.Grey)
                .width("80%")
                .textAlign(TextAlign.Start)

              Blank()
            }

            Column() {
              Grid() {
                ForEach(this.imageDataArray, item => {
                  GridItem() {
                    Image(item.smallImg).width(50).height(50)

                  }.sharedTransition("0", { duration: 100, curve: Curve.Linear })
                  .onClick(()=>{
                    console.log("item.id==="+item.id)
                    router.push({
                      uri: 'pages/imageflige',
                      params: {
                        imageIndex: item.id, // 当前图片位置
                      }
                    })
                  })
                }, item => item.name)
              }
              .width(155)
              .columnsTemplate('1fr 1fr 1fr')
              .rowsGap(2)
              .columnsGap(2)
            }
            .width('100%')
            .height(200)
            .alignItems(HorizontalAlign.Start)
            .margin({ top: 10 })
          }.height("100%")
        }
        .height("100%")
      }
      .height(250)
      .margin({ top: 10 })
    }, item => item.name)
  }

2，九宫格展示
主要是网格容器Grid组件和渲染组件ForEach（核心代码示例）

   Column() {
     Grid() {
       ForEach(this.imageDataArray, item => {
         GridItem() {
           Image(item.smallImg).width(50).height(50)
   
         }.sharedTransition("0", { duration: 100, curve: Curve.Linear })
         .onClick(()=>{
           console.log("item.id==="+item.id)
           router.push({
             uri: 'pages/imageflige',
             params: {
               imageIndex: item.id, // 当前图片位置
             }
           })
         })
       }, item => item.name)
     }
     .width(155)
     .columnsTemplate('1fr 1fr 1fr')
     .rowsGap(2)
     .columnsGap(2)
   }
   .width('100%')
   .height(200)
   .alignItems(HorizontalAlign.Start)
   .margin({ top: 10 })

3，大图预览

使用滑动容器组件Swiper，通过传递点击的当前下标定位到指定位置（核心代码示例）

import router from '@system.router';

@Entry
@Component
struct Imageflige {
  @State private listPicture: Array<Resource> = [
    $r("app.media.food1"), $r("app.media.food2"), $r("app.media.food3"),
    $r("app.media.food4"), $r("app.media.food5"), $r("app.media.food1"),
    $r("app.media.food2"), $r("app.media.food3"), $r("app.media.food4")
  ]
  @State imageIndex: number = 0

  build() {
    Column() {
      Stack({ alignContent: Alignment.Top }) {
        // 切换页面
        Swiper() {
          ForEach(this.listPicture, item => {
            // 图片
            Image(item)
              .width('100%')
              .height('100%')
              .objectFit(ImageFit.Contain) //缩放类型

          }, item => item.toString())
        }
        .width('100%')
        .height('100%')
        .index(this.imageIndex) // 设置当前索引
        .indicator(true) // 不显示指示器
        .loop(true) // 关闭循环
        .sharedTransition("0", { duration: 100, curve: Curve.Linear })
        .onChange((index: number) => { // 索引变化监听
          // 更新索引值
          this.imageIndex = index
        })

        Image($r("app.media.back"))
          .width(35)
          .height(35)
          .margin(10)
          .backgroundColor(Color.White)
          .onClick(() => {
            router.back()
          })
      }
      .height("100%")
      .width("100%")
      .alignContent(Alignment.TopStart)
    }
  }

  private aboutToAppear() {
    this.imageIndex = router.getParams().imageIndex
  }
}