HarmonyOS NEXT星河版之模拟图片选择器(下)---使用Swiper实现图片滑动预览

文章目录

    • 一、目标
    • 二、开撸
      • 2.1 改造图片预览Dialog
      • 2.2 改造主页面
      • 2.3 主页面完整代码
    • 三、小结

一、目标

在前面的介绍中,查看选中的图片都是单张预览,接下来要改造成多张可滑动预览,如下:
在这里插入图片描述

二、开撸

2.1 改造图片预览Dialog

@CustomDialog
export struct SinglePreviewDialog {// 弹窗控制器 mustcontroller: CustomDialogController// 展示图片URL列表imgUrlList: ResourceStr[] = []// 当前点击索引selectIndex: number = 0build() {if (this.imgUrlList && this.imgUrlList.length) {Column() {// 使用Swiper组件Swiper() {ForEach(this.imgUrlList, (item: ResourceStr) => {Image(item).width('100%')})}// 绑定当前index.index(this.selectIndex)}.width('100%').height('100%').justifyContent(FlexAlign.Center).backgroundColor(Color.Black).onClick(() => {// 关闭弹窗this.controller.close()})}}
}

2.2 改造主页面

声明当前点击图片索引:

// 当前图片索引
selectIndex: number = 0

点击图片时,给索引赋值:

