flutter Swiper加载动态数据时Bug图片残影滑动,图片紊乱

在使用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 ?? "")));
                  },
                ),
              ));

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值