|
|
|
|
公众号矩阵

HarmonyOS ArkUI之仿微信朋友圈图片预览

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

作者:陈建朋来源:鸿蒙社区|2021-11-19 09:48

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

前言

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

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

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

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

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

效果演示

项目类说明

主要知识点

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

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

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

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

布局容器组件:沿垂直方向布局的容器(Column),沿水平方向布局容器(Row),堆叠容器(Stack)

代码解析

1、朋友圈列表展示

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

  1. List({ initialIndex: 0 }) { 
  2.    ForEach(this.listItems, item => { 
  3.      ListItem() { 
  4.        Row() { 
  5.          Column() { 
  6.            Image(item.bigImg) 
  7.              .width(50) 
  8.              .height(50) 
  9.              .borderRadius(30) 
  10.              .margin(5) 
  11.              .onClick(() => { 
  12.              }) 
  13.  
  14.            Blank() 
  15.          }.height("100%"
  16.  
  17.          Column() { 
  18.            Text(item.name
  19.              .fontSize(16) 
  20.              .margin({ left: 0}) 
  21.              .width("100%"
  22.  
  23.            Row() { 
  24.              Text(item.content) 
  25.                .fontSize(14) 
  26.                .margin({ top: 10 }) 
  27.                .fontColor(Color.Grey) 
  28.                .width("80%"
  29.                .textAlign(TextAlign.Start) 
  30.  
  31.              Blank() 
  32.            } 
  33.  
  34.            Column() { 
  35.              Grid() { 
  36.                ForEach(this.imageDataArray, item => { 
  37.                  GridItem() { 
  38.                    Image(item.smallImg).width(50).height(50) 
  39.  
  40.                  }.sharedTransition("0", { duration: 100, curve: Curve.Linear }) 
  41.                  .onClick(()=>{ 
  42.                    console.log("item.id==="+item.id) 
  43.                    router.push({ 
  44.                      uri: 'pages/imageflige'
  45.                      params: { 
  46.                        imageIndex: item.id, // 当前图片位置 
  47.                      } 
  48.                    }) 
  49.                  }) 
  50.                }, item => item.name
  51.              } 
  52.              .width(155) 
  53.              .columnsTemplate('1fr 1fr 1fr'
  54.              .rowsGap(2) 
  55.              .columnsGap(2) 
  56.            } 
  57.            .width('100%'
  58.            .height(200) 
  59.            .alignItems(HorizontalAlign.Start) 
  60.            .margin({ top: 10 }) 
  61.          }.height("100%"
  62.        } 
  63.        .height("100%"
  64.      } 
  65.      .height(250) 
  66.      .margin({ top: 10 }) 
  67.    }, item => item.name
  68.  } 

2、九宫格展示

主要是网格容器Grid组件和渲染组件ForEach(核心代码示例)。

  1. Column() { 
  2.     Grid() { 
  3.       ForEach(this.imageDataArray, item => { 
  4.         GridItem() { 
  5.           Image(item.smallImg).width(50).height(50) 
  6.    
  7.         }.sharedTransition("0", { duration: 100, curve: Curve.Linear }) 
  8.         .onClick(()=>{ 
  9.           console.log("item.id==="+item.id) 
  10.           router.push({ 
  11.             uri: 'pages/imageflige'
  12.             params: { 
  13.               imageIndex: item.id, // 当前图片位置 
  14.             } 
  15.           }) 
  16.         }) 
  17.       }, item => item.name
  18.     } 
  19.     .width(155) 
  20.     .columnsTemplate('1fr 1fr 1fr'
  21.     .rowsGap(2) 
  22.     .columnsGap(2) 
  23.   } 
  24.   .width('100%'
  25.   .height(200) 
  26.   .alignItems(HorizontalAlign.Start) 
  27.   .margin({ top: 10 }) 

3、大图预览

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

  1. import router from '@system.router'
  2.  
  3. @Entry 
  4. @Component 
  5. struct Imageflige { 
  6.  @State private listPicture: Array<Resource> = [ 
  7.    $r("app.media.food1"), $r("app.media.food2"), $r("app.media.food3"), 
  8.    $r("app.media.food4"), $r("app.media.food5"), $r("app.media.food1"), 
  9.    $r("app.media.food2"), $r("app.media.food3"), $r("app.media.food4"
  10.  ] 
  11.  @State imageIndex: number = 0 
  12.  
  13.  build() { 
  14.    Column() { 
  15.      Stack({ alignContent: Alignment.Top }) { 
  16.        // 切换页面 
  17.        Swiper() { 
  18.          ForEach(this.listPicture, item => { 
  19.            // 图片 
  20.            Image(item) 
  21.              .width('100%'
  22.              .height('100%'
  23.              .objectFit(ImageFit.Contain) //缩放类型 
  24.  
  25.          }, item => item.toString()) 
  26.        } 
  27.        .width('100%'
  28.        .height('100%'
  29.        .index(this.imageIndex) // 设置当前索引 
  30.        .indicator(true) // 不显示指示器 
  31.        .loop(true) // 关闭循环 
  32.        .sharedTransition("0", { duration: 100, curve: Curve.Linear }) 
  33.        .onChange((index: number) => { // 索引变化监听 
  34.          // 更新索引值 
  35.          this.imageIndex = index 
  36.        }) 
  37.  
  38.        Image($r("app.media.back")) 
  39.          .width(35) 
  40.          .height(35) 
  41.          .margin(10) 
  42.          .backgroundColor(Color.White) 
  43.          .onClick(() => { 
  44.            router.back() 
  45.          }) 
  46.      } 
  47.      .height("100%"
  48.      .width("100%"
  49.      .alignContent(Alignment.TopStart) 
  50.    } 
  51.  } 
  52.  
  53.  private aboutToAppear() { 
  54.    this.imageIndex = router.getParams().imageIndex 
  55.  } 
  56. }    

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

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. 【鸿蒙开发】开发笔记-对象关系映射数据库
  3. HarmonyOS 分布式之聊天室应用
  4. HarmonyOS Sample 之 Pasteboard 分布式粘贴板
  5. 通过电竞快览应用学ArkUI
  6. HarmonyOS Codelabs之Js2JavaCodegen JSFA调用PA工具
【责任编辑:jianghua TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

带你轻松入门 RabbitMQ

带你轻松入门 RabbitMQ

轻松入门RabbitMQ
共4章 | loong576

58人订阅学习

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

14人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

42人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微