Image(item.imgUrl).aspectRatio(1).onClick(() => {// this.selectImgUrl = item.imgUrlthis.selectIndex = indexthis.singlePreviewDialog.open()})

对预览Dialog在初始化时,更改传参:

singlePreviewDialog: CustomDialogController = new CustomDialogController({builder: SinglePreviewDialog({imgUrlList: this.selectImgList.map(item => item.imgUrl),selectIndex: this.selectIndex}),customStyle: true //使用自定义Dialog的样式
})

2.3 主页面完整代码

import { PhotoAlbumView } from './components/PhotoAlbumView';
import { SelectImageItem } from './models';
import { promptAction } from '@kit.ArkUI';
import { SinglePreviewDialog } from './dialog/SinglePreviewDialog';@Entry
@Component
struct PhotoAlbumDemoPage {@State message: string = 'Hello World';@State showPhotoAlbum: boolean = false@State selectImgList: SelectImageItem[] = []// 当前选中图片selectImgUrl: ResourceStr = ''// 当前图片索引selectIndex: number = 0// 单图预览dialogsinglePreviewDialog: CustomDialogController = new CustomDialogController({builder: SinglePreviewDialog({imgUrlList: this.selectImgList.map(item => item.imgUrl),selectIndex: this.selectIndex}),customStyle: true //使用自定义Dialog的样式})@BuildersheetPhotoAlbum() {Column() {PhotoAlbumView({maxNumber: 5,cancel: () => {this.showPhotoAlbum = false},confirm: (selectImgList: SelectImageItem[]) => {this.showPhotoAlbum = falsethis.selectImgList = [...this.selectImgList, ...selectImgList]}})}}build() {Column() {Button('打开相册').onClick(() => {this.showPhotoAlbum = true})Text('已选择图片:').width('100%').textAlign(TextAlign.Start)if (this.selectImgList && this.selectImgList.length) {Grid() {ForEach(this.selectImgList, (item: SelectImageItem, index: number) => {GridItem() {Stack() {Image(item.imgUrl).aspectRatio(1).onClick(() => {// this.selectImgUrl = item.imgUrlthis.selectIndex = indexthis.singlePreviewDialog.open()})}}}, (item: SelectImageItem) => JSON.stringify(item))}.columnsTemplate('1fr 1fr 1fr').columnsGap(5).rowsGap(5).padding(10).layoutWeight(1)}// if (this.showPhotoAlbum) {//   PhotoAlbumView({//     maxNumber: 5,//     cancel: () => {//       this.showPhotoAlbum = false//     },//     confirm: (selectImgList: SelectImageItem[]) => {//       this.showPhotoAlbum = false//       this.selectImgList = [...this.selectImgList, ...selectImgList]//     }//   })// }}.width('100%').height('100%').bindSheet($$this.showPhotoAlbum, this.sheetPhotoAlbum(), {showClose: false, // 是否显示右上角关闭按钮height: '70%' // 显示高度占比})}
}

三、小结

  • Swiper组件基本使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/10541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

刷t2、、、

、、 public class ThisTest {public static void main(String args[]) {int i;for (;;) {System.out.println(1);}} } while()的循环条件等于for中循环条件。循环体会有一个条件改变等于for中类似自增条件。while()判断条件一般在while前面会初始化跟for中初始化一样。这样 w…

CSS滑动门

CSS滑动门使各种特殊形状的背景能够自动拉伸滑动,以适应元素内部的文本内容,其原理是:利用CSS精灵和盒子撑开宽度适应不同字数的导航栏。 特点: 1.可以根据导航字数自动调节宽度; 2.可以以简单的背景图实现炫彩的导航条…

十分钟“手撕”内部类+static在内部类的使用

前言: 由于写内部类代码中运用了很多static的知识,所以在代码中书写了大量通俗易懂的关于static使用方法,以及为什么会报错,该怎么调整。耐心看完不仅能熟悉内部类,还会对static有不一样的收获。 一、什么是内部类 内…

CentOS 8.5 安装配置 Tinyproxy 轻量代理服务器 Windows10 系统设置http代理 详细教程

1 下载 下载地址 2 上传服务器并解压 tar zxvf tinyproxy-1.11.2.tar.gz 3 安装配置 #安装依赖软件 yum install automake cd tinyproxy-1.11.2/ #生成configure ./autogen.sh # ./configure --prefix/usr/local/tinyproxy make make install 4 配置环境 vim /etc/prof…

【LAMMPS学习】八、基础知识(6.4)Moltemplate​​​​​​​教程

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语,以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各种模拟。 …

Excel快速填充序号的方法

Excel快速填充序号常用的方法。 方法一:填充前面序号后拖拽 特点: 能有规律的填充,排序的行数由拖拽的行数决定。 此方法填充的序号等效于手打的序号,删除一行后下一行不会自动更新排序。 步骤:输入两个初始序号&…

Python | Leetcode Python题解之第83题删除排序链表中的重复元素

题目: 题解: class Solution:def deleteDuplicates(self, head: ListNode) -> ListNode:if not head:return headcur headwhile cur.next:if cur.val cur.next.val:cur.next cur.next.nextelse:cur cur.nextreturn head

matlab使用教程(69)—创建包含多个 x 轴和 y 轴的图

此示例说明如何创建这样一张图,通过坐标区底部和左侧的轴放置第一个绘图,并通过坐标区顶部和右侧的轴放置第二个绘图。 使用 line 函数绘制一个红色线条。将 x 轴和 y 轴的轴线颜色设置为红色。 注意:从 R2014b 开始,您可以使用圆…

判断某地址是否为合法的PCIE BAR空间地址

判断某地址是否为合法的PCIE BAR空间地址 一.生成BAR空间范围表二.判断脚本三.测试 以下脚本用来判断某地址是否为合法的PCIE BAR空间地址 一.生成BAR空间范围表 lspci -d:0100 -vv | grep "Region 0:" | gawk --non-decimal-data {A"0x"$5;B0x200000;pr…

基于Python+Django+MySQL实现Web版的增删改查

Python Web框架Django连接和操作MySQL数据库学生信息管理系统(SMS),主要包含对学生信息增删改查功能,旨在快速入门Python Web。 开发环境 开发工具:Pycharm 2020.1开发语言:Python 3.8.0Web框架:Django 3.0.6数据库:…

讲讲C++四种类型转换

在C中,类型转换(或称为类型转换运算符)是用来将一个数据类型转换为另一个数据类型的机制。C提供了四种类型转换:静态类型转换(Static Cast)、动态类型转换(Dynamic Cast)、重新解释类…

auto->decltype

auto c11标准才有的,c14丰富了很多这个相关的用法 声明变量别用auto,auto是让编辑器来自己推断,很影响运行效率 #include<iostream> using namespace std;auto ave(int a, int b) {return a b; }int main() {cout << typeid(ave(1, 2)).name()<<endl;ret…

Colab/PyTorch - 003 Transfer Learning For Image Classification

Colab/PyTorch - 003 Transfer Learning For Image Classification 1. 源由2. 迁移学习(ResNet50)2.1 数据集准备2.2 数据增强2.3 数据加载2.4 迁移学习2.5 数据集训练&验证2.6 模型推理 3. 总结4. 参考资料 1. 源由 迁移学习已经彻底改变了 PyTorch 中处理图像分类的方式…

基于PSO粒子群优化的PV光伏发电系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 粒子群优化算法基础 4.2 PV系统及其最大功率点跟踪 4.3 PSO在PV MPPT中的应用 5.完整工程文件 1.课题概述 基于PSO粒子群优化的PV光伏发电系统simulink建模与仿真。通过PSO粒子群优化进行最大功率…

电影院购票管理系统

文章目录 电影院购票管理系统一、项目演示二、项目介绍三、部分功能截图四、部分代码展示五、底部获取项目源码&#xff08;9.9&#xffe5;带走&#xff09; 电影院购票管理系统 一、项目演示 电影院售票管理系统 二、项目介绍 基于springbootvue的前后端分离电影院购票管理…

开发利器 - docker 安装运行 mysql

本文选择安装的mysql版本为5.7 &#xff0c;安装环境 mac 1、查看镜像是否存在 docker search mysql:5.7 2、拉取镜像 docker pull mysql:5.7 3、运行镜像 docker run --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORDroot1234 -d mysql:5.7 --name&#xff1a;指定容器…

淘宝买的知识付费系统,在线教育电销怎么做你知道吗?

在线教育行业的销售推销的产品其实就是课程&#xff0c;只不过变成了一种虚拟产品&#xff0c;在线教育的销售一般有课程销售、平台搭建销售&#xff0c;还有就是老师其实也是一种销售&#xff0c;这几个里面最容易上手的就是课程销售了&#xff0c;课程销售一般采用电话销售方…

【UniApp踩坑记录】在subNvue页面中使用Map,添加marker后不显示

一、背景 最近将一个小程序项目转化为 APP&#xff0c;想着正好体验一下 uniapp 宣称的一套代码&#xff0c;多端运行理念&#xff0c;于是运行到了真机环境。好消息是运行成功了&#xff0c;坏消息是部分样式不完善&#xff0c;部分功能失效。跨端成功了&#xff0c;但没完全…

00 深度学习 PyTorch框架介绍

PyTorch框架介绍 什么是PyTorch&#xff1f; PyTorch 是一个开源的深度学习框架&#xff0c;由 Facebook 的人工智能研究团队开发&#xff0c;提供了强大的 GPU 加速的张量计算库和基于 autograd 系统的深度神经网络&#xff08;DNN&#xff09;库。它的设计强调简单性和直观…

4---自动化构建代码(逻辑梳理,轻松理解)

一、需求引出&#xff1a; 在使用编译器编译代码时&#xff0c;无论我们在一个项目中写了多少个文件(包括头文件、源文件)&#xff0c;我们都可以一键完成编译&#xff0c;编译器会自动处理各个文件之间的包含&#xff0c;调用关系。但是在Linux中&#xff0c;我们在一个目录下…