flutter图片预览_flutter 图片查看,仿微信

本文介绍了如何在Flutter中创建一个仿微信的图片预览功能。通过监听手势滑动,根据滑动速度和范围判断是否切换图片。代码可以直接使用。预览功能包括横向滚动浏览图片,但不包含缩放。此外,还处理了顶部限制和文字投影效果。
摘要由CSDN通过智能技术生成

这个虽然是仿微信的,但是以我自己项目里的要求为主,去掉了一些操作。

这个代码铐去就可以用的。

讲下思路:

手势滑动,不松手前以触摸点的坐标为移动,松手了,按滑动速度,以及滑动范围是否超过一半的屏幕作为是否切换图片的依据,否则回滚到原来的位置。

到顶了的处理

文字的投影,防止背景色为白色的字体会看不见

图片以宽度为准,高度可滑动查看(无需求)

缩放(无需求)

手机截图

//图片查看

import 'package:flutter/material.dart';

//import 'dart:async';

/*

* imgs 格式[{url:'',file:File}]

* img 当前点击进入的图片

* width 屏幕宽度

*/

class ViewDialog extends StatefulWidget {

ViewDialog({Key key, this.img, this.imgs, this.width}) : super(key: key);

final img;

final imgs;

final width;

@override

_PageStatus createState() => _PageStatus();

}

class _PageStatus extends State {

va

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值