Flutter微信资源选择器插件reactive_wechat_assets_picker的使用

Flutter微信资源选择器插件reactive_wechat_assets_picker的使用

reactive_wechat_assets_picker 是一个基于 wechat_assets_picker 的封装插件，用于与 reactive_forms 配合使用。目前文档还在编写中，可以在示例文件夹中查看示例代码。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 reactive_wechat_assets_picker 插件来选择微信资源。

import 'package:flutter/material.dart';
import 'package:reactive_wechat_assets_picker/reactive_wechat_assets_picker.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_wechat_assets_picker_example/selected_assets_list_view.dart'; // 假设这是一个自定义组件

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 构建表单
  FormGroup buildForm() => fb.group({
        'input': FormControl<List<AssetEntity>>(value: []),
      });

  // 移除选中的资产
  Function(int index) remove(List<AssetEntity> assets) {
    return (int index) {
      assets.removeAt(index);
      setState(() {});
    };
  }

  // 处理选择结果
  void onResult(List<AssetEntity>? assets) {
    if (mounted) {
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: SafeArea(
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            padding: const EdgeInsets.symmetric(
              horizontal: 20.0,
              vertical: 20.0,
            ),
            child: ReactiveFormBuilder(
              form: buildForm,
              builder: (context, form, child) {
                return Column(
                  children: [
                    // 使用 ReactiveWechatAssetsPicker 组件选择微信资源
                    ReactiveWechatAssetsPicker<List<AssetEntity>>(
                      formControlName: 'input',
                      imagePickerBuilder: (pick, images, _) {
                        return Column(
                          children: [
                            // 显示已选择的资产列表
                            SelectedAssetsListView(
                              assets: images,
                              isDisplayingDetail: ValueNotifier(true),
                              onResult: onResult,
                              onRemoveAsset: remove(images),
                            ),
                            // 按钮用于触发资源选择
                            ElevatedButton(
                              onPressed: pick,
                              child: const Text('Pick'),
                            ),
                          ],
                        );
                      },
                    ),
                    // 提交按钮
                    ElevatedButton(
                      child: const Text('Submit'),
                      onPressed: () {
                        if (form.valid) {
                          debugPrint(form.value.toString());
                        }
                      },
                    ),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

说明

1. 导入必要的包：

   import 'package:flutter/material.dart';
   import 'package:reactive_wechat_assets_picker/reactive_wechat_assets_picker.dart';
   import 'package:reactive_forms/reactive_forms.dart';
   

2. 构建表单：

   FormGroup buildForm() => fb.group({
         'input': FormControl<List<AssetEntity>>(value: []),
       });
   

3. 处理移除操作：

   Function(int index) remove(List<AssetEntity> assets) {
     return (int index) {
       assets.removeAt(index);
       setState(() {});
     };
   }
   

4. 处理选择结果：

   void onResult(List<AssetEntity>? assets) {
     if (mounted) {
       setState(() {});
     }
   }
   

5. 构建应用界面：

   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: Scaffold(
       appBar: AppBar(),
       body: SafeArea(
         child: SingleChildScrollView(
           physics: const BouncingScrollPhysics(),
           padding: const EdgeInsets.symmetric(
             horizontal: 20.0,
             vertical: 20.0,
           ),
           child: ReactiveFormBuilder(
             form: buildForm,
             builder: (context, form, child) {
               return Column(
                 children: [
                   ReactiveWechatAssetsPicker<List<AssetEntity>>(
                     formControlName: 'input',
                     imagePickerBuilder: (pick, images, _) {
                       return Column(
                         children: [
                           SelectedAssetsListView(
                             assets: images,
                             isDisplayingDetail: ValueNotifier(true),
                             onResult: onResult,
                             onRemoveAsset: remove(images),
                           ),
                           ElevatedButton(
                             onPressed: pick,
                             child: const Text('Pick'),
                           ),
                         ],
                       );
                     },
                   ),
                   ElevatedButton(
                     child: const Text('Submit'),
                     onPressed: () {
                       if (form.valid) {
                         debugPrint(form.value.toString());
                       }
                     },
                   ),
                 ],
               );
             },
           ),
         ),
       ),
     ),
   );