修改flutter_swiper指示器样式

flutter_swiper指示器样式默认只有SwiperPagination.dots（圆点）和SwiperPagination.fraction（数字)两种显示效果,文档提到可以自定义自己的指示器，但是没有给出具体的文档例子。文档有提到指示器是单独放在flutter_page_indicator实现，看了下源代码发现绘制是使用canvas进行绘制的，所以要想实现其他样式效果，貌似只能修改源代码实现。当然，不能直接编辑插件源代码，所以这里选择了copy整个文件放到自己的组件代码中，在这个文件中添加新的样式实现：
主要修改点：

新增LinePainter类和LineBasePainter抽象类

LinePainter

class LinePainter extends LineBasePainter {
  LinePainter(PageIndicator widget, double page, int index, Paint paint)
      : super(widget, page, index, paint);

  @override
  void draw(Canvas canvas, double space, double size, double radius) {
    double secondOffset = index == widget.count - 1
        ? radius
        : radius + ((index + 1) * (size + space));
    _paint.color = AppColors.app_main;
    _paint.strokeWidth = 3;
    canvas.drawLine(new Offset(secondOffset - 8, radius),
        new Offset(secondOffset + 8, radius), _paint);
  }
}

LineBasePainter

abstract class LineBasePainter extends BasePainter {
  final PageIndicator widget;
  final double page;
  final int index;
  final Paint _paint;

  double lerp(double begin, double end, double progress) {
    return begin + (end - begin) * progress;
  }

  LineBasePainter(this.widget, this.page, this.index, this._paint)
      : super(widget, page, index, _paint);

  void draw(Canvas canvas, double space, double size, double radius);

  bool _shouldSkip(int index) {
    return false;
  }
  //double secondOffset = index == widget.count-1 ? radius : radius + ((index + 1) * (size + space));

  @override
  void paint(Canvas canvas, Size size) {
    _paint.color = widget.color;
    double space = widget.space;
    double size = widget.size;
    double radius = size / 2;
    for (int i = 0, c = widget.count; i < c; ++i) {
      if (_shouldSkip(i)) {
        continue;
      }
       // 这里的4指不是当前index的宽度，8是当前index的宽度，效果请看下面效果图
      canvas.drawLine(new Offset(i * (size + space) + radius - 4, radius),
          new Offset(i * (size + space) + radius + 8, radius), _paint);
    }

    double page = this.page;
    if (page < index) {
      page = 0.0;
    }
    _paint.color = widget.activeColor;
    draw(canvas, space, size, radius);
  }

  @override
  bool shouldRepaint(BasePainter oldDelegate) {
    return oldDelegate.page != page;
  }
}

enum PageIndicatorLayout {
  NONE,
  SLIDE,
  WARM,
  COLOR,
  SCALE,
  DROP,
  LINE, // 添加的横线类型
}

在_PageIndicatorState的_createPainer方法中新增：

BasePainter _createPainer() {
    switch (widget.layout) {
      case PageIndicatorLayout.LINE:
        return new LinePainter(
            widget, widget.controller.page ?? 0.0, index, _paint);
      case PageIndicatorLayout.NONE:
          ....
    }
  }

最后在使用页面中导入这个文件后，示例写法：

Swiper(
              itemBuilder: (BuildContext context,int index){
                return _plateCard();
              },
              itemCount: 3,
              pagination: SwiperCustomPagination(builder: (BuildContext context, SwiperPluginConfig config) {
                return Container(
                  alignment: Alignment.bottomCenter,
                  height: 90,
                  child: PageIndicator(
                    layout: PageIndicatorLayout.LINE,
                    size: 10.0,
                    space: 10.0,
                    count: 3,
                    controller: config.pageController,
                    color: Colors.black12,
                  ),
                );
              }),
            )

实现效果：

 

自定义指示器样式

最后

如果你有更好的方式实现，欢迎留言，谢谢

作者：打静爵
链接：https://www.jianshu.com/p/d4b406bca164
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。