flutter - 如何在 Flutter 中使用动画更改行/列状态？

Question

我在我的布局中使用行和列，并从互联网加载一些数据以在我的行和列中显示信息。

我想设计一个动态加载页面，使每个加载的数据都使特定的小部件通过动画可见(通过平滑地移动其他小部件)。

我目前在我的布局中使用 if 子句，并在检索到新数据时调用 setState()。

Column(
  children: [
    SomeWidget(),
    if (data != null)
      DataWidget(),
    AnotherWidget(),
  ],
),

在检索到某些数据后，如何在带有动画的行/列中的其他小部件之间插入小部件？

Answer 1

Flutter 已经有大量有用的小部件，您可以将其用于此实现。我相信 AnimatedList 小部件可以解决您的问题。我在下面添加了本周小部件视频和一个基本示例。

Widget of the Week - AnimatedList

示例:

import 'package:flutter/material.dart';

class PageOne extends StatefulWidget {
  @override
  _PageOneState createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {
  /// The global key to access the animated list.
  final _animatedListKey = GlobalKey<AnimatedListState>();

  List<String> _items = [];

  @override
  void initState() {
    // Set the items that should be display.
    _items = ['A', 'B', 'D', 'E', 'F'];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Example')),
      body: AnimatedList(
        key: _animatedListKey,
        initialItemCount: _items.length,
        itemBuilder: (context, index, animation) {
          return SlideTransition(
            position: animation.drive(
              // Tween that slides from right to left.
              Tween(begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0)),
            ),
            // Simply display the letter.
            child: ListTile(title: Text(_items[index])),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          // The item to insert.
          final _item = 'C';

          // Add, sort, and retrieve the index of the inserted item.
          List<String> _temp = _items..add(_item);
          _temp.sort();
          final _index = _temp.indexOf(_item);

          // Update the state and start the animated list animation.
          setState(() {
            _items.insert(_index, _item);
            _animatedListKey.currentState?.insertItem(_index);
          });
        },
      ),
    );
  }
}