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

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

项目介绍

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

效果演示

开发简介

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

主要功能和知识点

主要功能：

列表展示
九宫格图片展示
图片预览

主要知识点：

九宫格列表和选择图片列表：网格容器组件（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';

@Componentstruct
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
    }
}