Flutter卡片滑动插件 card_slider 的使用

card_slider 是一个支持在Flutter中实现卡片轮播的插件，它可以在Android和iOS上工作。这个插件允许用户通过滑动或拖拽来浏览图片或自定义小部件。本文将详细介绍如何安装和使用card_slider插件，并提供完整的示例代码。

安装

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

dependencies:
  card_slider: ^1.0.5

之后运行flutter pub get以下载并安装该插件。

简单使用

使用小部件作为幻灯片

下面的例子展示了如何使用小部件作为幻灯片：

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

class CardSliderWidgetExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    List<Color> valuesDataColors = [
      Colors.purple,
      Colors.yellow,
      Colors.green,
      Colors.red,
      Colors.grey,
      Colors.blue,
    ];

    List<Widget> valuesWidget = [];
    for (int i = 0; i < valuesDataColors.length; i++) {
      valuesWidget.add(Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12.0),
            color: valuesDataColors[i],
          ),
          child: Align(
            alignment: Alignment.center,
            child: Text(
              i.toString(),
              style: const TextStyle(fontSize: 28),
            ),
          )));
    }

    return Scaffold(
        backgroundColor: const Color(0xFF1560BD),
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          title: const Text(
            "Cards",
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Colors.white),
          ),
          centerTitle: true,
          leading: IconButton(
            icon: const Icon(Icons.arrow_back, color: Colors.white),
            tooltip: 'Back',
            onPressed: () => Navigator.of(context).pop(),
          ),
        ),
        body: CardSlider(
          cards: valuesWidget,
          bottomOffset: .0005,
          cardHeight: 0.75,
          itemDotOffset: 0.25,
        ));
  }
}

使用图片作为幻灯片

如果你想展示一系列图片，可以参考以下示例：

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

class CardSliderImageExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    List<String> valuesUrl = [
      'https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg',
      'https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg',
      'https://www.eea.europa.eu/themes/biodiversity/state-of-nature-in-the-eu/state-of-nature-2020-subtopic/image_print'
    ];

    List<Widget> valuesWidget = valuesUrl.map((url) => Image.network(url)).toList();

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: const Text(
          "Gallery",
          style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xFF33a000)),
        ),
        centerTitle: true,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Color(0xFF33a000)),
          tooltip: 'Back',
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
      body: CardSlider(
        cards: valuesWidget,
        bottomOffset: .0008,
        itemDotWidth: 14,
        itemDotOffset: 0.15,
        itemDot: (itemDotWidth) {
          return Container(
              margin: const EdgeInsets.all(5),
              width: 8 + itemDotWidth,
              height: 8,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: const Color(0xFF33a000),
              ));
        },
      ),
    );
  }
}

在可滚动的Column中使用小部件

如果你需要在一个可滚动的列表中包含CardSlider，可以使用如下代码：

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

class CardSliderInScrollableViewExample extends StatefulWidget {
  [@override](/user/override)
  _CardSliderInScrollableViewExampleState createState() => _CardSliderInScrollableViewExampleState();
}

class _CardSliderInScrollableViewExampleState extends State<CardSliderInScrollableViewExample> {
  bool _dragOverMap = false;
  final GlobalKey _pointerKey = GlobalKey();

  void _checkDrag(Offset position, bool up) {
    if (!up) {
      RenderBox box = _pointerKey.currentContext!.findRenderObject() as RenderBox;
      Offset boxOffset = box.localToGlobal(Offset.zero);
      if (position.dy > boxOffset.dy && position.dy < boxOffset.dy + box.size.height) {
        setState(() {
          _dragOverMap = true;
        });
      }
    } else {
      setState(() {
        _dragOverMap = false;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    List<Color> valuesDataColors = [
      Colors.purple,
      Colors.yellow,
      Colors.green,
      Colors.red,
      Colors.grey,
      Colors.blue,
    ];

    List<Widget> valuesWidget = [];
    for (int i = 0; i < valuesDataColors.length; i++) {
      valuesWidget.add(Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12.0),
            color: valuesDataColors[i],
          ),
          child: Align(
            alignment: Alignment.center,
            child: Text(
              i.toString(),
              style: const TextStyle(fontSize: 28),
            ),
          )));
    }

    return Scaffold(
      appBar: AppBar(title: const Text("Slide inside column widget")),
      body: Listener(
        onPointerUp: (ev) => _checkDrag(ev.position, true),
        onPointerDown: (ev) => _checkDrag(ev.position, false),
        child: ListView(
          physics: _dragOverMap ? const NeverScrollableScrollPhysics() : const ScrollPhysics(),
          children: [
            Column(children: [for (int i = 0; i < 3; i++) const ListTile(title: Text("Tile to scroll")), const Divider()]),
            Container(
              color: Colors.amberAccent,
              key: _pointerKey,
              height: 350,
              width: double.infinity,
              child: CardSlider(
                cards: valuesWidget,
                bottomOffset: .0008,
                cardHeight: 0.75,
                containerHeight: MediaQuery.of(context).size.height - 100,
                itemDotOffset: 0.55,
              ),
            ),
            Column(children: [for (int i = 0; i < 3; i++) const ListTile(title: Text("Tile to scroll")), const Divider()]),
          ],
        ),
      ),
    );
  }
}