Flutter 图片选择器 SelectPhotoWidget

在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

如果你有兴趣你可以关注一下公众号 biglead 来获取最新的学习资料。

Flutter 从入门到精通系列文章在这里
当然也必需是要有源码的在这里了
github 有点慢不妨来看看码云的源码吧
系列学习教程在这里

先来看看本文章实现的效果

直接来看代码吧

首先是启动函数

main() {runApp(MaterialApp(//不显示 debug标签debugShowCheckedModeBanner: false,//显示的首页面home: DemoSelectImageWidgetPage(),));
}

然后是这个首页面，核心代码就是 SelectPhotoWidget 这个组件

///代码清单
class DemoSelectImageWidgetPage extends StatefulWidget {@override_DemoSelectImageWidgetPageState createState() =>_DemoSelectImageWidgetPageState();
}class _DemoSelectImageWidgetPageState extends State<DemoSelectImageWidgetPage> {@overrideWidget build(BuildContext context) {//return Scaffold(backgroundColor: Colors.grey,appBar: AppBar(title: Text("图片选择组件")),body: Center(child: Container(padding: EdgeInsets.all(12),//图片选择组件child: SelectPhotoWidget(header: Text("请选择照片",style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18),),//标题下的红色提醒文本tips: "请注意 最多选择5张图片",//图片选择回调imageSelectAction: (List<String> list) {print("实时选择回调${list.toString()}");},//最大选择图片数据maxSelect: 6,//预设图片imageList: [],),),),);}
}

将核心功能封装在了 SelectPhotoWidget 组件中，大家可以直接复制使用

///
class SelectPhotoWidget extends StatefulWidget {///每次点击选择图片后的回调final Function(List<String>) imageSelectAction;///自定义标题final Widget header;///标题下的小捍final String tips;///预显示使用的图片final List<String> imageList;///最多可选择的图片数量final int maxSelect;///为true 时显示使用网络图片final ImageType imageType;const SelectPhotoWidget({Key key,this.header,this.tips,this.imageList,this.imageType = ImageType.asset,this.imageSelectAction,this.maxSelect = 5}): super(key: key);@overrideState<StatefulWidget> createState() {return _SelectPhotoWidgetState();}
}

这里也有视频了，大家可以来瞅瞅

class _SelectPhotoWidgetState extends State<SelectPhotoWidget>with WidgetsBindingObserver {///当前是否正在选择图片bool _isSelect = false;@overridevoid initState() {super.initState();if (widget.imageList != null) {//判断一下最大选择图片数据if (widget.imageList.length <= widget.maxSelect) {_imageList = widget.imageList;} else {//截取图片_imageList = widget.imageList.sublist(0, widget.maxSelect);}}//绑定视图监听WidgetsBinding.instance.addObserver(this);}@overridevoid didChangeAppLifecycleState(AppLifecycleState state) {switch (state) {case AppLifecycleState.inactive:// 处于这种状态的应用程序应该假设它们可能在任何时候暂停。break;case AppLifecycleState.resumed://从后台切换前台，界面可见break;case AppLifecycleState.paused:// 界面不可见，后台break;case AppLifecycleState.detached:// APP结束时调用break;}}@overridevoid dispose() {//解绑视图监听WidgetsBinding.instance.removeObserver(this);super.dispose();}@overrideWidget build(BuildContext context) {//圆角矩形剪裁return ClipRRect(//圆角borderRadius: BorderRadius.all(Radius.circular(12)),child: Container(color: Color(0xffFFFFFF),//宽度填充width: double.infinity,//统一内边距padding: EdgeInsets.all(10),//垂直方向的线性排列child: Column(//水平方向crossAxisAlignment: CrossAxisAlignment.start,//包裹mainAxisSize: MainAxisSize.min,children: [//标题buildHeaderWidget(),//第二行的小提示buildTipsWidget(),//显示的图片buildGridView(),SizedBox(height: 10,),],),),);}buildHeaderWidget() {return widget.header != null ? widget.header : Container();}buildTipsWidget() {if (widget.tips == null || widget.tips.length == 0) {return Container();}return Container(padding: EdgeInsets.only(top: 10, bottom: 16),//圆角矩形裁剪child: ClipRRect(//圆角borderRadius: BorderRadius.all(Radius.circular(12)),child: Container(padding: EdgeInsets.only(left: 10, right: 10, top: 6, bottom: 6),color: Color(0xffFFF1F1),child: Text("${widget.tips}",style: TextStyle(color: Color(0xffBD2F2F),fontSize: 14,),),),),);}List<String> _imageList = [];buildGridView() {return Container(child: GridView.builder(padding: EdgeInsets.only(top: 8, bottom: 8),//包裹shrinkWrap: true,//不可滑动physics: NeverScrollableScrollPhysics(),//图片个数itemCount: getSelectCount(),//SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量WidgetgridDelegate: SliverGridDelegateWithFixedCrossAxisCount(//横轴元素个数crossAxisCount: 4,//主轴间距mainAxisSpacing: 1.0,//从轴间距crossAxisSpacing: 1.0,//子组件宽高长度比例childAspectRatio: 1.0),itemBuilder: (BuildContext context, int index) {//Widget Function(BuildContext context, int index)if (index == _imageList.length) {if (_isSelect) {return Center(child: Text("..."));}return Container(margin: EdgeInsets.only(top: 10),child: IconButton(icon: Icon(Icons.add),onPressed: () {onSelectImageFunction();},),color: Color(0xFFF1F1F2),);}//显示当前的图片String imageUrl = _imageList[index];return Container(//层叠布局child: Stack(children: [//向左下偏移一点Positioned.fill(top: 10,right: 10,child: GestureDetector(onTap: () {//查看大图},child: Container(padding: EdgeInsets.all(1),child: buildImageWidget(imageUrl),color: Colors.grey[200],),),),Positioned(top: 0,right: 0,child: GestureDetector(onTap: () {onDeleteImageFunction(index);},child: ClipOval(child: Container(padding: EdgeInsets.all(2),color: Colors.red,child: Icon(Icons.close,color: Colors.white,size: 14,),),),),),],),);},),);}Widget buildImageWidget(String image) {if (widget.imageType == ImageType.net) {return Image.network(image,fit: BoxFit.fitWidth,);} else if (widget.imageType == ImageType.asset) {return Image.asset(image,fit: BoxFit.fitWidth,);}return Image.file(File(image),fit: BoxFit.fitWidth,);}///最大选择图片数据限制getSelectCount() {if (_imageList.length >= widget.maxSelect) {return widget.maxSelect;}return _imageList.length + 1;}//删除照片void onDeleteImageFunction(int index) {_imageList.removeAt(index);setState(() {});widget.imageSelectAction(_imageList);}void onSelectImageFunction() async {_isSelect = true;setState(() {});String localImageUrl = "assets/images/sp03.png";await Future.delayed(Duration(milliseconds: 1000));_isSelect = false;if (localImageUrl.length > 0) {_imageList.add(localImageUrl);setState(() {});widget.imageSelectAction(_imageList);}}
}

Flutter 图片选择器 SelectPhotoWidget相关推荐

Android-如何开发一个功能强大的图片选择器
图片选择器是Android开发中会经常用到的一个功能,特别对于社交类的应用,比如头像设置,比如发图片.自然ImagePicker的轮子很多,今天介绍一个功能强大的轮子SImagePicker 介绍首 ...
Android 超高仿微信图片选择器图片该这么加载
2019独角兽企业重金招聘Python工程师标准>>> 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39943 ...
仿照微信的效果，实现了一个支持多选、选原图和视频的图片选择器，适配了iOS6-10系统，3行代码即可集成....
重要提示: 1. 1.9.0版本已发布,移除了"prefs:root="的调用,这个API已经被列为私有API,请大家尽快升级.其它同样使用了该API的库大家可以检查下,比如著名的 ...
android图片选择器框架支持长图,基于RxJava的Android图片选择器. – RxPicker
RxPicker 基于 RxJava 的 Android 图片选择器. 特性与 RxJava 结合,支持响应式得到选择图片结果兼容 Android 7.0 自定义 ImageLoader 预览使 ...
仿照微信的效果，实现了一个支持多选、选原图和视频的图片选择器
代码地址如下: http://www.demodashi.com/demo/11689.html 重要提示: 1. 1.9.0版本已发布,移除了"prefs:root="的调用,这 ...
Magento2创建自定义Widget 并通过添加图片选择器插入图片
为什么80%的码农都做不了架构师?>>> 创建自定义Widget 并通过添加图片选择器插入图片自定义widget 先在模块的etc 配置文件中创建widget.xml配置文件 ...
Android图片选择器PhotoPicker
前言维护的一个项目的时候发现,项目使用了一个5年前的库,是通过直接拉源码的并改写的方式来实现的.去GitHub找到了这个库PhotoPicker.作者说项目不维护了,建议大家使用zhihu/Mati ...
Android 仿微信图片选择器 PictureSelector3.0 的使用
在做项目时经常会遇到图片选着,选择单张图片还好,但类似于微信发朋友圈时可以多图选择的时候,就有点手足无措.然后在网上看了很多类似的项目,也尝试过将他们用于自己的项目,比如知乎开源图片选择库 Mati ...
React Native - 使用图片选择器react-native-image-picker拍照、选照片
http://www.hangge.com/blog/cache/detail_1617.html React Native - 使用图片选择器react-native-image-picker拍照. ...

Flutter 图片选择器 SelectPhotoWidget

Flutter 图片选择器 SelectPhotoWidget相关推荐

最新文章

热门文章