Flutter滑动卡片效果插件flutter_slimy_card的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter滑动卡片效果插件flutter_slimy_card的使用

SlimyCard 提供了一种类似于果冻的动画效果，将一个卡片拆分成顶部和底部两个不同的卡片。可以在这两个独立的卡片中放置任何自定义的小部件。

如何安装这个包

  1. 依赖它 在你的项目的 pubspec.yaml 文件中添加以下内容：

    dependencies:
  flutter_slimy_card: ^1.0.2

  2. 安装它 可以通过命令行使用 Flutter 安装包：

    $ flutter pub get

如何使用这个包

  1. 导入这个包

    在你的 Dart 代码中可以这样使用：

    import 'package:flutter_slimy_card/flutter_slimy_card.dart';

  2. 使用这个包

基本用法
ListView(
  children: <Widget>[
    FlutterSlimyCard()
  ]
);
自定义用法示例
class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
      children: <Widget>[
        FlutterSlimyCard(
          topCardHeight: 160,
          bottomCardHeight: 120,
          topCardWidget: topWidget(),
          bottomCardWidget: bottomWidget(),
        ),
      ],
    ));
  }

  // 顶部卡片内容
  Widget topWidget() {
    return Container(
      child: SafeArea(
        child: Column(
          children: [
            Container(height: 75, child: Image(image: AssetImage('assets/run_horse.png'))), // 显示一张名为 run_horse.png 的图片
            SizedBox(
              height: 5,
            ),
            Text(
              'A Horse', // 文字内容
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
            SizedBox(
              height: 5,
            ),
          ],
        ),
      ),
    );
  }

  // 底部卡片内容
  Widget bottomWidget() {
    return Container(
      margin: EdgeInsets.only(top: 5),
      child: Column(
        children: [
          SizedBox(height: 10),
          Flexible(
              child: Text(
            'A horse is a large animal which people can ride. Some horses are used for pulling ploughs and carts. Say Hello to a Funny Hourse.', // 文字内容
            style: TextStyle(color: Colors.white),
          ))
        ],
      ),
    );
  }
}

更多关于Flutter滑动卡片效果插件flutter_slimy_card的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter滑动卡片效果插件flutter_slimy_card的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_slimy_card插件来实现滑动卡片效果的代码示例。flutter_slimy_card插件允许你创建一个类似Tinder的卡片滑动效果。

首先，确保你的Flutter项目中已经添加了flutter_slimy_card依赖。你可以在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_slimy_card: ^x.y.z  # 请将x.y.z替换为最新版本号

然后运行flutter pub get来获取依赖。

接下来是一个完整的示例代码，展示了如何使用flutter_slimy_card：

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

void main() {
  runApp(MyApp());
}

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

class SlimeCardDemo extends StatefulWidget {
  @override
  _SlimeCardDemoState createState() => _SlimeCardDemoState();
}

class _SlimeCardDemoState extends State<SlimeCardDemo> with SingleTickerProviderStateMixin {
  final List<String> images = [
    'https://via.placeholder.com/350x150?text=Card+1',
    'https://via.placeholder.com/350x150?text=Card+2',
    'https://via.placeholder.com/350x150?text=Card+3',
    // 添加更多图片URL
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slime Card Demo'),
      ),
      body: Center(
        child: SlimeCard(
          cardList: images.map((image) => CardData(
            image: NetworkImage(image),
            onSwipeLeft: () {
              print('Card $image swiped left');
            },
            onSwipeRight: () {
              print('Card $image swiped right');
            },
          )).toList(),
          cardWidth: 300,
          cardHeight: 150,
          cardRadius: 16,
          overlayColor: Colors.black.withOpacity(0.3),
          cardMargin: 8,
          animationDuration: Duration(milliseconds: 300),
          onCardDisappear: (index) {
            print('Card $index disappeared');
          },
        ),
      ),
    );
  }
}

class CardData {
  final ImageProvider image;
  final VoidCallback onSwipeLeft;
  final VoidCallback onSwipeRight;

  CardData({required this.image, required this.onSwipeLeft, required this.onSwipeRight});
}

代码解释：

  1. 依赖引入：确保在pubspec.yaml文件中添加了flutter_slimy_card依赖。

  2. 主应用入口：MyApp是一个简单的MaterialApp，它定义了应用的主题和主页。

  3. 主页：SlimeCardDemo是一个有状态的组件，它包含了一个卡片列表和必要的构建逻辑。

  4. 卡片数据：CardData类用于存储每张卡片的数据，包括图片URL和左右滑动的回调。

  5. 卡片组件：SlimeCard组件接收一个CardData对象的列表，并处理卡片的显示和滑动逻辑。

  6. 回调处理：在卡片被左右滑动时，会调用相应的回调函数，打印出滑动信息。

  7. 布局和样式：通过cardWidth、cardHeight、cardRadius等参数调整卡片的布局和样式。

你可以根据需求进一步自定义卡片的内容和样式。希望这个示例对你有所帮助！

回到顶部