Flutter 一行代码实现9宫格图片选择器

dd_js_util

Flutter 常用组件

封装了一些APP制作中常见的一些小组件,这篇博客介绍一下一行代码实现9宫格图片选择器

安装

dd_js_util: ^0.1.0

如何使用?

1.声明组件

PictureSelection(multipleChoice: true,controller: _pictureSelectionController),

预览

2. 可选配置 (一般用默认的就可以了)

/// 一行展示多少张图片
  ///
  /// 默认: 3
  final int columnCount;

  ///最多可以选择几张图片
  ///
  /// 默认: 9
  final int maxCount;

  /// 每张图片之间的间距 (横向)
  ///
  /// 默认:12
  final double? mainAxisSpacing;

  /// 每张图片之间的间距 (竖向)
  ///
  /// 默认: 12
  final double? crossAxisSpacing;

  /// 组件的边距
  ///
  /// 默认: 12
  final EdgeInsets? padding;

  /// 是否允许多选
  ///
  /// 默认false
  final bool multipleChoice;

  /// 删除某个图片回调
  /// 如果添加了这个参数,组件将不会执行默认的删除函数
  final ValueChanged? removed;

  /// 自定义图片布局
  ///
  ///
  ///
  /// 例子
  ///                 itemBuilder: ( context, file, size, onRemove){
  ///                   return SizedBox(
  ///                     width: size.width,
  ///                     height: size.height,
  ///                     child: GestureDetector(child: Image.file(file),onTap:(){
  ///                       //点击图片删除
  ///                       onRemove(file);
  ///                     }),
  ///                   );
  ///                 },
  ///
  ///
  final ImageItemRender? itemBuilder;

  /// 自定义占位小部件
  ///
  ///
  /// 例子
  ///                 placeholderBuilder: (size) {
  ///                   return SizedBox(
  ///                       width: size.width,
  ///                       height: size.height,
  ///                       child: Center(
  ///                         child: Column(
  ///                           mainAxisAlignment: MainAxisAlignment.center,
  ///                           children: [
  ///                             Icon(Icons.add),
  ///                             SizedBox(height: 2),
  ///                             Text('添加图片'),
  ///                           ],
  ///                         ),
  ///                       ));
  ///                 },
  ///
  ///
  final PlaceholderBuilder? placeholderBuilder;

  /// 自定义弹出菜单布局
  ///
  /// [Function] - 参数1 - 相册选择方式回调函数
  /// [Function] - 参数2 - 相机拍摄选择模式
  ///
  ///
  /// 例子:
  ///                 menusBuilder: (a,b){
  ///                   return Container(
  ///                     color: Colors.pink,
  ///                     child: SingleChildScrollView(
  ///                       child: Column(children: [
  ///                         TextButton(child: Text('图库选择'),onPressed: () async {
  ///                           await a();
  ///                         },),
  ///                         TextButton(child: Text('相机选择'),onPressed: () async {
  ///                           await b();
  ///                         },)
  ///                       ],)
  ///                     ),
  ///                   );
  ///                 },
  ///
  ///
  final MenusBuilder? menusBuilder;

  /// 组件的控制器
  final PictureSelectionController? controller;

3. 控制器API

//1). 获取用户选择或者拍摄的图片
List files = _pictureSelectionController.getFiles;

//2). 清空全部图片
_pictureSelectionController.clean();

//3). 获取图片数量
_pictureSelectionController.length;