Flutter轮播组件插件en_card_swiper的使用

概述

en_card_swiper 是一个用于 Flutter 的轮播组件插件，支持多种布局、无限循环功能，并且兼容 Android 和 iOS。它提供了丰富的配置选项，包括分页器、控制按钮、自动播放等。

安装

在 pubspec.yaml 文件中添加以下依赖：

en_card_swiper: ^0.0.1

然后运行以下命令安装依赖：

flutter packages get

或者使用以下命令：

flutter pub add en_card_swiper

基本用法

创建新项目

使用以下命令创建一个新的 Flutter 项目：

flutter create myapp

编辑 lib/main.dart 文件如下：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ENSwiper(
        itemBuilder: (BuildContext context, int index) {
          return Image.network(
            "https://via.placeholder.com/350x150",
            fit: BoxFit.fill,
          );
        },
        itemCount: 3,
        pagination: ENSwiperPagination(),
        control: ENSwiperController(),
      ),
    );
  }
}

运行后，你将看到一个简单的轮播组件，包含 3 张图片。

构造函数详解

基础参数

分页器

分页器通过 ENSwiperPagination 实现，支持自定义样式。

默认分页器

ENSwiper(
  pagination: ENSwiperPagination(),
)

自定义分页器

ENSwiper(
  pagination: SwiperCustomPagination(
    builder: (BuildContext context, ENSwiperPluginConfig config) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: List.generate(config.itemCount, (index) {
          return Container(
            width: 10,
            height: 10,
            margin: EdgeInsets.symmetric(horizontal: 5),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: index == config.activeIndex ? Colors.blue : Colors.grey,
            ),
          );
        }),
      );
    },
  ),
)

控制按钮

控制按钮通过 ENSwiperControl 实现。

ENSwiper(
  control: ENSwiperControl(),
)

自定义控制按钮

ENSwiper(
  control: SwiperControl(
    iconPrevious: Icons.arrow_back,
    iconNext: Icons.arrow_forward,
    color: Colors.red,
    size: 40,
  ),
)

控制器

控制器用于手动控制轮播的索引或自动播放状态。

final SwiperController _controller = SwiperController();

ENSwiper(
  controller: _controller,
  onTap: (int index) {
    print("Current Index: $index");
  },
);

控制器方法

自动播放

ENSwiper(
  autoplay: true,
  autoplayDelay: 2000, // 自动播放间隔（毫秒）
  autoplayDisableOnInteraction: true, // 手动滑动时暂停自动播放
)

内置布局

ENSwiper 支持多种内置布局。

默认布局

ENSwiper(
  itemBuilder: (BuildContext context, int index) {
    return Image.network("https://via.placeholder.com/288x188");
  },
  itemCount: 10,
  viewportFraction: 0.8,
  scale: 0.9,
)

堆叠布局

ENSwiper(
  itemBuilder: (BuildContext context, int index) {
    return Image.network("https://via.placeholder.com/288x188");
  },
  itemCount: 10,
  itemWidth: 300.0,
  layout: SwiperLayout.STACK,
)

推卡片布局

ENSwiper(
  itemBuilder: (BuildContext context, int index) {
    return Image.network("https://via.placeholder.com/288x188");
  },
  itemCount: 10,
  itemWidth: 300.0,
  itemHeight: 400.0,
  layout: SwiperLayout.TINDER,
)

自定义动画

可以通过 CustomLayoutOption 创建自定义动画。

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

示例代码

ConstrainedBox(
  child: ENSwiper(
    outer: false,
    itemBuilder: (c, i) {
      return Wrap(
        runSpacing: 6.0,
        children: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) {
          return SizedBox(
            width: MediaQuery.of(context).size.width / 5,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                SizedBox(
                  child: Container(
                    child: Image.network(
                      "https://fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg%3FimageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90",
                    ),
                  ),
                  height: MediaQuery.of(context).size.width * 0.12,
                  width: MediaQuery.of(context).size.width * 0.12,
                ),
                Padding(
                  padding: EdgeInsets.only(top: 6.0),
                  child: Text("$i"),
                ),
              ],
            ),
          );
        }).toList(),
      );
    },
    pagination: ENSwiperPagination(
      margin: EdgeInsets.all(5.0),
    ),
    itemCount: 10,
  ),
  constraints: BoxConstraints.loose(Size(screenWidth, 170.0)),
),

常见问题

如何移除默认控制按钮？

不传递任何值给 control 参数即可：

ENSwiper(
  control: null,
)

如何移除默认分页器？

不传递任何值给 pagination 参数即可：

ENSwiper(
  pagination: null,
)