HarmonyOS ArkUI之仿微信朋友圈图片预览 原创 精华

发布于 2021-11-15 10:27
浏览
6收藏

作者:陈建朋

前言

新世界的大门已打开,关也关不住!

《华为开发者大会2021》推出了方舟开发框l架(ArkUI),官方解释:方舟开发框架是一种跨设备的高性能UI开发框架,支持声明式编程和跨设备多态UI。

本项目就是基于ArkUI中的声明式编程开发,语言ETS(Extended Type Script),代码都在ets文件中编写,这个文件用于描述 UI 布局、样式、事件交互和页面逻辑。

官方文档地址:基于TS扩展的声明式开发范式1 基于TS扩展的声明式开发范式2

本文介绍仿微信朋友圈实现列表展示,九宫格小图图片展示,点击图片进行图片预览,图片左右滑动切换。

效果演示

HarmonyOS ArkUI之仿微信朋友圈图片预览-开源基础软件社区

项目类说明

HarmonyOS ArkUI之仿微信朋友圈图片预览-开源基础软件社区

主要知识点

九宫格列表和选择图片列表:网格容器组件(Grid)

浏览大图切换页面:滑动容器组件(Swiper)

循环渲染迭代数组:渲染组件(ForEach) (目前第二个参数中 itemGenerator: (item: any, index?: number) => void index不能使用

基础的组件:图片显示(Image) 文本显示(Text) 按钮(Button)

布局容器组件:沿垂直方向布局的容器(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)
  }

HarmonyOS ArkUI之仿微信朋友圈图片预览-开源基础软件社区

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 })

HarmonyOS ArkUI之仿微信朋友圈图片预览-开源基础软件社区

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 ArkUI之仿微信朋友圈图片预览-开源基础软件社区

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

项目地址

https://gitee.com/dot_happydz_admin/ark-ui.git(需要登录才能看到演示图)

更多原创内容请关注:开鸿 HarmonyOS 学院

入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,共建鸿蒙生态,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-11-16 09:32:14修改
9
收藏 6
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