flutter库之轮播图swiper

/**

 *库地址:https://github.com/best-flutter/flutter_swiper/blob/master/README-ZH.md

 *基本参数

    参数  默认值    描述

    scrollDirection    Axis.horizontal    滚动方向,设置为Axis.vertical如果需要垂直滚动

    loop    true    无限轮播模式开关

    index  0  初始的时候下标位置

    autoplay    false  自动播放开关.

    onIndexChanged  void onIndexChanged(int index)  当用户手动拖拽或者自动播放引起下标改变的时候调用

    onTap  void onTap(int index)  当用户点击某个轮播的时候调用

    duration    300.0  动画时间,单位是毫秒

    pagination  null    设置 new SwiperPagination() 展示默认分页指示器

    control    null    设置 new SwiperControl() 展示默认分页按钮

    分页指示器

    分页指示器继承自 SwiperPlugin,SwiperPlugin 为 Swiper 提供额外的界面.设置为new SwiperPagination() 展示默认分页.

    参数  默认值    描述

    alignment  Alignment.bottomCenter  如果要将分页指示器放到其他位置,那么可以修改这个参数

    margin  const EdgeInsets.all(10.0)  分页指示器与容器边框的距离

    builder    SwiperPagination.dots  目前已经定义了两个默认的分页指示器样式: SwiperPagination.dots 、 SwiperPagination.fraction,都可以做进一步的自定义.

    控制按钮

    控制按钮组件也是继承自 SwiperPlugin,设置 new SwiperControl() 展示默认控制按钮.

    参数  默认值    描述

    iconPrevious    Icons.arrow_back_ios    上一页的IconData

    iconNext    Icons.arrow_forward_ios    下一页的IconData

    color  Theme.of(context).primaryColor  控制按钮颜色

    size    30.0    控制按钮的大小

    padding    const EdgeInsets.all(5.0)  控制按钮与容器的距离

    控制器(SwiperController)

    SwiperController用于控制 Swiper的index属性, 停止和开始自动播放. 通过 new SwiperController() 创建一个SwiperController实例,并保存,以便将来能使用。

    方法  描述

    void move(int index, {bool animation: true})    移动到指定下标,设置是否播放动画

    void next({bool animation: true})  下一页

    void previous({bool animation: true})  上一页

    void startAutoplay()    开始自动播放

    void stopAutoplay()    停止自动播放

    自动播放

    参数  默认值    描述

    autoplayDely    3000    自动播放延迟毫秒数.

    autoplayDisableOnInteraction    true    当用户拖拽的时候,是否停止自动播放.

 */

body: Container(

            height: 250.0,

            child: Swiper(

                itemBuilder: (BuildContext context, int index) {

                  return Image.network(

                    "http://img.zcool.cn/community/01ed9c55499c160000019ae993c9a4.jpg@2o.jpg",

                    fit: BoxFit.fill,);

                },

                itemCount: 5,

                scrollDirection: Axis.horizontal,

                loop: true,

                duration: 300,

                autoplay: true,

                onIndexChanged: (index) {

                  debugPrint("index:$index");

                },

                onTap: (index) {

                  debugPrint("点击了第:$index个");

                },

//                control:SwiperControl(),

                pagination: SwiperPagination(

                    alignment: Alignment.bottomRight,

                    margin: EdgeInsets.only(bottom: 20.0, right: 20.0),

                    builder: SwiperPagination.fraction

                ),

//                autoplayDelay: 3000,

                autoplayDisableOnInteraction : true

            ),

          )

码云地址:https://gitee.com/xgljh/Flutter.git

作者:习惯了_就好

链接:https://www.jianshu.com/p/3c1d2de6e8ba

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容