Flutter 实战开发-轮播图

本文主要通过flutter实现轮播图功能，主要是基础使用，如有疑问可留言讨论

一、Swiper引入

轮播图我们使用三方库flutter_swiper，首先在pubspec.yaml中配置依赖

flutter_swiper : 1.1.6

然后拉取三方仓库

flutter packages get 

二、Swiper使用

必传参数主要有两个

1，itemBuilder用于返回Swiper的轮播图

2，itemCount为轮播的数量

全部代码如下

import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new SwiperPage(),
    );
  }
}

class SwiperPage extends StatefulWidget {
  @override
  _SwiperPageState createState() => _SwiperPageState();
}

class _SwiperPageState extends State<SwiperPage> {
  List<Map> imgList = [
    {"url": "http://img5.mtime.cn/mg/2021/08/24/141454.81651527_285X160X4.jpg"},
    {"url": "http://img5.mtime.cn/mg/2021/08/24/134535.67957178_285X160X4.jpg"},
    {"url": "http://img5.mtime.cn/mg/2021/08/24/112722.60735295_285X160X4.jpg"},
    {"url": "http://img5.mtime.cn/mg/2021/08/24/110937.63038065_285X160X4.jpg"},
  ];

  @override
  Widget build(BuildContext context) {
    var MySwiperWidget = Swiper(
      itemBuilder: (BuildContext context, int index) {
        //每次循环遍历时，将i赋值给index
        return new Image.network(
          imgList[index]['url'],
          fit: BoxFit.fill,
        );
      },
      itemCount: imgList.length,
      //指示器
      pagination: new SwiperPagination(),
    );

    return Scaffold(
        appBar: AppBar(
          title: Text('轮播图组件演示'),
        ),
        body: Container(
          height: 250,
          width: double.infinity,
          child: MySwiperWidget,
        ));
  }
}

三、Swiper动效

Swiper控件中有一个选择轮播动画的layout属性，该属性接收枚举值enum SwiperLayout { DEFAULT, STACK, TINDER, CUSTOM }

3.1、DEFAULT动效

DEFAULT就是上述动画效果，默认可省

var MySwiperWidget = Swiper(
      itemBuilder: (BuildContext context, int index) {
        //每次循环遍历时，将i赋值给index
        return new Image.network(
          imgList[index]['url'],
          fit: BoxFit.fill,
        );
      },
      itemCount: imgList.length,
      //指示器
      pagination: new SwiperPagination(),
    );

3.2、STACK动效

在上述效果上，我们接着改动MySwiperWidget变量。

STACK堆栈效果

var MySwiperWidget = Swiper(
  layout: SwiperLayout.STACK,
  itemBuilder: (BuildContext context, int index) {
    //每次循环遍历时，将i赋值给index
    return new Image.network(
      imgList[index]['url'],
      fit: BoxFit.fill,
    );
  },
  itemWidth: 300.0,
  itemHeight: 200.0,
  itemCount: imgList.length,
  //指示器
  pagination: new SwiperPagination(),
);

3.3、TINDER动效

var MySwiperWidget = Swiper(
      layout: SwiperLayout.TINDER,
      itemBuilder: (BuildContext context, int index) {
        //每次循环遍历时，将i赋值给index
        return new Image.network(
          imgList[index]['url'],
          fit: BoxFit.fill,
        );
      },
      itemWidth: 300.0,
      itemHeight: 200.0,
      itemCount: imgList.length,
      //指示器
      pagination: new SwiperPagination(),
    );

3.4、CUSTOM动效

CUSTOM动效需要额外配置customLayoutOption属性，用于控制旋转角度、左右两侧的卡片是否可见等

var MySwiperWidget = Swiper(
  layout: SwiperLayout.CUSTOM,
  itemBuilder: (BuildContext context, int index) {
    //每次循环遍历时，将i赋值给index
    return new Image.network(
      imgList[index]['url'],
      fit: BoxFit.fill,
    );
  },
  itemWidth: 300.0,
  itemHeight: 200.0,
  itemCount: imgList.length,
  customLayoutOption: new CustomLayoutOption(
      startIndex: -1,
      stateCount: 3
  ).addRotate([
    -45.0/180,
    0.0,
    45.0/180
  ]).addTranslate([
    new Offset(-390.0, -40.0),
    new Offset(0.0, 0.0),
    new Offset(390.0, -40.0)
  ]),
  //指示器
  pagination: new SwiperPagination(),
);

三、Swiper其他配置

//左右的箭头
control: new SwiperControl(),
//循环
loop: true,
//自动轮播
autoplay: true,

更多可以参考Swiper源码构造函数