Flutter之轮播图插件flutter_swiper

https://pub.flutter-io.cn/packages/flutter_swiper#-installing-tab- 插件地址

当前最新版本:
flutter_swiper: ^1.1.6
Swiper({
  this.itemBuilder,
  this.indicatorLayout: PageIndicatorLayout.NONE,

  ///
  this.transformer,
  @required this.itemCount,
  this.autoplay: false,
  this.layout: SwiperLayout.DEFAULT,
  this.autoplayDelay: kDefaultAutoplayDelayMs, 自动播放延迟毫秒数 默认3000
  this.autoplayDisableOnInteraction: true,
  this.duration: kDefaultAutoplayTransactionDuration,
  this.onIndexChanged,
  this.index, 初始下标
  this.onTap, 点击事件
  this.control,设置 new SwiperControl()显示默认分分页按钮
  this.loop: true,无线轮播 默认true
  this.curve: Curves.ease,
  this.scrollDirection: Axis.horizontal,滑动方向 默认是水平,设置为Axis.vertical则设置为垂直滚动
  this.pagination,设置 new SwiperPagination()显示默认分页指示器
  this.plugins,
  this.physics,
  Key key,
  this.controller,
  this.customLayoutOption,
  /// since v1.0.0
  this.containerHeight,
  this.containerWidth,
  this.viewportFraction: 1.0,
  this.itemHeight,
  this.itemWidth,
  this.outer: false,
  this.scale,
  this.fade,
})

new SwiperControl()效果:

new SwiperPagination()效果:

 

例子:

List _imageUrl =[
  'https://dimg04.c-ctrip.com/images/zg0o180000014yl20DEA4.jpg',
  'https://dimg04.c-ctrip.com/images/zg0f180000014vrut370F.jpg',
  'https://dimg04.c-ctrip.com/images/zg0n18000001528jhD6B2.jpg'];

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Column(
        children: <Widget>[
          Container(
            height: 110,
            child: Swiper(
              //item的数量
              itemCount: _imageUrl.length,
              //自动播放
              autoplay: true,
              itemBuilder: (BuildContext context,int index){
                return Image.network(_imageUrl[index]);
              },
              //banner上添加指示器
              pagination: SwiperPagination(),
            ),
          )
        ],
      ),
    ),
  );
}
发布了66 篇原创文章 · 获赞 36 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/u013600907/article/details/101455929