第一百七十九回自定义SlideImageSwitch

talk_8

已于 2023-12-02 11:07:12 修改

阅读量274

点赞数 11

分类专栏：一起Talk Flutter吧文章标签：移动开发Flutter SlideSwitch 滑动图片开关

于 2023-11-25 23:49:21 首次发布

本文链接：https://blog.csdn.net/talk_8/article/details/134622513

版权

一起Talk Flutter吧专栏收录该内容

773 篇文章 19 订阅

订阅专栏

文章目录

1. 概念介绍
2. 思路与方法
- 2.1 实现思路
- 2.2 实现方法
3. 示例代码
4. 内容总结
经验分享

我们在上一章回中介绍了"SlideSwitch组件"相关的内容，本章回中将介绍 自定义SlideImageSwitch闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在前面章回中介绍了Switch组件相关的内容，并且在pub.dev中找过许多Switch类组件，这些组件中大部分都是修改开和关两种状态的风格，或者像官方Switch一样修改滑块风格，或者把开关状态的风格放到滑块上。目前还没有找到一种组件可以同时修改轨道和滑块的组件。于是我们只好自定义符合自己需求的组件。

本章回中介绍的SlideImageSwitch就是我们自定义的组件，该组件是一种通过图片做的滑动开关，它的功能和官方的Switch相同，只是它完全通过图片实现。它的轨道和滑块都是图片。下面是该组件的运行效果图，请大家参考。图中的的轨道(track)是一张图片，滑块(thumb)也是一张图片。本章回中将介绍如何去实现这样的组件。

在这里插入图片描述

2. 思路与方法

2.1 实现思路

我们在本章回中自定义的Switch完全通过图片来实现，因此可以通过Stack组合两个Image组件，一个用来表示滑块，另外一个用来表示轨道。这样便把Switch的外观创建好了，不过它还不能滑动。因此我们需要在Stack外层嵌套一个手势组件用来响应滑动事件，有滑动事件时移动滑块。

2.2 实现方法

我们在上面的小节中介绍自定义的Switch的思路，下面将介绍具体的实现方法：

创建Stack组件，并且用它包含两个Image组件；
使用Positioned控制滑块图片的位置，便于移动滑块；
在Stack组件外层添加GestureDetector组件来响应滑动事件；
在GestureDetector组件的滑动方法中获取滑动事件，并且移动滑块；
创建一个方法类型的参数，在滑块移动结束时调用该方法，把开关状态传递到组件外；

上面介绍的实现方法看着简单，但是还有一些细节需要注意：

创建Image组件时最好把它们放到自定义组件的参数中，这样操作方便修改轨道和滑块的图片；
在滑动事件中移动滑块时只需要按照水平或者垂直方向中的任意一个来移动滑动就可以；
在移动滑块时要注意滑块的移动范围，不能无限制移动，确保它在轨道范围内移动；
向外面回传开关状态值时一定在在滑块移动结束后回传，不能在移动过程中回传；

3. 示例代码

class SlideImageB extends StatefulWidget {
  const SlideImageB({super.key, required this.width, required this.height,
    required this.trackImage, required this.thumbImage, required this.onValueChanged});

  ///这个长度和宽度是容器的大小也是图片的大小，图片不够时会进行拉伸。这样操作的缺点是没有边距
  final double width;
  final double height;
  ///轨道和滑块的图片
  final ImageProvider<Object> trackImage;
  final ImageProvider<Object> thumbImage;

  final ValueChanged<bool>? onValueChanged;

  @override
  State<SlideImageB> createState() => _SlideImageBState();
}

class _SlideImageBState extends State<SlideImageB> {

  ///控制滑动的范围,它是背景图片与滑动图片高度的差值，也就是未滑动前可以看到的背景图片大小
  double scrollRange = 60;
  ///这个值默认是scrollRange的一半
  double slideValue = 60;
  bool switchOn = false;

  @override
  Widget build(BuildContext context) {

    return Container(
      color: Colors.green,
      width: widget.width,
      height: widget.height,
      ///使用Listener和GestureDetector都可以
      child: GestureDetector(
        child: Stack(
          alignment: Alignment.center,
          children: [
            ///背景图片
            Image(
              width: widget.width,
              height: widget.height,
              image: widget.trackImage,
              fit: BoxFit.fill,
            ),
            ///可以滑动的图片
            ///使用Position控制坐标
            Positioned(
              left: 0,
              top: slideValue,
              child: Image(
                  width: widget.width,
                  height: widget.height-scrollRange,
                  image: widget.thumbImage,
                  fit: BoxFit.fill,
              ),
            ),
          ],
        ),
        ///响应滑动事件
        onPanUpdate: (event){
          setState(() {
            slideValue += event.delta.dy;

            if(slideValue > scrollRange) {
              slideValue = scrollRange;
              switchOn = true;
            }
            if(slideValue < 0) {
              slideValue = 0;
              switchOn = false;
            }

          });
        },
        ///通过回调传递开关的结果需要在手势滑动结束后，不能在手势滑动过程中
        onPanEnd: (details){
          ///使用了call语法
          widget.onValueChanged?.call(switchOn);
        },
      ),
    );
  }
}