Flutter图片平滑浏览插件smooth_image_view的使用

Flutter图片平滑浏览插件smooth_image_view的使用

SmoothImageView Flutter Package

一个简单的Flutter包，提供了一个灵活的图像渲染小部件，能够从各种来源（如本地文件、应用资源和网络URL）显示图像，并支持自定义占位符和加载效果。

特性：

• 支持从以下位置加载图像：
  • 本地设备文件
  • 应用捆绑的资源
  • 网络URL（带缓存）
• 包含对获取网络图像时带有闪烁效果的占位符的支持。
• 可配置的高度、宽度和BoxFit以更好地控制布局。
• 易于在Flutter应用中用于动态图像渲染。

安装：

在pubspec.yaml文件中添加smooth_image_view：

dependencies:
  smooth_image_view: ^1.2.0

然后运行以下命令安装包：

flutter pub get

使用方法：

import 'package:smooth_image_view/smooth_image_view.dart';

// 在你的小部件树中：
SmoothImageView(
  image: 'https://example.com/image.jpg', // 网络URL、文件路径或资产路径
  type: ImageType.networks, // 选择ImageType.assets、ImageType.files或ImageType.networks
  height: 200.0,
  width: 200.0,
  placeHolder: CircularProgressIndicator(), // 自定义占位符小部件
  fit: BoxFit.cover, // 控制图像如何适应
),

参数：

• image: 必需 图像源（URL、文件路径或资产路径）。

• type: 必需 图像源的类型（ImageType.assets、ImageType.files或ImageType.networks）。

• placeHolder: 可选 图像加载时显示的小部件。默认为闪烁效果。

• height: 可选 图像的高度（以像素为单位）。

• width: 可选 图像的宽度（以像素为单位）。

• fit: 可选 图像应如何在其边界内适应。默认为BoxFit.cover。

• shimmerBaseColor: 可选 闪烁效果的基础颜色。默认为Colors.grey.shade300。

• shimmerHighlightColor: 可选 闪烁效果的高亮颜色。默认为Colors.grey.shade900。

示例：

以下是更详细的示例，说明如何在Flutter应用程序中使用SmoothImageView小部件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Smooth Image View Example'),
        ),
        body: Center(
          child: SmoothImageView(
            image: 'https://example.com/image.jpg', // 网络URL、文件路径或资产路径
            type: ImageType.networks, // 选择ImageType.assets、ImageType.files或ImageType.networks
            height: 200.0,
            width: 200.0,
            placeHolder: CircularProgressIndicator(), // 自定义占位符小部件
            fit: BoxFit.cover, // 控制图像如何适应
            shimmerBaseColor: Colors.grey.shade300,
            shimmerHighlightColor: Colors.grey.shade900,
          ),
        ),
      ),
    );
  }
}

更详细的示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SmoothImageView(
              image: "https://docs.flutter.dev/assets/images/dash/dash-fainting.gif", // 图像URL
              type: ImageType.networks, // 图像来源类型
            ),
            const Text(
              'You have pushed the button this many times:', // 按钮点击次数文本
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium, // 计数器文本样式
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // 增加计数器
        tooltip: 'Increment',
        child: const Icon(Icons.add), // 增加按钮图标
      ),
    );
  }
}