Flutter通知卡片展示插件 stacked_notification_cards 的使用

stacked_notification_cards 是一个用于在Flutter应用中实现iOS风格的通知卡片堆叠效果的插件。以下是该插件的功能、安装步骤及示例代码。

功能

• 支持将通知卡片堆叠显示（iOS风格）
• 支持展开通知卡片时带有扇形动画
• 单个通知卡片可以向左或向右滑动
• 可以通过滑动操作单独删除某个卡片或者整个卡片堆栈
• 支持在 Column 中使用多个 StackedNotificationCards
  • 注意：如果在 Column 中使用，请确保将其包裹在 SingleChildScrollView 中

安装

在你的Flutter项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  stacked_notification_cards: <latest_version>

然后添加以下导入语句：

import 'package:stacked_notification_cards/stacked_notification_cards.dart';

请确保将 <latest_version> 替换为最新的版本号。

使用入门

下面是一个简单的示例，展示了如何使用 StackedNotificationCards 插件：

import 'package:flutter/material.dart';
import 'package:stacked_notification_cards/stacked_notification_cards.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(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// 初始化通知数组
  List<NotificationCard> _listOfNotification = [
    NotificationCard(
      date: DateTime.now(),
      leading: Icon(Icons.account_circle, size: 48),
      title: 'OakTree 1',
      subtitle: 'We believe in the power of mobile computing.',
    ),
    NotificationCard(
      date: DateTime.now().subtract(const Duration(minutes: 4)),
      leading: Icon(Icons.account_circle, size: 48),
      title: 'OakTree 2',
      subtitle: 'We believe in the power of mobile computing.',
    ),
    NotificationCard(
      date: DateTime.now().subtract(const Duration(minutes: 10)),
      leading: Icon(Icons.account_circle, size: 48),
      title: 'OakTree 3',
      subtitle: 'We believe in the power of mobile computing.',
    ),
    NotificationCard(
      date: DateTime.now().subtract(const Duration(minutes: 30)),
      leading: Icon(Icons.account_circle, size: 48),
      title: 'OakTree 4',
      subtitle: 'We believe in the power of mobile computing.',
    ),
    NotificationCard(
      date: DateTime.now().subtract(const Duration(minutes: 44)),
      leading: Icon(Icons.account_circle, size: 48),
      title: 'OakTree 5',
      subtitle: 'We believe in the power of mobile computing.',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('Stacked Notification Card'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            StackedNotificationCards(
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.25),
                  blurRadius: 2.0,
                )
              ],
              notificationCardTitle: 'Message',
              notificationCards: [..._listOfNotification],
              cardColor: Color(0xFFF1F1F1),
              padding: 16,
              actionTitle: Text(
                'Notifications',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              showLessAction: Text(
                'Show less',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.deepPurple),
              ),
              onTapClearAll: () {
                setState(() {
                  _listOfNotification.clear();
                });
              },
              clearAllNotificationsAction: Icon(Icons.close),
              clearAllStacked: Text('Clear All'),
              cardClearButton: Text('clear'),
              cardViewButton: Text('view'),
              onTapClearCallback: (index) {
                print(index);
                setState(() {
                  _listOfNotification.removeAt(index);
                });
              },
              onTapViewCallback: (index) {
                print(index);
              },
            ),
          ],
        ),
      ),
    );
  }
}

示例说明

• boxShadow：设置卡片的阴影效果。
• notificationCardTitle：设置卡片标题类型。
• notificationCards：传入通知卡片列表。
• cardColor：设置卡片背景颜色。
• padding：设置卡片内部填充。
• actionTitle：设置动作标题文本。
• showLessAction：设置“显示较少”按钮的文本样式。
• onTapClearAll：点击“清除全部”按钮时执行的操作。
• clearAllNotificationsAction：清除所有通知的图标。
• clearAllStacked：清除所有堆叠卡片的文本。
• cardClearButton：单个卡片清除按钮的文本。
• cardViewButton：单个卡片查看按钮的文本。
• onTapClearCallback：点击清除按钮时的回调函数。
• onTapViewCallback：点击查看按钮时的回调函数。

演示

通过这个插件，你可以轻松地在你的Flutter应用中实现类似iOS的通知卡片效果。希望这些信息对你有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。