Flutter卡片滑动插件card_swiper的使用

介绍

card_swiper 是一个Flutter插件，用于创建类似卡片滑动或轮播效果的组件。它支持多种布局方式、无限循环，并且兼容Android和iOS平台。

快速开始

安装

首先，在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  card_swiper: ^3.0.0

然后在项目根目录下运行以下命令来获取包：

flutter packages get

或者直接使用命令行工具：

flutter pub add card_swiper

基本用法

下面是一个简单的例子，展示了如何创建一个包含三张图片的基本轮播图：

import 'package:flutter/material.dart';
import 'package:card_swiper/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, required 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: Swiper(
        itemBuilder: (BuildContext context, int index) {
          return Image.network(
            "https://via.placeholder.com/350x150",
            fit: BoxFit.fill,
          );
        },
        itemCount: 3,
        pagination: SwiperPagination(),
        control: SwiperControl(),
      ),
    );
  }
}

构造函数参数说明

基础属性

• scrollDirection: 滚动方向，默认为水平滚动。
• loop: 是否启用无限循环，默认为true。
• index: 初始显示的索引，默认为0。
• autoplay: 是否自动播放，默认为false。
• onIndexChanged: 当前索引改变时触发的回调函数。
• onTap: 点击卡片时触发的回调函数。
• duration: 动画持续时间，默认为300毫秒。
• pagination: 分页指示器，默认为空。
• control: 控制按钮，默认为空。

分页指示器(Pagination)

通过设置 SwiperPagination() 可以显示默认的分页指示器。你可以自定义分页样式，例如使用 DotSwiperPaginationBuilder 或者完全自定义。

控制按钮(Control Buttons)

通过设置 SwiperControl() 可以显示左右箭头控制按钮。你也可以自定义这些按钮的图标、颜色等。

控制器(Controller)

SwiperController 提供了对 Swiper 的手动控制方法，如移动到特定索引、启动或停止自动播放等。

自动播放(Autoplay)

可以通过设置 autoplayDelay 来指定自动播放的时间间隔，默认为3秒。如果设置了 autoplayDisableOnInteraction 为 true，则用户交互（如滑动）后将暂停自动播放。

内置布局(Layouts)

card_swiper 提供了几种预设的布局模式：

• 默认布局：普通卡片堆叠效果。
• SwiperLayout.STACK: 类似 Tinder 应用中的卡片堆叠效果。
• SwiperLayout.TINDER: 更加贴近 Tinder 风格的设计。
• SwiperLayout.CUSTOM: 允许开发者自定义动画效果。

示例代码

这里提供了一些更复杂的示例代码片段，包括垂直滚动、分数形式的分页指示器以及自定义分页指示器等。

// 水平滚动示例
class ExampleHorizontal extends StatelessWidget {
  const ExampleHorizontal({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ExampleHorizontal'),
      ),
      body: Swiper(
        itemBuilder: (context, index) {
          final image = images[index];
          return Image.asset(
            image,
            fit: BoxFit.fill,
          );
        },
        indicatorLayout: PageIndicatorLayout.COLOR,
        autoplay: true,
        itemCount: images.length,
        pagination: const SwiperPagination(),
        control: const SwiperControl(),
      ),
    );
  }
}

// 垂直滚动示例
class ExampleVertical extends StatelessWidget {
  const ExampleVertical({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ExampleVertical'),
      ),
      body: Swiper(
        itemBuilder: (context, index) {
          return Image.asset(
            images[index],
            fit: BoxFit.fill,
          );
        },
        autoplay: true,
        itemCount: images.length,
        scrollDirection: Axis.vertical,
        pagination: const SwiperPagination(alignment: Alignment.centerRight),
        control: const SwiperControl(),
      ),
    );
  }
}

// 分数形式的分页指示器
class ExampleFraction extends StatelessWidget {
  const ExampleFraction({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ExampleFraction'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Swiper(
              itemBuilder: (context, index) {
                return Image.asset(
                  images[index],
                  fit: BoxFit.fill,
                );
              },
              autoplay: true,
              itemCount: images.length,
              pagination: const SwiperPagination(builder: SwiperPagination.fraction),
              control: const SwiperControl(),
            ),
          ),
          // ...其他内容...
        ],
      ),
    );
  }
}

// 自定义分页指示器
class ExampleCustomPagination extends StatelessWidget {
  const ExampleCustomPagination({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Pagination'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Swiper(
              itemBuilder: (context, index) {
                return Image.asset(
                  images[index],
                  fit: BoxFit.fill,
                );
              },
              autoplay: true,
              itemCount: images.length,
              pagination: SwiperPagination(
                margin: EdgeInsets.zero,
                builder: SwiperCustomPagination(
                  builder: (context, config) {
                    return ConstrainedBox(
                      child: Container(
                        color: Colors.white,
                        child: Text(
                          '${titles[config.activeIndex]} ${config.activeIndex + 1}/${config.itemCount}',
                          style: const TextStyle(fontSize: 20.0),
                        ),
                      ),
                      constraints: const BoxConstraints.expand(height: 50.0),
                    );
                  },
                ),
              ),
              control: const SwiperControl(),
            ),
          ),
          // ...其他内容...
        ],
      ),
    );
  }
}

以上就是关于 card_swiper 插件的基本介绍和使用方法。如果你有任何问题或者需要进一步的帮助，请随时提问！