Flutter水平卡片翻页插件horizontal_card_pager的使用

概述

horizontal_card_pager 是一个用于创建水平方向动态且美观的卡片视图切换器的Flutter插件。它可以帮助你轻松地在应用中实现类似Dribbble艺术风格的卡片翻页效果。

预览

移动端预览

Web端预览

安装步骤

1. 添加依赖到 pubspec.yaml

dependencies:
    horizontal_card_pager: ^1.1.1

2. 导入包

import 'package:horizontal_card_pager/horizontal_card_pager.dart';
import 'package:horizontal_card_pager/card_item.dart';

3. 使用 HorizontalCardPager

HorizontalCardPager(
    initialPage: 2, // 默认值为2
    onPageChanged: (page) => print("page : $page"),
    onSelectedItem: (page) => print("selected : $page"),
    items: [...],  // 设置 ImageCardItem 或 IconTitleCardItem 类
);

4. 在 items 参数中添加 CardItem 对象

如果卡片内容仅包含图像，使用 ImageCardItem 类；如果卡片内容包括图标和标题，使用 IconTitleCardItem 类。

ImageCardItem

class ImageCarditem extends CardItem {
  final Widget image;

  ImageCarditem({this.image});
}

IconTitleCardItem

class IconTitleCardItem extends CardItem {
  final IconData iconData;
  final String text;
  final Color selectedBgColor;
  final Color noSelectedBgColor;
  final Color selectedIconTextColor;
  final Color noSelectedIconTextColor;

  IconTitleCardItem({
      this.iconData,
      this.text,
      this.selectedIconTextColor = Colors.white,
      this.noSelectedIconTextColor = Colors.grey,
      this.selectedBgColor = Colors.blue,
      this.noSelectedBgColor = Colors.white});
}

如何使用

示例代码

以下是一个完整的示例，展示了如何使用 HorizontalCardPager 插件：

import 'package:flutter/material.dart';
import 'package:horizontal_card_pager/horizontal_card_pager.dart';
import 'package:horizontal_card_pager/card_item.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    List<CardItem> items = [
      IconTitleCardItem(
        text: "Alarm",
        iconData: Icons.access_alarms,
      ),
      IconTitleCardItem(
        text: "Add",
        iconData: Icons.add,
      ),
      IconTitleCardItem(
        text: "Call",
        iconData: Icons.add_call,
      ),
      IconTitleCardItem(
        text: "WiFi",
        iconData: Icons.wifi,
      ),
      IconTitleCardItem(
        text: "File",
        iconData: Icons.attach_file,
      ),
      IconTitleCardItem(
        text: "Air Play",
        iconData: Icons.airplay,
      ),
    ];

    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: Text('Horizontal Card Pager Demo')),
          body: Center(
              child: HorizontalCardPager(
                initialPage: 2,
                onPageChanged: (page) => print("page : $page"),
                onSelectedItem: (page) => print("selected : $page"),
                items: items,
              ))),
    );
  }
}

参考

该插件的动画灵感来自于 Dribbble 上的艺术作品。

待办事项

• ✅ 附加手势检测器
• ✅ 实现回调方法
• ✅ 允许自定义卡片设计
  • ✅ 图标和标题
  • ✅ 仅图像
• ✅ 实现示例应用
• ✅ 发布插件

通过上述步骤和示例代码，你可以轻松地在你的Flutter应用中集成并使用 horizontal_card_pager 插件来实现漂亮的水平卡片翻页效果。