Flutter_Swiper修改小圆点控制器(分页指示器)的大小和颜色

官网并没有把里面的方法指明出来,还需要我们看源码,在源码当中我发现了swiper分页指示器是继承自SwiperPlugin这个类的,同时发现,小圆点控制器是dots,这个属性

在这里插入图片描述

随后翻了一下源码,发现了单个的dots类型的builder类,
在这里插入图片描述
SwiperPagination的builder构造器和这个构造类结合一下,就可以修改控制器的样式了

Swiper(
	...
	pagination: SwiperPagination(
	   builder: DotSwiperPaginationBuilder(
	     color: Color.fromRGBO(200, 200, 200, 0.5),
	     size: 8.0,
	     activeSize: 10.0
	   )
	 ),     //小圆点控制器
)

自定义小圆点样式,椭圆小圆点样式,直接上图上代码

在这里插入图片描述

Swiper(
	...
	pagination:SwiperPagination(
    alignment:  Alignment.bottomRight,
	   builder: SwiperCustomPagination(
	       builder: (BuildContext context, SwiperPluginConfig config) {
	         return CustomP(config.activeIndex);
	     }
	   )
 )
)

class CustomP extends StatelessWidget {
  var _currentIndex;
  CustomP(this._currentIndex);
  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenAdapter.setWidth(150),
      // height: ScreenAdapter.setHeight(10),
      child: GridView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        scrollDirection:Axis.vertical,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          childAspectRatio:5/1,
          crossAxisSpacing:ScreenAdapter.setWidth(10)
        ),
        itemBuilder: (BuildContext context, int index){
          return Container(
            decoration: BoxDecoration(
              color:_currentIndex == index ? Theme.of(context).primaryColor : Colors.white,
              borderRadius: BorderRadius.circular(10)
            ),
          );
        },
        itemCount: 3,
      ),
    );
  }
}
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值