Flutter 组件之 Swiper（轮播图）

flutter实现轮播图效果

1.在项目目录下的pubspec.yaml添加flutter_swiper依赖，然后点击Pub get

flutter_swiper: ^1.1.4

2.使用如下：

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

class SwiperDefaultPage extends StatefulWidget {
     
  @override
  _SwiperDefaultPageState createState() => _SwiperDefaultPageState();
}

class _SwiperDefaultPageState extends State<SwiperDefaultPage> {
     
  @override
  Widget build(BuildContext context) {
     
    return Scaffold(
      appBar: AppBar(
        title: Text('SwiperTest'),
      ),
      body: Column(
        children: <Widget>[
          Padding(padding: EdgeInsets.all(10.0)),
          buildStyle1()
        ],
      ),
    );
  }

  //banner 图
  Widget buildStyle1() {
     
    return Container(
      height: 200.0,
      child: Swiper(
        // 横向
        scrollDirection: Axis.horizontal,
        // 布局构建
        itemBuilder: (BuildContext context, int index) {
     
          return Image.asset("resource/images/my_image.jpg", fit: BoxFit.fill);
        },
        //条目个数
        itemCount: 6,
        // 自动翻页
        autoplay: true,
        // 分页指示
        pagination: _buildPlugin(),
        // pagination: _buildSwiperPagination(),
        // pagination: _buildNumSwiperPagination(),
        //点击事件
        onTap: (index) {
     
          print(" 点击 " + index.toString());
        },
        // 相邻子条目视窗比例
        viewportFraction: 1,
        // 用户进行操作时停止自动翻页
        autoplayDisableOnInteraction: true,
        // 无限轮播
        loop: true,
        //当前条目的缩放比例
        scale: 1,
      ),
    );
  }

  //默认圆点指示器
  _buildPlugin() {
     
    return SwiperPagination();
  }

  //自定圆点分页指示器
  _buildSwiperPagination() {
     
    // 分页指示器
    return SwiperPagination(
      //指示器显示的位置 Alignment.bottomCenter 底部中间
      alignment: Alignment.bottomCenter,
      // 距离调整
      margin: const EdgeInsets.only(bottom: 5),
      // 指示器构建
      builder: DotSwiperPaginationBuilder(
          // 点之间的间隔
          space: 2,
          // 没选中时的大小
          size: 6,
          // 选中时的大小
          activeSize: 12,
          // 没选中时的颜色
          color: Colors.black54,
          //选中时的颜色
          activeColor: Colors.white),
    );
  }

  //自定义分页指示器
  _buildNumSwiperPagination() {
     
    return SwiperPagination(
      //指示器显示的位置
      alignment: Alignment.bottomCenter, // 位置 Alignment.bottomCenter 底部中间
      // 距离调整
      margin: const EdgeInsets.only(bottom: 5),
      // 指示器构建
      builder: FractionPaginationBuilder(
          // 选中时字体大小
          activeFontSize: 14,
          // 字体大小
          fontSize: 14,
          // 字体颜色
          color: Colors.red,
          //选中时的颜色
          activeColor: Colors.blue),
    );
  }
}

效果图：

3.基本参数说明：

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