Flutter 拖拉对比组件，换装图片前后对比必备

欢迎关注微信公众号：FSA全栈行动 👋

一、前言

最近一个需求，需要在 photo_view 中实现拖拉对比两张图片的功能，要求不影响左右翻页及缩放手势。

其中前后图片上需要显示一些额外的信息，所以更准确来说，要对比的是两个视图，而不单单只是图片。

市面上几个现有的组件库，要么只能传入 Image，要么只允许全屏拖拽，且无法满足我们高自定义的需要，所以我自己做了一个。

相应的 Demo 可科学上网后在线体验: linxunfeng.github.io/flutter_com...

OK，接下来我们就来看看具体使用

github.com/LinXunFeng/...

二、使用

添加依赖

yaml 复制代码

dependencies:
  compare_slider: latest_version

导入

dart 复制代码

import 'package:compare_slider/compare_slider.dart';

使用

dart 复制代码

double value = 0.5;
double thickness = 1;
bool dragOnlyOnSlider = true;

CompareSlider(
  // 当前值 [0, 1]
  value: value,
  // 是否只允许在滑块区域拖拽
  dragOnlyOnSlider: dragOnlyOnSlider,
  // 原图视图（接收类型为 Widget，不局限于图片）
  before: _buildImageView(isBefore: true),
  // 换装后的视图
  after: _buildImageView(isBefore: false),
  // 分割线厚度
  thickness: thickness,
  // 拖拽的滑块和分割线
  thumb: _buildThumb(),
  // 滑块值改变时触发的回调
  onValueChanged: (double value) {
    this.value = value;
    setState(() {});
  },
);

分割线与滑块

dart 复制代码

Widget _buildThumb() {
  return Stack(
    clipBehavior: Clip.none,
    alignment: Alignment.center,
    children: [
      // 分割线
      _buildSliderLine(),
      // 滑块
      Positioned(
        left: -(thumbSize - thickness) / 2,
        child: _buildSliderThumb(),
      ),
    ],
  );
}

Widget _buildSliderLine() {
  return Container(
    width: thickness,
    color: Colors.white.withValues(alpha: 0.5),
  );
}

thickness 是分割线的宽度，传入用于提前计算其偏移量。

dragOnlyOnSlider 默认为 false，即全区域拖动，如果设置为 true，则默认情况下，交互区域为 _buildSliderLine() 视图。

有时分割线的宽度较小，而你想扩大交互范围时，则可以通过 extraHitTestArea 来实现，结合 debugHitTestAreaColor 可清晰知道交互范围，如文章顶部动图中半透明红色。

为了不影响 photo_view 的缩放手势，可以在开始触摸滑块时（onSliderThumbTouchBegin 回调）禁用手势，在结束触摸滑块时（onSliderThumbTouchEnd 回调）恢复手势即可。

三、最后

好了，开源不易，如果你也觉得这个库好用，请不吝给个 Star 👍 ，并多多支持！

github.com/LinXunFeng/...

本篇到此结束，感谢大家的支持，我们下次再见！ 👋

如果文章对您有所帮助, 请不吝点击关注一下我的微信公众号：FSA全栈行动, 这将是对我最大的激励. 公众号不仅有 iOS 技术，还有 Android，Flutter，Python 等文章, 可能有你想要了解的技能知识点哦~