Flutter自动动画列表插件automatic_animated_list的使用

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

Flutter自动动画列表插件automatic_animated_list的使用

AutomaticAnimatedList

AutomaticAnimatedList 是一个自动计算每次基础列表更改时项目增量并自动为列表项添加动画效果的 AnimatedList。

示例

以下是插件的效果示例：

示例效果

使用方法

只需提供 AutomaticAnimatedList<T> 您的列表、一个 keyingFunction，该函数将为每个项目返回一个标识键，以及 itemBuilder。AutomaticAnimatedList<T> 将处理其余部分。

以下是完整的示例代码：

// 定义一个数据模型类
class ItemModel {
  final String id;
  final String name;

  ItemModel({this.id, this.name});
}

// 创建一个包含 AnimatedAnimatedList 的无状态小部件
class ItemsAnimatedList extends StatelessWidget {
  // 定义要显示的项目列表
  final List<ItemModel> items;

  const ItemsAnimatedList({
    Key key,
    this.items,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AutomaticAnimatedList<ItemModel>(
      // 提供需要展示的项目列表
      items: items,
      // 设置插入动画持续时间
      insertDuration: Duration(seconds: 1),
      // 设置移除动画持续时间
      removeDuration: Duration(seconds: 1),
      // 返回每个项目的唯一标识符
      keyingFunction: (ItemModel item) => Key(item.id),
      // 构建每个项目的 UI
      itemBuilder: (BuildContext context, ItemModel item, Animation<double> animation) {
        return FadeTransition(
          // 设置每个项目的唯一标识符
          key: Key(item.id),
          // 应用淡入淡出动画
          opacity: animation,
          child: SizeTransition(
            // 使用曲线控制大小变化动画
            sizeFactor: CurvedAnimation(
              parent: animation,
              curve: Curves.easeOut, // 正向动画曲线
              reverseCurve: Curves.easeIn, // 反向动画曲线
            ),
            // 显示列表项内容
            child: ListTile(title: Text(item.name)),
          ),
        );
      },
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，automatic_animated_list 是一个用于 Flutter 的强大插件，它允许你创建一个动画列表，当列表项插入、删除或移动时会自动应用动画效果。以下是一个简单的代码示例，展示如何使用 automatic_animated_list。

首先，确保你已经在 pubspec.yaml 文件中添加了 automatic_animated_list 依赖：

dependencies:
  flutter:
    sdk: flutter
  automatic_animated_list: ^x.y.z  # 请替换为最新版本号

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

接下来，我们来看一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Automatic 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<String>.generate(10, (i) => "Item $i");
  final GlobalKey<AutomaticAnimatedListState> _listKey = GlobalKey<AutomaticAnimatedListState>();

  void _addItem() {
    setState(() {
      _items.add("Item ${_items.length}");
    });
  }

  void _removeItemAt(int index) {
    setState(() {
      _items.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Automatic Animated List Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            ElevatedButton(
              onPressed: _addItem,
              child: Text('Add Item'),
            ),
            SizedBox(height: 16),
            Expanded(
              child: AutomaticAnimatedList<String>(
                key: _listKey,
                initialItemCount: _items.length,
                itemBuilder: (context, index, animation) {
                  return SlideTransition(
                    position: Tween<Offset>(
                      begin: Offset(1.0, 0.0),
                      end: Offset(0.0, 0.0),
                    ).animate(animation),
                    child: FadeTransition(
                      opacity: animation,
                      child: ListTile(
                        title: Text(_items[index]),
                        trailing: IconButton(
                          icon: Icon(Icons.delete),
                          onPressed: () => _removeItemAt(index),
                        ),
                      ),
                    ),
                  );
                },
                data: _items,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个包含 10 个初始项的列表 _items。
  2. 使用 AutomaticAnimatedList 来显示这个列表，并设置 initialItemCount 为 _items.length。
  3. itemBuilder 回调用于构建每个列表项，这里我们使用了 SlideTransition 和 FadeTransition 来为列表项添加动画效果。
  4. 通过点击按钮可以添加或删除列表项，列表项的动画会自动应用。

这个示例展示了如何使用 automatic_animated_list 插件来创建一个具有插入和删除动画效果的列表。你可以根据需要进一步自定义动画效果和列表项的样式。

回到顶部