项目介绍
- 项目名称：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
}
}
评论功能有两部分 评论列表和评论发送输入框。
项目结构说明
为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05
《鸿蒙开发学习手册》：
如何快速入门：https://qr21.cn/FV7h05
- 基本概念
- 构建第一个ArkTS应用
- ……
开发基础知识：https://qr21.cn/FV7h05
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
基于ArkTS 开发：https://qr21.cn/FV7h05
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH
鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向
