如同所示指示器圆点要改为 直线
第一种修改方法:
修改方法先定义RectIndicator
class RectIndicator extends StatelessWidget {
final int position;
final int count;
final Color color;
final Color activeColor;
final double width;
final double activeWidth;
final double height;
final double radius;
RectIndicator({
Key key,
this.width: 50.0,
this.activeWidth: 50.0,
this.height: 4,
@required this.position,
@required this.count,
this.color: Colors.white,
this.radius,
this.activeColor: const Color(0xFF3E4750),
}) : assert(count != null && position != null),
super(key: key);
_indicator(bool isActive) {
return AnimatedContainer(
margin: EdgeInsets.symmetric(horizontal: 3.0), //指示器间距
height: height,
width: isActive ? activeWidth : width,
decoration: BoxDecoration(
color: isActive ? color : activeColor,
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, 2.0),
blurRadius: 0.0)
],
borderRadius: BorderRadius.circular(radius ?? height / 2.0)),
duration: Duration(milliseconds: 150),
);
}
_buildPageIndicators() {
List<Widget> indicatorList = [];
for (int i = 0; i < count; i++) {
indicatorList.add(i == position ? _indicator(true) : _indicator(false));
}
return indicatorList;
}
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _buildPageIndicators(),
);
}
}
Swiper自定义指示器
List<BannerModel> banners = [];
return AspectRatio(
aspectRatio: 16/9, //宽高比
child:
Container(
width: MediaQuery.of(context).size.width,
child: Swiper(
itemCount: banners.length,
itemBuilder: (ctx, index) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: GestureDetector(
onTap: ()(){ },
child: BannerImage(banners[index].image ?? "")));
},
loop: true,
autoplay: true,
autoplayDelay: 5000,
pagination: SwiperPagination(
alignment: Alignment.bottomRight,
builder: SwiperCustomPagination(builder:
(BuildContext context, SwiperPluginConfig config) {
return RectIndicator(
position: config.activeIndex,
count: banners.length,
activeColor: Color(0xFFD8D8D8).withOpacity(0.3),
activeColor: Color(0xFFD8D8D8),//未选中 指示器颜色,选中的颜色key为Color
width: 7.0, //指示器宽度
activeWidth: 7.0, //选中的指示器宽度
radius: 4,//指示器圆角角度
height: 2.0); //指示器高度
})))));
第二种修改方法 直接使用flukit Swiper 推荐
dependencies:
flukit: ^1.0.2
import 'package:flukit/flukit.dart';
return AspectRatio(
aspectRatio: 16/9, //宽高比
child:
Container(
width: MediaQuery.of(context).size.width,
child: Swiper.builder(
circular: true,
interval: const Duration(seconds: 5),
childCount: banners.length,
indicator: RectangleSwiperIndicator(
spacing: 4.0,
itemWidth: 7.0,
itemHeight: 2.0,
itemColor: colorD8D8D8.withOpacity(0.3),
itemActiveColor: Colors.white70,
),
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: GestureDetector(
onTap: () =>
homeModel.skipBanner(context, banners[index]),
child: BannerImage(banners[index].image ?? "")));
},
),
));
class BannerImage extends StatelessWidget {
final String url;
final BoxFit fit;
BannerImage(this.url, {this.fit: BoxFit.fill});
@override
Widget build(BuildContext context) {
return CachedNetworkImage(
imageUrl: ImageHelper.wrapUrl(url),
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
),
),
),
placeholder: (context, url) =>
Center(child: CupertinoActivityIndicator()),
errorWidget: (context, url, error) => Icon(Icons.error),
);
}
}