官网并没有把里面的方法指明出来,还需要我们看源码,在源码当中我发现了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,
),
);
}
}