Flutter多图展示插件multi_image_view的使用

Flutter多图展示插件multi_image_view的使用

Multi Image View 将帮助你添加并展示多张图片，并在返回时给你一个数据列表。

特性

它可以帮助你在页面上添加多张图片。它处理从显示到从选定图片检索信息的所有工作。你可以添加、删除和读取图片的信息。

开始使用

首先，你需要在你的 pubspec.yaml 文件中添加 multi_image_view 依赖：

dependencies:
  multi_image_view: ^x.y.z

然后，在你的 Dart 文件中导入以下包：

import 'package:multi_image_view/multi_image_view.dart';
import 'package:multi_image_view/providers/image_picker_provider.dart';

使用方法

下面是一个简单的示例，展示了如何在应用中使用 MultiImageView：

Container(
  height: 100,
  child: MultiImageView(
    controller: controller,
    onImageSelect: (imageModel) {},
  ),
);

完整示例

下面是一个完整的示例，展示了如何在一个 Flutter 应用中集成 MultiImageView。

import 'package:flutter/material.dart';
import 'package:multi_image_view/enum/image_source_types.dart';
import 'package:multi_image_view/multi_image_view.dart';
import 'package:multi_image_view/providers/image_picker_provider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  MultiImageController controller = MultiImageController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
      ),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SizedBox(
        height: 100,
        child: MultiImageView(
          controller: controller,
          imageSource: ImageSourceType.choice,
          onImageSelect: (imageModel) {},
        ),
      ),
    );
  }
}