Flutter动画列表插件stacked_animated_list的使用

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

Flutter动画列表插件stacked_animated_list的使用

特性

创建视觉上令人惊叹的动画堆叠列表。将静态列表转换为引人入胜的可滑动卡片视图。

开始使用

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  stacked_animated_list: ^1.0.2

在 Dart 文件中导入包：

import 'package:stacked_animated_list/ui/stacked_list_widget.dart';

使用方法

将 StackedListWidget 添加到你的小部件中，并传递你想要显示的小部件列表。

import 'package:stacked_animated_list/ui/stacked_list_widget.dart';

const images = [
  Assets.imagesOnepeice,
  Assets.imagesNarutoi,
  Assets.imagesStone,
  Assets.imagesWindbreaker,
];

class HomeScreenWidget extends StatelessWidget {
  const HomeScreenWidget({super.key});

  @override
  Widget build(BuildContext context) {
    const cardWidth = 220.0;

    final listItems = images.mapIndexed((index, image) {
      return SizedBox(
        width: cardWidth,
        child: AspectRatio(
          aspectRatio: .66,
          child: Image.asset(
            image,
            fit: BoxFit.cover,
          ),
        ),
      );
    }).toList();
    
    return Scaffold(
      body: StackedListWidget(
        listItems: listItems,
        listItemWidth: cardWidth,
      ),
    );
  }
}

可用的附加配置

StackedListWidget(
    listItems: listItems,
    listItemWidth: cardWidth,
    animationDuration: const Duration(milliseconds: 350),
    borderRadius: BorderRadius.circular(16),
    rotationAngle: 10,
    additionalTranslateOffsetBeyondScreen: 50,
    longPressDelay: 300,
    onCenterCardClick: (index) {
      print('Center card clicked: $index');
    },
    focusedItemShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.26),
        blurRadius: 28,
        spreadRadius: 8,
        offset: const Offset(8, 16),
      ),
      BoxShadow(
        color: Colors.black.withOpacity(0.26),
        blurRadius: 28,
        spreadRadius: 8,
        offset: const Offset(-8, 2),
      ),
    ],
  )
参数 描述
animationDuration 卡片移动的动画持续时间。
borderRadius 堆叠列表中卡片的圆角半径。
rotationAngle 卡片应该旋转的角度。角度越高，卡片旋转越大。
additionalTranslateOffsetBeyondScreen 未聚焦卡片的额外水平偏移量。此值将根据提供的值将未聚焦卡片移出屏幕。
focusedItemShadow 聚焦卡片阴影自定义参数。
longPressDelay 触发卡片移动的长按延迟。
onCenterCardClick 中心卡片点击时的回调。

更多关于Flutter动画列表插件stacked_animated_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter动画列表插件stacked_animated_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 stacked_animated_list 插件的示例代码。stacked_animated_list 是一个用于在 Flutter 中创建动画列表的插件，它允许你以堆叠的方式展示列表项，并带有动画效果。

首先，确保你已经将 stacked_animated_list 添加到你的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  stacked_animated_list: ^0.1.0  # 请检查最新版本号

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

接下来是一个完整的示例代码，展示如何使用 stacked_animated_list 创建一个动画列表：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stacked Animated List Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = List.generate(20, (index) => "Item ${index + 1}");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stacked Animated List Demo'),
      ),
      body: StackedAnimatedList<String>(
        items: items,
        itemBuilder: (context, item, index) {
          return ListTile(
            title: Text(item),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {
                // 移除列表项
                setState(() {
                  items.removeAt(index);
                });
              },
            ),
          );
        },
        // 动画配置
        animationConfig: AnimationConfig(
          enterDuration: Duration(milliseconds: 300),
          exitDuration: Duration(milliseconds: 200),
          enterCurve: Curves.easeInOutCubic,
          exitCurve: Curves.easeInOutQuad,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 添加新列表项
          setState(() {
            items.add("Item ${items.length + 1}");
          });
        },
        tooltip: 'Add Item',
        child: Icon(Icons.add),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个 MyApp 应用程序，并在其中定义了 MyHomePage 作为主页。
  2. MyHomePage 是一个 StatefulWidget，我们在其中维护了一个包含字符串的列表 items。
  3. 我们使用 StackedAnimatedList 组件来显示这个列表。StackedAnimatedList 需要两个主要参数：
    • items：要显示的列表项。
    • itemBuilder：一个函数，用于构建每个列表项的 UI。
  4. animationConfig 允许我们自定义进入和退出动画的持续时间及曲线。
  5. 我们还添加了一个浮动操作按钮（FAB），用于向列表中添加新项。

运行这个示例代码，你将看到一个带有动画效果的堆叠列表，当你添加或删除列表项时，动画效果将自动应用。

回到顶部