这是一个提供轮播效果和页面移除时的销毁动画的ViewPager。

特点

  • 轮播效果
水平 垂直
  • 销毁动画
淡出 & 滑出 淡出并缩放 淡出并圆形隐藏

Web 在线演示

这是该插件 Web 版本的示例应用。

https://zyzdev.github.io/dismissible_carousel_viewpager

用法

更多用法详情请参阅 /example 应用中的 /example。

基本用法

更多详情，请在 /example 应用中运行 Base Usage 演示。

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,
);

销毁动画

更多详情请在 /example 应用中运行 Dismissal Usage 演示。

dismissible_carousel_viewpager 提供了多种动画（淡出、滑出、缩放 和 圆形隐藏）来制作销毁动画。

您可以组合它们来制作您自己风格的销毁动画。

笔记

销毁动画基于 AnimatedSwitcher。

请记住为 DismissibleCarouselViewPager.itemBuilder 创建的页面小部件添加 key。

我建议使用用于创建页面小部件的 data 来为页面小部件创建 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(
      // must add 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(),
    ],
  ),
);

GitHub

查看 Github