Flutter可滑动删除的轮播图插件dismissible_carousel_viewpager的使用

dismissible_carousel_viewpager 是一个提供轮播效果和页面移除时带有消失动画的视图分页器。

特性

• 带有dismissal animation（移除动画）的轮播视图分页器
  • 淡出 & 滑出
  • 淡出 & 缩放
  • 淡出 & 圆形隐藏

Fade out & slide out	Fade out & scale	Fade out & circular hide

Web Live Demo

你可以通过 这个链接 查看插件在Web上的实时演示。

使用方法

基础用法

DismissibleCarouselViewPager(
  viewportFraction: 0.5,
  besidePageScale: 0.8,
  itemBuilder: (context, index) {
    return Container(
      alignment: Alignment.center,
      color: index.isEven
          ? Colors.blueAccent.withOpacity(0.1)
          : Colors.deepPurpleAccent.withOpacity(0.1),
      child: Text("Item:$index"),
    ); 
  },
  itemCount: 100,
);

移除动画

dismissible_carousel_viewpager 提供了多种动画（如淡出、滑出、缩放和圆形隐藏）来实现移除动画。你可以组合这些动画以创建自己的移除动画风格。

注意事项

• 移除动画基于 AnimatedSwitcher
• 记得为 DismissibleCarouselViewPager.itemBuilder 创建的页面小部件添加 key
• 推荐使用准备用于创建页面小部件的数据来创建 Key("$data")，ValueKey(data) 或 ObjectKey(data) 作为页面小部件的键

示例代码

late final List<int> _item = List.generate(1000, (index) => index);

DismissibleCarouselViewPager(
  itemCount: _item.length,
  itemBuilder: (context, index) {
    Object data = _item[index];
    return Container(
      // 必须添加key
      key: Key("$data"),
      //key: ValueKey(data),
      //key: ObjectKey(data),
      alignment: Alignment.center,
      color: Colors.grey.withOpacity(0.1),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
            child: Container(
              alignment: Alignment.bottomCenter,
              child: Text("Item:$data"),
            ),
          ),
          Expanded(
            child: IconButton(
              icon: const Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  _item.remove(data);
                });
              },
            ),
          ),
        ],
      ),
    );
  },
  dismissalConfig: DismissalConfig(
    dismissalTypes: [
      DismissalType.fadeOut(),
      DismissalType.slideOut(),
    ],
  ),
);

完整示例Demo

下面是一个完整的示例应用程序，展示了如何使用 dismissible_carousel_viewpager 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final List<int> _items = List.generate(10, (index) => index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: DismissibleCarouselViewPager(
          itemCount: _items.length,
          itemBuilder: (context, index) {
            int data = _items[index];
            return Container(
              key: ValueKey(data),
              alignment: Alignment.center,
              color: Colors.primaries[data % Colors.primaries.length],
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text("Item $data"),
                  IconButton(
                    icon: const Icon(Icons.delete),
                    onPressed: () {
                      setState(() {
                        _items.removeAt(index);
                      });
                    },
                  ),
                ],
              ),
            );
          },
          dismissalConfig: DismissalConfig(
            dismissalTypes: [
              DismissalType.fadeOut(),
              DismissalType.slideOut(),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含10个项目的列表，并将其展示在一个 DismissibleCarouselViewPager 中。每个项目都有一个删除按钮，点击后可以将该项目从列表中移除，并触发相应的移除动画。