Flutter图片操作列表插件flutter_images_action_list的使用

flutter_images_action_list 是一个用于在 Flutter 中处理图片操作的插件。它可以帮助开发者快速实现图片的选择、编辑、删除等功能，并以列表的形式展示。

以下是如何使用 flutter_images_action_list 插件的详细说明及完整示例代码。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加插件依赖：

dependencies:
  flutter_images_action_list: ^1.0.0 # 请根据实际版本号调整

然后运行以下命令安装依赖：

flutter pub get

2. 初始化插件

在项目中导入插件并初始化：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageListExample(),
    );
  }
}

3. 创建图片操作列表

使用 ImageActionList 组件来创建一个图片操作列表。以下是一个完整的示例代码：

class ImageListExample extends StatefulWidget {
  [@override](/user/override)
  _ImageListExampleState createState() => _ImageListExampleState();
}

class _ImageListExampleState extends State<ImageListExample> {
  // 存储图片路径的列表
  List<String> imagePaths = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图片操作列表'),
      ),
      body: Column(
        children: [
          // 显示图片列表
          Expanded(
            child: ImageActionList(
              imagePaths: imagePaths, // 图片路径列表
              onImageSelected: (path) {
                // 当用户选择图片时触发
                setState(() {
                  imagePaths.add(path);
                });
              },
              onImageDeleted: (index) {
                // 当用户删除图片时触发
                setState(() {
                  imagePaths.removeAt(index);
                });
              },
            ),
          ),
          // 按钮：点击后打开系统相册选择图片
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ElevatedButton(
              onPressed: () async {
                final List<String>? selectedImages = await ImageActionList.openGallery();
                if (selectedImages != null) {
                  setState(() {
                    imagePaths.addAll(selectedImages);
                  });
                }
              },
              child: Text('从相册选择图片'),
            ),
          ),
        ],
      ),
    );
  }
}

4. 功能说明

4.1 打开系统相册

• 点击按钮后，调用 ImageActionList.openGallery() 方法打开设备的相册。
• 返回值是一个包含选中图片路径的列表。

4.2 图片操作列表

• ImageActionList 组件支持以下功能：
  • 图片选择：用户可以从相册选择图片并添加到列表中。
  • 图片删除：用户可以点击图片右上角的删除按钮移除图片。
  • 图片预览：点击图片会进入全屏预览模式。

5. 运行效果

运行上述代码后，您将看到一个简单的图片操作界面：

1. 点击按钮可以从相册选择图片。
2. 选择的图片会显示在列表中。
3. 用户可以删除列表中的图片。
4. 点击图片可以查看大图。

完整示例代码

以下是完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageListExample(),
    );
  }
}

class ImageListExample extends StatefulWidget {
  [@override](/user/override)
  _ImageListExampleState createState() => _ImageListExampleState();
}

class _ImageListExampleState extends State<ImageListExample> {
  List<String> imagePaths = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图片操作列表'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ImageActionList(
              imagePaths: imagePaths,
              onImageSelected: (path) {
                setState(() {
                  imagePaths.add(path);
                });
              },
              onImageDeleted: (index) {
                setState(() {
                  imagePaths.removeAt(index);
                });
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ElevatedButton(
              onPressed: () async {
                final List<String>? selectedImages = await ImageActionList.openGallery();
                if (selectedImages != null) {
                  setState(() {
                    imagePaths.addAll(selectedImages);
                  });
                }
              },
              child: Text('从相册选择图片'),
            ),
          ),
        ],
      ),
    );
  }
}