Flutter通用图片加载插件generic_image的使用

Generic Image 是一个功能丰富的 Flutter 小部件，用于显示多种格式的图像，包括 SVG、PNG 和 JPEG。此外，它还支持网络图片。该插件内置了占位符和错误处理功能，并且可以通过缓存机制来优化网络图片的加载。

功能

• 支持多种图像格式：SVG、PNG、JPEG。
• 自动检测文件格式。
• 内置占位符和错误小部件。
• 网络图片缓存支持。
• 通过 SvgStyle 类进行广泛自定义。

安装

1. 添加包到你的 pubspec.yaml

dependencies:
  generic_image: ^0.1.0

2. 安装包

flutter pub get

使用

基本用法

import 'package:generic_image/generic_image.dart';

GenericImage(
  src: 'path_to_your_image/image.svg',
  format: ImageFormat.svg,
)

自动格式检测

GenericImage(
  src: 'path_to_your_image/image.svg',
  format: ImageFormat.detectAutomatically,
)

使用占位符和错误小部件

GenericImage(
  src: 'https://your_image_url/image.png',
  format: ImageFormat.png,
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

SVG 样式定制

GenericImage(
  src: 'path_to_your_image/image.svg',
  format: ImageFormat.svg,
  svgStyle: SvgStyle(
    color: Colors.red,
    alignment: Alignment.center,
    // 其他样式属性...
  ),
)

示例应用

在 example 目录中有一个详细的示例项目，展示了 generic_image 包的各种特性。要运行示例应用：

1. 导航到 example 目录：

cd example

1. 运行示例应用：

flutter run

示例代码

以下是 example/lib/main.dart 中的示例代码：

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

void main() => runApp(const GenericImageExampleApp());

class GenericImageExampleApp extends StatelessWidget {
  const GenericImageExampleApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GenericImage Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  ImageFormat? _selectedFormat;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GenericImage Example'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // 图像格式选择器
              DropdownButton<ImageFormat>(
                value: _selectedFormat,
                hint: const Text('选择图像格式'),
                onChanged: (ImageFormat? newValue) {
                  setState(() {
                    _selectedFormat = newValue;
                  });
                },
                items: const [
                  DropdownMenuItem<ImageFormat>(
                    value: ImageFormat.png,
                    child: Text("PNG 格式"),
                  ),
                  DropdownMenuItem<ImageFormat>(
                    value: ImageFormat.svg,
                    child: Text("SVG 格式"),
                  ),
                  DropdownMenuItem<ImageFormat>(
                    value: ImageFormat.network,
                    child: Text("网络图片"),
                  )
                ],
              ),

              // SVG 图像示例
              if (_selectedFormat == ImageFormat.svg || _selectedFormat == null)
                const Padding(
                  padding: EdgeInsets.only(top: 20.0),
                  child: GenericImage(
                    src: 'assets/home-icon.svg',
                    format: ImageFormat.svg,
                    height: 250,
                    width: 200,
                  ),
                ),

              // PNG 图像示例
              if (_selectedFormat == ImageFormat.png || _selectedFormat == null)
                const Padding(
                  padding: EdgeInsets.only(top: 20.0),
                  child: GenericImage(
                    src: 'assets/facebook-square-icon.png',
                    format: ImageFormat.png,
                    height: 250,
                    width: 200,
                  ),
                ),

              // 网络图片示例
              if (_selectedFormat == ImageFormat.network || _selectedFormat == null)
                const Padding(
                  padding: EdgeInsets.only(top: 20.0),
                  child: GenericImage(
                    src:
                        'https://cdn.pixabay.com/photo/2023/08/19/17/36/bird-8200917_1280.jpg',
                    format: ImageFormat.jpg,
                    height: 250,
                    width: 200,
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}