医药网站怎么做,如何推广公众号文章,百度软件中心下载安装,淘宝店铺网站策划前言Flutter是谷歌的移动UI框架#xff0c;可以快速在iOS和Android上构建高质量的原生用户界面。IT界著名的尼古拉斯高尔包曾说#xff1a;轮子是IT进步的阶梯#xff01;热门的框架千篇一律#xff0c;好用轮子万里挑一#xff01;Flutter作为这两年开始崛起的跨平台开发…前言Flutter是谷歌的移动UI框架可以快速在iOS和Android上构建高质量的原生用户界面。IT界著名的尼古拉斯·高尔包曾说轮子是IT进步的阶梯热门的框架千篇一律好用轮子万里挑一Flutter作为这两年开始崛起的跨平台开发框架其第三方生态相比其他成熟框架还略有不足但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来给大家提高搬砖效率同时也希望flutter的生态越来越完善轮子越来越多。本系列文章准备了超过50个轮子推荐工作原因尽量每1-2天出一篇文章。tip:本系列文章合适已有部分flutter基础的开发者入门请戳flutter官网正文轮子轮子名称photo_view轮子概述可定制的图片预览查看器:photo_view.轮子作者caraujo.me推荐指数★★★★★常用指数★★★★★效果预览效果图安装dependencies:photo_view: ^0.7.0import package:photo_view/photo_view.dart;使用默认最简单的使用方式overrideWidget build(BuildContext context) {return Container(child: PhotoView(imageProvider: AssetImage(assets/large-image.jpg),));}初步的效果是这样的image可以放大查看但这是一个已经打开预览界面的样子日常使用我们需要从缩略图点击打开预览页面就像上面效果图那样所以我们需要自己写一个单独的预览界面然后从缩略图点击打开。单图片预览单独写一个页面作为图片预览的界面import package:flutter/material.dart;import package:photo_view/photo_view.dart;class PhotoViewSimpleScreen extends StateleeWidget{const PhotoViewSimpleScreen({this.imageProvider,//图片this.loadingChild,//加载时的widgetthis.backgroundDecoration,//背景修饰this.minScale,//最大缩放倍数this.maxScale,//最小缩放倍数this.heroTag,//hero动画tagid});final ImageProvider imageProvider;final Widget loadingChild;final Decoration backgroundDecoration;final dynamic minScale;final dynamic maxScale;final String heroTag;overrideWidget build(BuildContext context) {return Scaffold(body: Container(constraints: BoxConstraints.expand(height: MediaQuery.of(context).size.height,),child: Stack(children: [Positioned(top: 0,left: 0,bottom: 0,right: 0,child: PhotoView(imageProvider: imageProvider,loadingChild: loadingChild,backgroundDecoration: backgroundDecoration,minScale: minScale,maxScale: maxScale,heroAttributes: PhotoViewHeroAttributes(tag: heroTag),enableRotation: true,),),Positioned(//右上角关闭按钮right: 10,top: MediaQuery.of(context).padding.top,child: IconButton(icon: Icon(Icons.close,size: 30,color: Colors.white,),onPressed: (){Navigator.of(context).pop();},),)],),),);}}给你展示缩图的地方加上点击事件打开写好的预览界面onTap: (){Navigator.of(context).push(new FadeRoute(page: PhotoViewSimpleScreen(imageProvider:NetworkImage(img),heroTag: simple,)));},效果如上面gif的第一个效果。多图片预览再单独写一个页面作为多图片预览的界面import package:flutter/material.dart;import package:photo_view/photo_view.dart;import package:photo_view/photo_view_gallery.dart;class PhotoViewGalleryScreen extends StatefulWidget {List images[];int index0;String heroTag;PageController controller;PhotoViewGalleryScreen({Key key,required this.images,this.index,this.controller,this.heroTag}) : super(key: key){controllerPageController(initialPage: index);}override_PhotoViewGalleryScreenState createState() _PhotoViewGalleryScreenState();}class _PhotoViewGalleryScreenState extends State {int currentIndex0;overridevoid initState() {// TODO: implement initStatesuper.initState();currentIndexwidget.index;}overrideWidget build(BuildContext context) {return Scaffold(body: Stack(children: [Positioned(top: 0,left: 0,bottom: 0,right: 0,child: Container(child: PhotoViewGallery.builder(scrollPhysics: const BouncingScrollPhysics(),builder: (BuildContext context, int index) {return PhotoViewGalleryPageOptions(imageProvider: NetworkImage(widget.images[index]),heroAttributes: widget.heroTag.isNotEmpty?PhotoViewHeroAttributes(tag: widget.heroTag):null,);},itemCount: widget.images.length,loadingChild: Container(),backgroundDecoration: null,pageController: widget.controller,enableRotation: true,onPageChanged: (index){setState(() {currentIndexindex;});},)),),Positioned(//图片index显示top: MediaQuery.of(context).padding.top15,width: MediaQuery.of(context).size.width,child: Center(child: Text(${currentIndex1}/${widget.images.length},style: TextStyle(color: Colors.white,fontSize: 16)),),),Positioned(//右上角关闭按钮right: 10,top: MediaQuery.of(context).padding.top,child: IconButton(icon: Icon(Icons.close,size: 30,color: Colors.white,),onPressed: (){Navigator.of(context).pop();},),),],),);}}给你展示缩图的地方加上点击事件打开写好的预览界面onTap: (){//FadeRoute是自定义的切换过度动画(渐隐渐现) 如果不需要 可以使用默认的MaterialPageRouteNavigator.of(context).push(new FadeRoute(page: PhotoViewGalleryScreen(images:imgs,//传入图片listindex: index,//传入当前点击的图片的indexheroTag: img,//传入当前点击的图片的hero tag (可选))));},FadeRoute的源码class FadeRoute extends PageRouteBuilder {final Widget page;FadeRoute({this.page}): super(pageBuilder: (BuildContext context,Animation animation,Animation secondaryAnimation,) page,transitionsBuilder: (BuildContext context,Animation animation,Animation secondaryAnimation,Widget child,) FadeTransition(opacity: animation,child: child,),);}效果如上面gif的第二个效果。从上面的代码可以看出不管是单图还是多图预览预览界面的布局都是完全自己定义的虽然不是拿来即用但是可定制度非常高非常合适改造成自己的项目风格。常用的参数PhotoView(imageProvider: imageProvider, //要显示的图片 AssetImage 或者 NetworkImageloadingChild: loadingChild,//loading时显示的widgetbackgroundDecoration: backgroundDecoration,//背景修饰minScale: minScale,//最大缩放倍数maxScale: maxScale,//最小缩放倍数heroAttributes: PhotoViewHeroAttributes(tag: heroTag),//hero动画tag 不设置或null为不启用hero动画enableRotation: true,//是否允许旋转.....)结尾
