Flutter Swiper制作轮播效果

摘要:
1.介绍fluent_ flipper插件中最强大的siwiper,多种布局模式,无限旋转,Android和IOS双端适配。Fluter _交换机的GitHub地址:https://github.com/best-flutter/flutter_swiper了解Flutter_切换后,首先要做的是在pubspec.yaml文件中引入插件(请记住使用最新版本)

Flutter Swiper制作轮播效果第1张

1、引入flutter_swiper插件

flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配.

Flutter_swiper的GitHub地址:https://github.com/best-flutter/flutter_swiper

了解flutter_swiper后,需要作的第一件事就再pubspec.yaml文件中引入这个插件(记得使用最新版)

flutter_swiper: ^1.1.6

引入后点击Get Packages下载,或者直接保存,会自动为我们下载包。

Swiper基本参数

参数默认值描述
scrollDirectionAxis.horizontal滚动方向,设置为Axis.vertical如果需要垂直滚动
looptrue无限轮播模式开关
index0初始的时候下标位置
autoplayfalse自动播放开关.
autoplayDely3000自动播放延迟毫秒数.
autoplayDiableOnInteractiontrue当用户拖拽的时候,是否停止自动播放.
onIndexChangedvoid onIndexChanged(int index)当用户手动拖拽或者自动播放引起下标改变的时候调用
onTapvoid onTap(int index)当用户点击某个轮播的时候调用
duration300.0动画时间,单位是毫秒
paginationnull设置 new SwiperPagination() 展示默认分页指示器
controlnull设置 new SwiperControl() 展示默认分页按钮

分页指示器 pagination

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

参数默认值描述
alignmentAlignment.bottomCenter如果要将分页指示器放到其他位置,那么可以修改这个参数
marginconst EdgeInsets.all(10.0)分页指示器与容器边框的距离
builderSwiperPagination.dots目前已经定义了两个默认的分页指示器样式: SwiperPagination.dotsSwiperPagination.fraction,都可以做进一步的自定义.

简单的定义:

pagination: new SwiperPagination(
      builder: DotSwiperPaginationBuilder(
      color: Colors.black54,
      activeColor: Colors.white,
 ))

自定义分页组件:

new Swiper(
    ...,
    pagination:new SwiperCustomPagination(
        builder:(BuildContext context, SwiperPluginConfig config){
            return new YourOwnPaginatipon();
        }
    )
);

示例代码如下:

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() {
    return HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('轮播组件'),
      ),
      body: Container(
           MediaQuery.of(context).size.width,
          height: 200.0,
          child: Swiper(
            itemBuilder: _swiperBuilder,
            itemCount: 3,
            pagination: new SwiperPagination(
                builder: DotSwiperPaginationBuilder(
              color: Colors.black54,
              activeColor: Colors.white,
            )),
            control: new SwiperControl(),
            scrollDirection: Axis.horizontal,
            autoplay: true,
            onTap: (index) => print('点击了第$index个'),
          )),
    );
  }

  Widget _swiperBuilder(BuildContext context, int index) {
    return (Image.network(
       "http://via.placeholder.com/350x150",
       fit: BoxFit.fill,
    ));
  }
}

 内建的布局

Flutter Swiper制作轮播效果第2张

new Swiper(
  itemBuilder: (BuildContext context, int index) {
    return new Image.network(
      "http://via.placeholder.com/288x188",
      fit: BoxFit.fill,
    );
  },
  itemCount: 10,
  viewportFraction: 0.8,
  scale: 0.9,
)

Flutter Swiper制作轮播效果第3张

new Swiper(
  itemBuilder: (BuildContext context, int index) {
    return new Image.network(
      "http://via.placeholder.com/288x188",
      fit: BoxFit.fill,
    );
  },
  itemCount: 10,
  itemWidth: 300.0,
  layout: SwiperLayout.STACK,
)

Flutter Swiper制作轮播效果第4张

 new Swiper(
  layout: SwiperLayout.CUSTOM,
  customLayoutOption: new CustomLayoutOption(
      startIndex: -1,
      stateCount: 3
  ).addRotate([
    -45.0/180,
    0.0,
    45.0/180
  ]).addTranslate([
    new Offset(-370.0, -40.0),
    new Offset(0.0, 0.0),
    new Offset(370.0, -40.0)
  ]),
  itemWidth: 300.0,
  itemHeight: 200.0,
  itemBuilder: (context, index) {
    return new Container(
      color: Colors.grey,
      child: new Center(
        child: new Text("$index"),
      ),
    );
  },
  itemCount: 10
)

CustomLayoutOption 被设计用来描述布局和动画,很简单的可以指定每一个元素的状态.

new CustomLayoutOption(
      startIndex: -1,  /// 开始下标
      stateCount: 3    /// 下面的数组长度 
  ).addRotate([        //  每个元素的角度
    -45.0/180,
    0.0,
    45.0/180
  ]).addTranslate([           /// 每个元素的偏移
    new Offset(-370.0, -40.0),
    new Offset(0.0, 0.0),
    new Offset(370.0, -40.0)
  ])

免责声明:文章转载自《Flutter Swiper制作轮播效果》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【FPGA】xilinx IOBUF的用法Hbase 建表基本命令总结下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

lazyload懒加载和swiper轮播懒加载的用法

对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度,比如商城网页。 lazyload使用方法: 载入 JavaScript 文件: <script src="jquery.js"></script> <script src="jquery.lazyload.js"></script> 修改 H...

PbootCMS后台增加轮播图自定义分组名称

我们知道PbootCMS后台的轮播图模块,在新增轮播图时是不能自己选择分组的,而自动创建分组的,分组1,分组2,分组3这样来区分的,这样显然对客户的体验是很不友好的,不能直观的知道哪些轮播图是用在网页的什么位置的,下面小郭分享一下如何使得PbootCMS后台能够实现轮播图分组的增、删、改。最终展示效果如下: 本文来源:http://www.d163....

AspNetPager分页控件使用方法 Leroy

1.在vs web应用程序项目里引用AspNetPager.dll,在工具箱中添加AspNetPager控件。 2.在aspx里面拖入AspNetPager控件,设定分页控件每页显示条目数PageSize。   例: <webdiyer:AspNetPager ID="AspNetPager1" runat="server"...

pgsql数据库分页排序问题

order by id desc limit 5;//输出前五行刚开始我以为我写错,后来一问,原来是我在js获取数据的时候少打了空格,所以 where 后面要打空格, "desc " 后面 也要打空格。其实这个分页排序问题还蛮多的。具体的视情况而定。...

uniapp整屏滑动

人狠话不多,直接上图、上代码 HTML <view class="page"> <view class="uni-padding-wrap"> <view class="page-section swiper"> <view class="p...

jQuery Pagination Ajax分页插件中文详解(摘)

jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=616 中文项目地址:http://www.zhangxinxu.com/jq/pagination_zh/ 原项目...