# ArkUI

**Repository Path**: dot_happydz_admin/ark-ui

## Basic Information

- **Project Name**: ArkUI
- **Description**: HarmonyOS挑战赛第四期，仿朋友圈列表图片展示和图片预览
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2021-10-28
- **Last Updated**: 2024-02-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# #HarmonyOS挑战赛第四期# ArkUI声明式编程：仿朋友圈图片九宫格和图片预览

#### 项目介绍

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

#### 效果演示

![1](gif/arkuifriends.gif)

#### 开发简介

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


#### 主要功能和知识点

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

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

#### 代码解析

- 1、朋友圈列表展示
###### 列表使用List组件实现多数据列表展示。(核心代码实例)

```xml
 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](gif/list1.PNG)

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

 ```xml
    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](gif/list2.PNG)

- 3，大图预览
###### 使用滑动容器组件Swiper，通过传递点击的当前下标定位到指定位置（核心代码示例） 
 ```xml
 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
   }
 }   
 ```
![4](gif/list3.PNG)

评论功能有两部分 评论列表和评论发送输入框。


#### 项目结构说明
![1](gif/project.png)

#### 项目地址
https://gitee.com/dot_happydz_admin/ark-ui.git（需要登录才能看到演示图）

#### 结尾
声明式UI开发真快，代码量少，鸿蒙真实太棒了。