dd_js_util

Flutter 常用組件

封裝了一些APP制作中常見(jiàn)的一些小組件,這篇博客介紹一下一行代碼實(shí)現(xiàn)9宮格圖片選擇器

安裝

dd_js_util: ^0.1.0

如何使用?

1.聲明組件

PictureSelection(multipleChoice: true,controller: _pictureSelectionController),

預(yù)覽

2. 可選配置 (一般用默認(rèn)的就可以了)

 /// 一行展示多少?gòu)垐D片
  ///
  /// 默認(rèn): 3
  final int columnCount;

  ///最多可以選擇幾張圖片
  ///
  /// 默認(rèn): 9
  final int maxCount;

  /// 每張圖片之間的間距 (橫向)
  ///
  /// 默認(rèn):12
  final double? mainAxisSpacing;

  /// 每張圖片之間的間距 (豎向)
  ///
  /// 默認(rèn): 12
  final double? crossAxisSpacing;

  /// 組件的邊距
  ///
  /// 默認(rèn): 12
  final EdgeInsets? padding;

  /// 是否允許多選
  ///
  /// 默認(rèn)false
  final bool multipleChoice;

  /// 刪除某個(gè)圖片回調(diào)
  /// 如果添加了這個(gè)參數(shù),組件將不會(huì)執(zhí)行默認(rèn)的刪除函數(shù)
  final ValueChanged<File>? removed;

  /// 自定義圖片布局
  ///
  ///
  ///
  /// 例子
  ///                 itemBuilder: ( context, file, size, onRemove){
  ///                   return SizedBox(
  ///                     width: size.width,
  ///                     height: size.height,
  ///                     child: GestureDetector(child: Image.file(file),onTap:(){
  ///                       //點(diǎn)擊圖片刪除
  ///                       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] - 參數(shù)1 - 相冊(cè)選擇方式回調(diào)函數(shù)
  /// [Function] - 參數(shù)2 - 相機(jī)拍攝選擇模式
  ///
  ///
  /// 例子:
  ///                 menusBuilder: (a,b){
  ///                   return Container(
  ///                     color: Colors.pink,
  ///                     child: SingleChildScrollView(
  ///                       child: Column(children: [
  ///                         TextButton(child: Text('圖庫(kù)選擇'),onPressed: () async {
  ///                           await a();
  ///                         },),
  ///                         TextButton(child: Text('相機(jī)選擇'),onPressed: () async {
  ///                           await b();
  ///                         },)
  ///                       ],)
  ///                     ),
  ///                   );
  ///                 },
  ///
  ///
  final MenusBuilder? menusBuilder;

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

3. 控制器API

//1). 獲取用戶選擇或者拍攝的圖片
List<File> files = _pictureSelectionController.getFiles;

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

//3). 獲取圖片數(shù)量
_pictureSelectionController.length;