在使用Swiper时,后台返回三张图片,先配置2个,然后下架一个,会发现Swiper后面有残影滑动,初步怀疑 banners.length变化时没有通知到Swiper,或者Swiper动态数据有Bug,
代码如下:
List<BannerModel> _banners = [];
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 ?? "")));
},
),
));