Flutter图片网格展示插件image_grid的使用

本项目展示了如何通过网格展示图片，并且可以通过添加按钮添加更多图片或通过减号按钮移除图片。

开始使用

这个项目是一个Flutter插件包的起点，它包括了针对Android和/或iOS的平台特定实现代码。如果您想开始使用Flutter开发，请查看我们的在线文档，其中包含教程、示例、移动开发指南以及完整的API参考。

完整示例代码

以下是一个完整的示例代码，展示如何使用image_grid插件来创建一个图片网格展示界面。

// 导入必要的库
import 'dart:io'; // 用于处理文件操作
import 'package:flutter/material.dart'; // Flutter核心库
import 'dart:async'; // 异步编程支持
import 'package:flutter/services.dart'; // 平台特定功能
import 'package:image_grid/grid_image.dart'; // 图片网格组件
import 'package:image_grid/image_grid.dart'; // 插件主类

void main() {
  runApp(const MyApp()); // 启动应用
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState(); // 初始化状态
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown'; // 平台版本信息

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState(); // 初始化平台状态
  }

  // 初始化平台状态
  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion =
          await ImageGrid.platformVersion ?? 'Unknown platform version'; // 获取平台版本
    } on PlatformException {
      platformVersion = 'Failed to get platform version.'; // 错误处理
    }

    if (!mounted) return; // 如果组件已被卸载，返回

    setState(() {
      _platformVersion = platformVersion; // 更新UI
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp( // 应用入口
      home: Home(), // 主页面
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomeState createState() => _HomeState(); // 初始化状态
}

class _HomeState extends State<Home> {
  int imagecount = 0; // 当前图片数量

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold( // 页面主体
      appBar: AppBar( // 顶部导航栏
        title: const Text('图片网格示例'), // 标题
      ),
      body: Column( // 垂直布局
        mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
        children: [
          GridImage( // 图片网格组件
            compressImage: true, // 是否压缩图片
            context: context, // 上下文
            onchange: (List<File> files) { // 状态更新回调
              setState(() {
                imagecount = files.length; // 更新图片数量
              });
            },
            title: "选择图片", // 按钮标题
          ),
          SizedBox( // 空白间隔
            height: 10,
          ),
          Text("已添加的图片总数为: $imagecount") // 显示图片数量
        ],
      ),
    );
  }
}