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

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

# 一、前言

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

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

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

相应的 Demo 可科学上网后在线体验: https://linxunfeng.github.io/flutter_compare_slider/ (opens new window)

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

https://github.com/LinXunFeng/flutter_compare_slider (opens new window)

# 二、使用

添加依赖

dependencies:
  compare_slider: latest_version

导入

import 'package:compare_slider/compare_slider.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(() {});
  },
);

分割线与滑块

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),
  );
}