Flutter图片及视频选择插件qq_assets_picker的使用

Flutter 图片及视频选择插件 qq_assets_picker 的使用

简介

qq_assets_picker 是一个基于 QQ 用户界面设计的 Flutter 插件。它允许用户从设备中选择图片和视频。

安装

首先，在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  qq_assets_picker: ^1.0.0 # 请替换为最新版本号

然后运行 flutter pub get 来安装该插件。

使用示例

以下是一个完整的示例代码，展示了如何使用 qq_assets_picker 插件来选择图片和视频。

import 'package:flutter/material.dart';
import 'package:qq_assets_picker/qq_assets_picker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('QQ Assets Picker 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              _pickAssets(context);
            },
            child: Text('选择图片和视频'),
          ),
        ),
      ),
    );
  }

  // 选择图片和视频的方法
  void _pickAssets(BuildContext context) async {
    final result = await AssetsPicker.openPicker(
      context,
      maxAssets: 10, // 最多选择的数量
      pickType: PickType.imageAndVideo, // 选择类型：图片和视频
    );

    if (result != null && result.isNotEmpty) {
      // 处理选择的结果
      print('选择了 ${result.length} 个资产');
      for (var asset in result) {
        print('文件路径: ${asset.path}');
      }
    } else {
      print('未选择任何资产');
    }
  }
}

代码解释

  1. 导入必要的库：

    import 'package:flutter/material.dart';
import 'package:qq_assets_picker/qq_assets_picker.dart';

  2. 创建主应用类：

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('QQ Assets Picker 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              _pickAssets(context);
            },
            child: Text('选择图片和视频'),
          ),
        ),
      ),
    );
  }

  3. 定义选择方法：

    void _pickAssets(BuildContext context) async {
  final result = await AssetsPicker.openPicker(
    context,
    maxAssets: 10, // 最多选择的数量
    pickType: PickType.imageAndVideo, // 选择类型：图片和视频
  );

  if (result != null && result.isNotEmpty) {
    // 处理选择的结果
    print('选择了 ${result.length} 个资产');
    for (var asset in result) {
      print('文件路径: ${asset.path}');
    }
  } else {
    print('未选择任何资产');
  }
}

更多关于Flutter图片及视频选择插件qq_assets_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片及视频选择插件qq_assets_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


qq_assets_picker 是一个 Flutter 插件，用于从设备中选择图片和视频。它基于 photo_manager 和 wechat_assets_picker，提供了更简洁的 API 和更好的用户体验。以下是如何使用 qq_assets_picker 插件的详细步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 qq_assets_picker 依赖：

dependencies:
  flutter:
    sdk: flutter
  qq_assets_picker: ^2.0.0  # 请根据最新版本号进行替换

然后运行 flutter pub get 来安装依赖。

2. 配置权限

在 Android 和 iOS 上，你需要配置相应的权限来访问设备上的图片和视频。

Android

在 android/app/src/main/AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

iOS

在 ios/Runner/Info.plist 文件中添加以下权限：

<key>NSPhotoLibraryUsageDescription</key>
<string>我们需要访问您的相册以选择图片和视频</string>
<key>NSCameraUsageDescription</key>
<string>我们需要访问您的相机以拍摄图片和视频</string>

3. 使用插件

在你的 Flutter 代码中，你可以使用 qq_assets_picker 来选择和展示图片及视频。

基本用法

import 'package:flutter/material.dart';
import 'package:qq_assets_picker/qq_assets_picker.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<AssetEntity> _selectedAssets = [];

  Future<void> _pickAssets() async {
    final List<AssetEntity>? result = await QqAssetsPicker.pickAssets(
      context,
      maxAssets: 10, // 最多选择 10 个文件
      requestType: RequestType.common, // 选择图片和视频
      themeColor: Colors.blue, // 主题颜色
    );

    if (result != null) {
      setState(() {
        _selectedAssets = result;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QQ Assets Picker Demo'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: _pickAssets,
            child: Text('选择图片和视频'),
          ),
          Expanded(
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 4.0,
                mainAxisSpacing: 4.0,
              ),
              itemCount: _selectedAssets.length,
              itemBuilder: (context, index) {
                return AssetEntityImage(
                  _selectedAssets[index],
                  isOriginal: false,
                  thumbnailSize: ThumbnailSize.square(200),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyHomePage(),
));

4. 解释代码

  • QqAssetsPicker.pickAssets: 打开图片和视频选择器。你可以设置最大选择数量、请求类型（图片、视频或两者）以及主题颜色。
  • AssetEntity: 代表选择的图片或视频。
  • AssetEntityImage: 用于显示选择的图片或视频的缩略图。

5. 其他功能

qq_assets_picker 还支持以下功能：

  • 多选/单选: 通过 maxAssets 参数控制最多选择的文件数量。
  • 自定义主题: 通过 themeColor 参数自定义选择器的主题颜色。
  • 过滤文件类型: 通过 requestType 参数选择只选取图片、视频或两者。

6. 处理选择的文件

你可以通过 AssetEntity 获取文件的原始数据、路径等信息，并将其上传到服务器或进行其他操作。

Future<void> _handleAssets() async {
  for (var asset in _selectedAssets) {
    final file = await asset.file;
    if (file != null) {
      // 处理文件
      print('File path: ${file.path}');
    }
  }
}
回到顶部