Flutter绘制轮播图控件KqSwiper

ゝ一世哀愁。 2024-03-25 16:55 36阅读 0赞

*  **演示**

![0affe1380b5547baba6274dcbf61871e.png][]

*  **功能**

1.可自定义设置宽高

2.可点击回调

3.可设置是否自动轮播

4.可设置指示器，抽象类IIndicator,IWidgetIndicator,IDrawIndicator

*  **代码**

import 'dart:async';
    import 'dart:ui' as ui;
    
    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    
    class KqSwiper<T extends IShowData> extends StatefulWidget {
      /// 展示的数据
      final List<T> showData;
    
      /// 点击回调
      final Function(int index, T data)? onTap;
    
      /// 界面宽度
      final double width;
    
      /// 界面高度
      final double height;
    
      /// 是否开启自动滑动
      final bool isAutoSlide;
    
      ///指示器
      final IIndicator? indicator;
    
      const KqSwiper(
          {super.key,
          required this.showData,
          this.onTap,
          this.width = 360,
          this.height = 250,
          this.isAutoSlide = true,
          this.indicator});
    
      @override
      State<StatefulWidget> createState() => _KqSwiperState<T>();
    }
    
    class _KqSwiperState<T extends IShowData> extends State<KqSwiper<T>> {
      /// 执行自动滑动的时间间隔s
      static const int slideTime = 6;
    
      /// 图片数据
      final List<ui.Image> images = [];
    
      /// 当前正在显示的图片
      int index = 0;
    
      /// 前一张图片
      ui.Image? _preImage;
    
      /// 当前图片
      ui.Image? _curImage;
    
      /// 下一张图片
      ui.Image? _nextImage;
    
      /// 滑动偏移
      double _offset = 0;
    
      /// 执行滑动动画计时器
      Timer? timer;
    
      ///定时滑动计时器
      Timer? timer2;
    
      /// 指示器
      IIndicator? _indicator;
    
      /// 当Indicator的类型为widget时的widget列表值
      List<Widget>? _indicatorWidgetList;
    
      @override
      void initState() {
        _initImage();
        _indicator = widget.indicator ?? DrawIndicator();
        super.initState();
      }
    
      void _initImage() async {
        for (T data in widget.showData) {
          images.add(await getImage(data,
              width: widget.width.toInt(), height: widget.height.toInt()));
        }
        _showImage();
        _startSlide();
      }
    
      void _showImage() {
        if (index == 0) {
          _preImage = images[widget.showData.length - 1];
        } else {
          _preImage = images[index - 1];
        }
        _curImage = images[index];
        if (index == widget.showData.length - 1) {
          _nextImage = images[0];
        } else {
          _nextImage = images[index + 1];
        }
        _initWidgetIndicator();
        setState(() {});
      }
    
      Future<ui.Image> getImage(T data, {width, height}) async {
        ui.Image image;
        if (data.type == FileSourceType.network) {
          image = await getNetImage(data.path, width: width, height: height);
        } else if (data.type == FileSourceType.asset) {
          image = await getAssetImage(data.path, width: width, height: height);
        } else {
          image = await getNetImage(data.path, width: width, height: height);
        }
        return image;
      }
    
      void _animateTo(bool isSwiper, double hasSwiperWidth) {
        _initWidgetIndicator();
        double showCount = 0;
        if (isSwiper) {
          showCount = widget.width - hasSwiperWidth;
        } else {
          showCount = hasSwiperWidth;
        }
        //计时器，每1毫秒执行一次
        const period = Duration(milliseconds: 1);
        timer = Timer.periodic(period, (timer) {
          showCount--;
          if (_offset > 0) {
            if (isSwiper) {
              _offset++;
            } else {
              _offset--;
            }
          } else {
            if (isSwiper) {
              _offset--;
            } else {
              _offset++;
            }
          }
          //计时器结束条件
          if (showCount.toInt() == 0) {
            timer.cancel();
            _offset = 0;
            _showImage();
            _startSlide();
          }
          //只有当widget状态为mounted时才执行setState防止内存泄露
          if (mounted) {
            setState(() {});
          }
        });
      }
    
      void _initWidgetIndicator(){
        if (_indicator?.type == IndicatorType.widget) {
          _indicatorWidgetList =
              _indicator?.onIWidget(widget.showData.length, index);
        }
      }
    
      void _startSlide() {
        if (widget.isAutoSlide) {
          if (timer2 == null || !timer2!.isActive) {
            //计时器，每1毫秒执行一次
            const period = Duration(seconds: slideTime);
            timer2 = Timer.periodic(period, (timer) {
              if (index == widget.showData.length - 1) {
                index = 0;
              } else {
                index++;
              }
              _animateTo(true, 0);
            });
          }
        }
      }
    
      @override
      void dispose() {
        //退出时关闭计时器防止内存泄露
        timer?.cancel();
        timer2?.cancel();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return SizedBox(
          height: widget.height,
          width: widget.width,
          child: RepaintBoundary(
              child: Stack(
                  alignment: Alignment.center,
                  fit: StackFit.expand,
                  children: [
                GestureDetector(
                  child: ClipRect(
                      child: CustomPaint(
                    painter: _SwiperPinter(this, widget.showData.length, index,
                        _preImage, _curImage, _nextImage, _offset, _indicator!),
                  )),
                  onTap: () {
                    widget.onTap?.call(index, widget.showData[index]);
                  },
                  onHorizontalDragDown: (DragDownDetails details) {
                    timer2?.cancel();
                  },
                  onHorizontalDragUpdate: (DragUpdateDetails details) {
                    _offset += details.delta.dx;
                    setState(() {});
                  },
                  onHorizontalDragEnd: (DragEndDetails details) {
                    bool isSwiper = false;
                    if (_offset.abs() >= widget.width / 3) {
                      if (_offset < 0) {
                        if (index == widget.showData.length - 1) {
                          index = 0;
                        } else {
                          index++;
                        }
                      } else {
                        if (index == 0) {
                          index = widget.showData.length - 1;
                        } else {
                          index--;
                        }
                      }
                      isSwiper = true;
                    }
                    _animateTo(isSwiper, _offset.abs());
                  },
                ),
                Positioned(
                    bottom: 10,
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: _indicatorWidgetList ?? [])),
              ])),
        );
      }
    }
    
    class _SwiperPinter extends CustomPainter {
      final _KqSwiperState state;
      final int _length;
      final int _index;
      final ui.Image? _preImage;
      final ui.Image? _curImage;
      final ui.Image? _nextImage;
      final double _offset;
      final IIndicator _indicator;
    
      Paint selfPaint = Paint()
        ..color = Colors.blue
        ..style = PaintingStyle.fill
        ..isAntiAlias = true
        ..strokeCap = StrokeCap.butt
        ..strokeWidth = 30.0;
    
      _SwiperPinter(this.state, this._length, this._index, this._preImage,
          this._curImage, this._nextImage, this._offset, this._indicator);
    
      @override
      void paint(Canvas canvas, Size size) {
        if (_preImage == null || _curImage == null || _nextImage == null) {
          return;
        }
        canvas.drawImage(
            _preImage!, Offset(-state.widget.width + _offset, 0), selfPaint);
        canvas.drawImage(_curImage!, Offset(0 + _offset, 0), selfPaint);
        canvas.drawImage(
            _nextImage!, Offset(state.widget.width + _offset, 0), selfPaint);
    
        if (_indicator.type == IndicatorType.draw) {
          _indicator.onIDraw(
              canvas, _length, _index, state.widget.width, state.widget.height);
        }
      }
    
      @override
      bool shouldRepaint(covariant CustomPainter oldDelegate) {
        return true;
      }
    }
    
    /// 文件源类型
    enum FileSourceType {
      /// 网络文件
      network,
    
      /// 系统文件
      asset
    }
    
    /// 文件格式
    abstract class IShowData {
      /// 展示的图片路径
      final String path;
    
      /// 图片路径位置
      final FileSourceType type;
    
      IShowData(this.path, this.type);
    }
    
    //获取网络图片 返回ui.Image
    Future<ui.Image> getNetImage(String url, {width, height}) async {
      ByteData data = await NetworkAssetBundle(Uri.parse(url)).load(url);
      ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
          targetWidth: width, targetHeight: height);
      ui.FrameInfo fi = await codec.getNextFrame();
      return fi.image;
    }
    
    //获取本地图片，返回ui.Image
    Future<ui.Image> getAssetImage(String asset, {width, height}) async {
      ByteData data = await rootBundle.load(asset);
      ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
          targetWidth: width, targetHeight: height);
      ui.FrameInfo fi = await codec.getNextFrame();
      return fi.image;
    }
    
    enum IndicatorType {
      /// widget类型
      widget,
    
      /// 绘制类型
      draw
    }
    
    /// 指示器，实现该类进行自定义绘制
    abstract class IIndicator {
      final IndicatorType type;
    
      IIndicator(this.type);
    
      /// 自定义绘制
      /// length 指示器个数
      /// curIndex 指示器当前位置
      /// w 控件宽度
      /// h 控件高度
      onIDraw(Canvas canvas, int length, int curIndex, double w, double h);
    
      /// 自定义传widget
      /// length 指示器个数
      /// curIndex 指示器当前位置
      /// return List<Widget> 指示器列表
      List<Widget> onIWidget(int length, int curIndex);
    }
    
    /// 传widget的指示器抽象类，传widget的方式需要继承该类实现
    abstract class IWidgetIndicator extends IIndicator {
      IWidgetIndicator() : super(IndicatorType.widget);
    
      @override
      onIDraw(Canvas canvas, int length, int curIndex, double w, double h) {
        ///啥也不干
      }
    
      @override
      List<Widget> onIWidget(int length, int curIndex) {
        return onWidget(length, curIndex);
      }
    
      /// 过渡方法
      List<Widget> onWidget(int length, int curIndex);
    }
    
    /// 自定义绘制的指示器抽象类，自定义绘制的方式需要继承该类实现
    abstract class IDrawIndicator extends IIndicator {
      IDrawIndicator() : super(IndicatorType.draw);
    
      @override
      onIDraw(Canvas canvas, int length, int curIndex, double w, double h) {
        onDraw(canvas, length, curIndex, w, h);
      }
    
      @override
      List<Widget> onIWidget(int length, int curIndex) {
        ///啥也不干
        return [];
      }
    
      /// 过渡方法
      onDraw(Canvas canvas, int length, int curIndex, double w, double h);
    }
    
    /// 内置绘制指示器
    class DrawIndicator extends IDrawIndicator {
      /// 指示器单个点x方向偏移
      final double _dotOffsetDx = 10;
    
      /// 指示器单个点y方向偏移
      final double _dotOffsetDy = 10;
    
      /// 指示器点的半径
      final double _dotRadius = 4;
    
      /// 指示器画笔
      final Paint _paint = Paint()
        ..style = PaintingStyle.fill
        ..isAntiAlias = true
        ..strokeCap = StrokeCap.butt
        ..strokeWidth = 30.0;
    
      @override
      onDraw(Canvas canvas, int length, int curIndex, double w, double h) {
        for (int i = 0; i < length; i++) {
          //绘制当前指示器
          if (i == curIndex) {
            _paint.color = Colors.blue;
            canvas.drawCircle(
                Offset(
                    (w / 2 - (_dotRadius * 2 + (length - 1) * _dotOffsetDx) / 2) +
                        (_dotRadius * 2 + _dotOffsetDx) * i,
                    h - _dotOffsetDy),
                _dotRadius,
                _paint);
            // 绘制非当前的其它指示器
          } else {
            _paint.color = Colors.grey;
            canvas.drawCircle(
                Offset(
                    (w / 2 - (_dotRadius * 2 + (length - 1) * _dotOffsetDx) / 2) +
                        (_dotRadius * 2 + _dotOffsetDx) * i,
                    h - _dotOffsetDy),
                _dotRadius,
                _paint);
          }
        }
      }
    }
    
    /// 内置widget指示器
    class WidgetIndicator extends IWidgetIndicator {
      @override
      List<Widget> onWidget(int length, int curIndex) {
        List<Widget> widgets = [];
        for (int i = 0; i < length; i++) {
          if (curIndex == i) {
            widgets.add(Text(
              (i + 1).toString(),
              style:
                  const TextStyle(color: Colors.red, backgroundColor: Colors.white),
            ));
          } else {
            widgets.add(Text(
              (i + 1).toString(),
              style: const TextStyle(
                  color: Colors.black, backgroundColor: Colors.white),
            ));
          }
        }
        return widgets;
      }
    }

代码可直接运行使用，代码量少，逻辑简单，二次开发方便。

*  **使用**

构建数据：

class TestSwiperData extends IShowData {
      TestSwiperData(super.path, super.type);
    }

List<TestSwiperData> imgList = [
        TestSwiperData(
            "https://alifei05.cfp.cn/creative/vcg/800/version23/VCG41175510742.jpg",
            FileSourceType.network),
        TestSwiperData(
            "https://tenfei04.cfp.cn/creative/vcg/veer/1600water/veer-147317368.jpg",
            FileSourceType.network),
        TestSwiperData(
            "assets/images/common/ic_xinzeng_16_blue.png", FileSourceType.asset),
      ];

使用：

KqSwiper<TestSwiperData>(
        width: 414.w,
        showData: imgList,
        indicator: WidgetIndicator(),
        onTap: (index,data){
            KqToast.showNormal("index=$index;image=${data.path}");
        },
    )

[0affe1380b5547baba6274dcbf61871e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/bf831caba5ee420294f971684453a380.png