28 Flutter 轮播图 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，都可以做进一步的自定义.

 

 

案例：

pubspec.yaml

flutter_swiper: ^1.1.6

Swiper.dart

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

class SwiperPage extends StatefulWidget {
  SwiperPage({Key key}) : super(key: key);

  _SwiperPageState createState() => _SwiperPageState();
}

class _SwiperPageState extends State<SwiperPage> {
  List<Map> imgList = [
    {"url": "https://www.itying.com/images/flutter/1.png"},
    {"url": "https://www.itying.com/images/flutter/2.png"},
    {"url": "https://www.itying.com/images/flutter/3.png"}
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('轮播图组件演示'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            width: double.infinity,
            // height: 150,
            child: AspectRatio(
              aspectRatio: 16 / 9,
              child: Swiper(
                itemBuilder: (BuildContext context, int index) {
                  return new Image.network(
                    imgList[index]['url'],
                    fit: BoxFit.fill,
                  );
                },
                itemCount: imgList.length,
                pagination: new SwiperPagination(),
                loop: true,
                autoplay: true,
                // control: new SwiperControl(),
              ),
            ),
          )
        ],
      ),
    );
  }
}