Flutter列表动画插件pretty_list_animation的使用

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

Flutter列表动画插件pretty_list_animation的使用

示例

以下是使用PrettyListAnimation的完整示例代码：

import 'dart:math';

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

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

/// 主类，应用的入口点
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  /// 构建方法，返回应用的主要视图组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

      /// 配置应用主题
      theme: ThemeData(useMaterial3: true),

      /// 主要展示的页面
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  /// 声明一个类型为int的列表变量 'numbers' 并初始化为空
  late List<int> numbers = [];

  [@override](/user/override)
  void initState() {
    setState(() {
      numbers = [0, 1, 2];
    });
    super.initState();
  }

  /// 方法用于向 'numbers' 列表中添加数字
  _addNumber() {
    setState(() {
      numbers = numbers +
          [
            /// 向 'numbers' 列表中添加随机数
            Random().nextInt(100),
          ];
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('示例')),
      body: PrettyListAnimation(
        onRefresh: () async {},
        padding: const EdgeInsets.all(16),
        items: numbers,

        /// 方法用于显示 'numbers' 列表中的每个项目
        itemBuilder: (context, number, index, animation) {
          /// 可以根据需要调整动画组件，可以使用flutter提供的各种动画组件
          /// 例如：[SizeTransition] 和 [FadeTransition]
          return SizeTransition(
            sizeFactor: animation,
            child: SizedBox(
              height: 80.0,
              child: Card(
                color: Color.fromRGBO(
                  Random().nextInt(256),
                  Random().nextInt(256),
                  Random().nextInt(256),
                  1,
                ),
                child: Center(
                  child: Text('Item $number'),
                ),
              ),
            ),
          );
        },
        isInfinite: true,
        isTextIndicator: false,
        indicatorType: IndicatorType.pacman,
        size: 30,
      ),
      floatingActionButton: FloatingActionButton(
        heroTag: '1',
        onPressed: () {
          _addNumber();
        },
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用pretty_list_animation插件来实现列表动画的一个简单示例。pretty_list_animation 是一个强大的 Flutter 插件，它允许开发者为列表项添加各种漂亮的动画效果。

首先，确保在你的 pubspec.yaml 文件中添加 pretty_list_animation 依赖：

dependencies:
  flutter:
    sdk: flutter
  pretty_list_animation: ^0.4.0  # 请使用最新版本号

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

下面是一个完整的示例代码，展示了如何使用 pretty_list_animation 来实现一个简单的列表动画效果：

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

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pretty List Animation Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: PrettyList(
          // 使用 SlideAnimation 类型的动画
          animationType: PrettyListAnimationType.slide,
          // 列表项构建器
          itemBuilder: (context, index, item) {
            return ListTile(
              title: Text(item),
            );
          },
          // 列表项数量
          itemCount: items.length,
          // 列表数据源
          itemDataSource: items,
        ),
      ),
    );
  }
}

在这个示例中：

  1. PrettyList 是 pretty_list_animation 插件提供的一个核心组件。
  2. animationType 属性定义了列表项的动画类型，这里使用了 PrettyListAnimationType.slide，即滑动动画。你也可以尝试其他动画类型，如 PrettyListAnimationType.fade 或 PrettyListAnimationType.scale。
  3. itemBuilder 是一个函数，用于构建列表项的 UI。
  4. itemCount 指定了列表项的数量。
  5. itemDataSource 是列表的数据源。

这个简单的示例展示了如何快速地将 pretty_list_animation 集成到你的 Flutter 应用中，并为列表项添加动画效果。你可以根据需要进一步自定义和扩展这个示例。

回到顶部