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(),
            ),
          )
        ],
      ),
    ),
  );
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值