Flutter 实现轮播图banner

野性酷女 2021-11-14 12:40 480阅读 0赞

先上效果图：

![20190731202927595.gif][]

# flutter的Swiper控件，实现无线轮播： #

## 1.准备 ##

首先打开pubspec.yaml文件，添加控件依赖

flutter_swiper: ^1.0.6    //请在pub上查看最新版本

运行命令：flutter packages get

## 2.使用 ##

完整的dart代码

import 'package:flutter/material.dart';
    import 'package:flutter_swiper/flutter_swiper.dart';
    import 'package:url_launcher/url_launcher.dart';
    import 'package:fluttertoast/fluttertoast.dart';
    
    final List<String> images = [
      'images/viewpage_ima1.jpg',
      'images/viewpage_ima2.jpg',
      'images/viewpage_ima3.jpeg',
      'images/viewpage_ima4.jpg',
      'images/icon_bg.jpg',
    ];
    
    final List<String> descriptions = [
      '莲，出淤泥而不染',
      '社会我宝姐，人美路子野',
      '周五快到了，准备追更新',
      '送你一辆奥迪',
      '我家狗狗好看吗',
    ];
    class MySwiperPage extends StatefulWidget {
      @override
      SwiperPageState createState() {
        return SwiperPageState();
      }
    }
    class SwiperPageState extends State<MySwiperPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('轮播组件'),
          ),
          body: Column(
            children: <Widget>[
              Container(
                  width: MediaQuery.of(context).size.width,
                  margin: const EdgeInsets.only(bottom: 10.0),
                  height: 180.0,
                  child: Swiper(
                    itemBuilder: _swiperBuilder,
                    itemCount: images.length,
    
                    pagination: new SwiperPagination(
                        builder: DotSwiperPaginationBuilder(
                          color: Colors.black38,
                          activeColor: Colors.blueAccent,
                        )),
                    control: null,
                    duration: 300,
    //                viewportFraction: 0.9,
                    scrollDirection: Axis.horizontal,
                    autoplay: true,
                    onTap: (int index){
                      Fluttertoast.showToast(msg: '点击了第$index个');
                    },
                  )),
              Center(
                  child: SizedBox.fromSize(
                    size: Size.fromHeight(180.0),
                    child: Swiper(
                      itemBuilder: (BuildContext context, int index) {
                        return Padding(
                          padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 0.0),
                          child: GestureDetector(
                            onTap: () {
                              Fluttertoast.showToast(msg: descriptions[index]);
                            },
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(6.0),
                              child: Stack(
                                fit: StackFit.expand,
                                children: <Widget>[
                                  Image.asset(images[index], fit: BoxFit.cover),
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                      itemCount: images.length,
                      //选中时的指示器
                      pagination: new SwiperPagination(
                          builder: DotSwiperPaginationBuilder(
                            color: Colors.black38,
                            activeColor: Colors.white,
                          ),
                          margin: const EdgeInsets.only(bottom: 22.0)),
                      control: null,
                      duration: 300,
                      scrollDirection: Axis.horizontal,
                      viewportFraction: 0.8,
                      scale: 0.85,
                      autoplay: true,
                      onTap: (int index) {
                        Fluttertoast.showToast(msg: '点击了第$index个');
                      },
                    ),
                  )),
              Center(
                  child: SizedBox.fromSize(
                    size: Size.fromHeight(180.0),
                    child: Swiper(
                      itemBuilder: (BuildContext context, int index) {
                        return Padding(
                          padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 15.0),
                          child: GestureDetector(
                            onTap: () {
                              Fluttertoast.showToast(msg: descriptions[index]);
                            },
                            child: ClipRRect(
    //                      elevation: 5.0,
                              borderRadius: BorderRadius.circular(6.0),
                              child: Stack(
                                fit: StackFit.expand,
                                children: <Widget>[
                                  Image.asset(images[index], fit: BoxFit.cover),
    //                      decorationBox,
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                      itemCount: images.length,
                      //选中时的指示器
                      pagination: new SwiperPagination(
                          builder: DotSwiperPaginationBuilder(
                            color: Colors.black38,
                            activeColor: Colors.white,
                          ),
                          margin: const EdgeInsets.only(bottom: 22.0)),
                      control: null,
                      duration: 300,
                      scrollDirection: Axis.horizontal,
                      viewportFraction: 0.95,
                      autoplay: true,
                      onTap: (int index) {
                        Fluttertoast.showToast(msg: '点击了第$index个');
                      },
                    ),
                  ))
            ],
          )
        );
      }
    
      Widget _swiperBuilder(BuildContext context, int index) {
        return (Image.asset(
          images[index],
          fit: BoxFit.fill,
        ));
      }
    
      void _goOtherApp(int index) async {
        const url = 'https://www.baidu.com'; //这个url就是由scheme和host组成的 ：scheme://host
        if (await canLaunch(url)) {
          await launch(url);
        } else {
          throw 'Could not launch $url';
        }
      }
    }

上面代码中用到了toast，所以需要添加toast的依赖，如果点击图片需要跳转H5页面还需要添加url\_launcher依赖，方法与swiper类似，在pubspec.yaml文件中添加

fluttertoast: ^2.2.11
    flutter_swiper: ^1.0.6
    url_launcher: ^5.0.3

## Swiper基本参数  ##

<table> 
 <tbody> 
  <tr> 
   <td style="width:229px;">参数</td> 
   <td style="width:226px;">默认值</td> 
   <td style="width:394px;">描述</td> 
  </tr> 
  <tr> 
   <td style="width:229px;">scrollDirection</td> 
   <td style="width:226px;">Axis.horizontal</td> 
   <td style="width:394px;">滚动方向，设置为Axis.vertical如果需要垂直滚动</td> 
  </tr> 
  <tr> 
   <td style="width:229px;">loop</td> 
   <td style="width:226px;">true</td> 
   <td style="width:394px;">无线轮播模式开关</td> 
  </tr> 
  <tr> 
   <td style="width:229px;">index</td> 
   <td style="width:226px;">0</td> 
   <td style="width:394px;">初始的时候下标位置</td> 
  </tr> 
  <tr> 
   <td style="width:229px;">autoplay</td> 
   <td style="width:226px;">false</td> 
   <td style="width:394px;">自动播放开关</td> 
  </tr> 
  <tr> 
   <td style="width:229px;">autoplayDely</td> 
   <td style="width:226px;">3000</td> 
   <td style="width:394px;">自动播放延迟毫秒数</td> 
  </tr> 
  <tr> 
   <td style="width:229px;">autoplayDiableOnInteraction</td> 
   <td style="width:226px;">true</td> 
   <td style="width:394px;">当用户拖拽的时候，是否停止自动播放.</td> 
  </tr> 
  <tr> 
   <td style="width:229px;">onIndexChanged</td> 
   <td style="width:226px;">void onIndexChanged(int index)</td> 
   <td style="width:394px;">当用户手动拖拽或者自动播放引起下标改变的时候调用</td> 
  </tr> 
  <tr> 
   <td style="width:229px;">onTap</td> 
   <td style="width:226px;">void onTap(int index)</td> 
   <td style="width:394px;">当用户点击某个轮播的时候调用</td> 
  </tr> 
  <tr> 
   <td style="width:229px;">duration</td> 
   <td style="width:226px;">300.0</td> 
   <td style="width:394px;">动画时间，单位是毫秒</td> 
  </tr> 
  <tr> 
   <td style="width:229px;">pagination</td> 
   <td style="width:226px;">null</td> 
   <td style="width:394px;">设置&nbsp;<code>new SwiperPagination()</code>&nbsp;展示默认分页指示器</td> 
  </tr> 
  <tr> 
   <td style="width:229px;">control</td> 
   <td style="width:226px;">null</td> 
   <td style="width:394px;">设置&nbsp;<code>new SwiperControl()</code>&nbsp;展示默认分页按钮</td> 
  </tr> 
 </tbody> 
</table>

##      ##

## 分页指示器 pagination ##

即banner下面的小圆点，随着banner轮播而滑动

<table> 
 <tbody> 
  <tr> 
   <td style="width:160px;">参数</td> 
   <td style="width:227px;">默认值</td> 
   <td style="width:468px;">描述</td> 
  </tr> 
  <tr> 
   <td style="width:160px;">alignment</td> 
   <td style="width:227px;">Alignment.bottomCenter</td> 
   <td style="width:468px;">如果要将分页指示器放到其他位置，那么可以修改这个参数</td> 
  </tr> 
  <tr> 
   <td style="width:160px;">margin</td> 
   <td style="width:227px;">const EdgeInsets.all(10.0)</td> 
   <td style="width:468px;">分页指示器与容器边框的距离</td> 
  </tr> 
  <tr> 
   <td style="width:160px;">builder</td> 
   <td style="width:227px;">SwiperPagination.dots</td> 
   <td style="width:468px;">目前已经定义了两个默认的分页指示器样式：&nbsp;<code>SwiperPagination.dots</code>&nbsp;、&nbsp;<code>SwiperPagination.fraction</code>，都可以做进一步的自定义.</td> 
  </tr> 
 </tbody> 
</table>

## ##

### 简单的自定义 ###

pagination: new SwiperPagination(
        builder: DotSwiperPaginationBuilder(
           color: Colors.black38,
           activeColor: Colors.white,
        ),
        margin: const EdgeInsets.only(bottom: 22.0))

### 完全自定义指示器 ###

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

###  控制按钮 control ###

Swiper的control属性，也就是banner左右两边的按钮，它是继承自 `SwiperPlugin`,设置 `new SwiperControl()` 展示默认控制按钮

![20190731195346240.gif][]

如果不想要控制按钮，swiper的control属性设置为null

<table> 
 <tbody> 
  <tr> 
   <td style="width:161px;">参数</td> 
   <td style="width:230px;">默认值</td> 
   <td style="width:338px;">描述</td> 
  </tr> 
  <tr> 
   <td style="width:161px;">iconPrevious</td> 
   <td style="width:230px;">Icons.arrow_back_ios</td> 
   <td style="width:338px;">上一页的IconData</td> 
  </tr> 
  <tr> 
   <td style="width:161px;">iconNext</td> 
   <td style="width:230px;">Icons.arrow_forward_ios</td> 
   <td style="width:338px;">下一页的IconData</td> 
  </tr> 
  <tr> 
   <td style="width:161px;">color</td> 
   <td style="width:230px;">Theme.of(context).primaryColor</td> 
   <td style="width:338px;">控制按钮颜色</td> 
  </tr> 
  <tr> 
   <td style="width:161px;">size</td> 
   <td style="width:230px;">30.0</td> 
   <td style="width:338px;">控制按钮大小</td> 
  </tr> 
  <tr> 
   <td style="width:161px;">padding</td> 
   <td style="width:230px;">const EdgeInsets.all(5.0)</td> 
   <td style="width:338px;">控制按钮与容器的距离</td> 
  </tr> 
 </tbody> 
</table>

### 控制器(SwiperController) ###

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

<table style="width:608px;"> 
 <tbody> 
  <tr> 
   <td style="width:309px;">方法</td> 
   <td style="width:298px;">描述</td> 
  </tr> 
  <tr> 
   <td style="width:309px;">void move(int index, {bool animation: true})</td> 
   <td style="width:298px;">移动到指定下标，设置是否播放动画</td> 
  </tr> 
  <tr> 
   <td style="width:309px;">void next({bool animation: true})</td> 
   <td style="width:298px;">下一页</td> 
  </tr> 
  <tr> 
   <td style="width:309px;">void previous({bool animation: true})</td> 
   <td style="width:298px;">上一页</td> 
  </tr> 
  <tr> 
   <td style="width:309px;">void startAutoplay()</td> 
   <td style="width:298px;">开始自动播放</td> 
  </tr> 
  <tr> 
   <td style="width:309px;">void stopAutoplay()</td> 
   <td style="width:298px;">停止自动播放</td> 
  </tr> 
 </tbody> 
</table>

## ##

### Swiper的layout属性，布局 ###

1.SwiperLayout.STACK

注意：如果使用Swiper的layout属性，必须要有itemWidth属性，否则会报错

在原来第二个banner的基础上加上两句代码：

itemWidth: 300.0,
    layout: SwiperLayout.STACK,

![2019073120093811.gif][]

2.SwiperLayout.CUSTOM

在原来第三个banner基础上加上以下代码

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: 300.0,

![20190731201452771.gif][]

3.layout: SwiperLayout.TINDER

在原来第二个banner基础上加上并修改以下代码 ，注意：itemWidth和itemHeight必须设置，否则报错

size: Size.fromHeight(280.0),//为了好看点，修改下高度
    //新增以下代码
    itemWidth: 350.0,
    itemHeight: 250.0,//高度必须设置
    layout: SwiperLayout.TINDER

![20190731205205607.gif][]

[20190731202927595.gif]: /images/20211114/8b2988341ab6443489871e175af527f0.png
[20190731195346240.gif]: /images/20211114/5d7fca70a1ee4672a54d373154d6032a.png
[2019073120093811.gif]: /images/20211114/ecb892765ba64763997e43b3219cb1bf.png
[20190731201452771.gif]: /images/20211114/3f37cb7af2314c838387d4158c72ffcb.png
[20190731205205607.gif]: /images/20211114/01735bce889f43b795fd1f1d257329d2.png