Flutter图片对比插件before_after的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter图片对比插件before_after的使用

插件介绍

before_after 是一个Flutter插件,它使展示两张图片之间的差异变得简单。通过拖动滑块,用户可以在“之前”和“之后”的图像之间进行切换查看。此插件完全由Dart编写,并且源代码位于GitHub仓库的/lib文件夹中。

Before After Example

安装

在你的pubspec.yaml文件中的dependencies部分添加以下内容:

dependencies:
  before_after: ^latest_version # 请替换为最新版本号

可以通过访问Pub Package Page来获取最新的版本信息。

使用方法

导入包

首先需要导入before_after包:

import 'package:before_after/before_after.dart';

示例代码

下面是一个完整的示例应用,展示了如何使用BeforeAfter小部件来比较两张图片。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(useMaterial3: true),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var value = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[300],
      appBar: AppBar(
        title: const Text('Before After'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Flexible(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: BeforeAfter(
                    value: value,
                    before: Image.asset('assets/after.png'), // 替换为你的图片路径
                    after: Image.asset('assets/before.png'),  // 替换为你的图片路径
                    onValueChanged: (value) {
                      setState(() => this.value = value);
                    },
                  ),
                ),
              ),
            ),
            const SizedBox(height: 20),
            Flexible(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: BeforeAfter(
                    value: value,
                    before: Image.asset('assets/after.jpg'), // 替换为你的图片路径
                    after: Image.asset('assets/before.jpg'),  // 替换为你的图片路径
                    direction: SliderDirection.vertical, // 设置滑块方向为垂直
                    onValueChanged: (value) {
                      setState(() => this.value = value);
                    },
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

自定义与属性

BeforeAfter组件提供了丰富的自定义选项,以下是部分常用属性:

属性名 类型 描述
before Widget 滑块左侧显示的小部件(通常是图片)
after Widget 滑块右侧显示的小部件(通常是图片)
direction SliderDirection 滑块的拖动方向(水平或垂直)
height double? 组件的高度
width double? 组件的宽度
trackWidth double? 滑轨的宽度
trackColor Color? 滑轨的颜色
hideThumb bool 是否隐藏滑块拇指
thumbHeight double? 滑块拇指的高度
thumbWidth double? 滑块拇指的宽度
thumbColor Color? 滑块拇指的颜色
overlayColor MaterialStateProperty<Color?>? 滑块拇指聚焦时的高亮颜色
thumbDecoration BoxDecoration? 滑块拇指的装饰样式
divisions int? 滑块上的离散分段数量
value double 滑块的位置值(范围:0.0 - 1.0)
onValueChanged ValueChanged<double> 当滑块位置改变时触发的回调函数
thumbDivisions int? 滑块拇指上的离散分段数量
thumbPosition double 滑块拇指的位置值(范围:0.0 - 1.0)
onThumbPositionChanged ValueChanged<double> 当滑块拇指位置改变时触发的回调函数
focusNode FocusNode? 组件的焦点节点
autofocus bool 组件是否自动获取焦点
mouseCursor MouseCursor? 当鼠标悬停在组件上时使用的光标

以上就是before_after插件的基本使用方法,希望对你有所帮助!如果你有任何问题或建议,请随时提出。


更多关于Flutter图片对比插件before_after的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片对比插件before_after的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter中使用before_after插件来进行图片对比的一个示例代码。before_after插件允许用户通过滑动来查看图片的前后变化(例如,在装修应用中查看装修前后的对比)。

首先,你需要在pubspec.yaml文件中添加before_after插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  before_after: ^x.y.z  # 请将x.y.z替换为最新版本号

然后,运行flutter pub get来安装该插件。

接下来,在你的Flutter项目中,你可以使用以下代码来展示图片对比:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Before After Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Before After Example'),
        ),
        body: Center(
          child: BeforeAfter(
            size: Size(300, 400),  // 设置图片的尺寸
            beforeImage: NetworkImage('https://example.com/before.jpg'),  // 替换为实际的前置图片URL
            afterImage: NetworkImage('https://example.com/after.jpg'),    // 替换为实际的后置图片URL
            alignment: Alignment.center,
            overlayColor: Colors.grey.withOpacity(0.5),
            overlayStrength: 0.5,
            onSliderChange: (value) {
              // 当滑块位置改变时的回调,可以根据需要实现
              print('Slider value: $value');
            },
          ),
        ),
      ),
    );
  }
}

// 自定义一个NetworkImage类,因为before_after插件要求传入的是ImageProvider类型
class NetworkImage extends StatelessWidget implements ImageProvider {
  final String url;

  NetworkImage(this.url);

  @override
  ImageStreamCompleter load(ImageProviderKey key) {
    final Completer<ImageStream> completer = Completer<ImageStream>();
    ImageProvider imageProvider = NetworkImage.load(url);
    imageProvider.resolve(createLocalImageConfiguration(context: null)).addListener(
      ImageStreamListener((ImageInfo image, bool syncCall) {
        completer.complete(ImageStream.fromKey(
          key,
          [image],
          scale: image.scale,
        ));
      }),
    );
    return completer.future.completer;
  }

  @override
  Future<void> obtainKey(ImageConfiguration configuration) {
    // 这个实现是为了符合ImageProvider接口
    return SynchronousFuture<void>(null);
  }

  @override
  Widget build(BuildContext context) {
    return Image.network(url);
  }

  // 静态方法,用于直接加载网络图片
  static ImageProvider load(String url) {
    return NetworkImageWithCacheKey(url);
  }
}

// 辅助类,用于处理缓存
class NetworkImageWithCacheKey extends NetworkImage {
  NetworkImageWithCacheKey(String url) : super(url);

  @override
  ScaleKey get key => ScaleKey(url, scale: 1.0);
}

注意

  1. before_after插件要求传入的是ImageProvider类型,因此这里我们自定义了一个NetworkImage类来实现这一功能。实际上,你可以直接使用NetworkImage类作为图片提供者,但这里为了符合插件的要求,做了一些额外的封装。

  2. url需要替换为你实际要展示的图片URL。

  3. size参数用于设置图片的显示尺寸,你可以根据需要进行调整。

  4. alignmentoverlayColoroverlayStrength等参数用于调整对比效果,你可以根据需求进行调整。

希望这个示例代码能帮助你在Flutter项目中使用before_after插件来实现图片对比功能。

回到顶部