在Flutter中使用swiper显示多张图片滚动。在pubspec.yaml中加入引用:
flutter_swiper: ^1.1.6
在页面上加一个container,里面放置swiper,代码如下:
Widget picSecion = new Container(
height: 250,
child: new Swiper(
itemBuilder: (BuildContext context, int index) {
return new CachedNetworkImage(
placeholder: (context, url) => CircularProgressIndicator(),
imageUrl: picList[index].uriPath,
fit: BoxFit.fill,
);
},
itemCount: picList.length,
pagination: new SwiperPagination(),
control: new SwiperControl(),
//containerHeight: 200,
));
外面不放container会报错,提示水平组件没有限制高度。
但以上代码有问题,一张图片时会快速滚动4、5次,三张图片干脆就报错了:
ScrollController not attached to any scroll views.
在git上找到了处理办法,参照:
Git issue
代码修改为:
Widget picSecion = new Container(
height: 250,
child: new Swiper(
key: UniqueKey(),
itemBuilder: (BuildContext context, int index) {
return new CachedNetworkImage(
placeholder: (context, url) => CircularProgressIndicator(),
imageUrl: picList[index].uriPath,
fit: BoxFit.fill,
);
},
itemCount: picList.length,
pagination: new SwiperPagination(),
control: new SwiperControl(),
//containerHeight: 200,
));
【Flutter中使用swiper轮播图片报错的处理】加上了指定key的参数,运行后就正常显示图片滚动了。
推荐阅读
- 回顾 Flutter 2021 重要时刻,奉上虎年红包封面喜迎新年!
- Flutter实现左侧边栏导航
- 如何在 Flutter 创建一个后台任务
- Flutter Convex Bottom 底部导航
- Flutter动态化框架Thresh
- 基于 Riverpod 的 Flutter 状态管理
- Flutter 2022 产品路线图发布
- Flutter 插件库
- Windows Running “flutter pub get“ in XXX卡死
- Flutter之下拉刷新,上拉加载更多