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

Posted 2023-02-23

【中文标题】如何在 Flutter 中使用动画更改行/列状态？

【英文标题】：How to change row/column states with animation in Flutter?

【发布时间】：2021-07-20 08:26:41

【问题描述】：

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

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

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

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

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

【参考方案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);
          );
        ,
      ),
    );
  

【讨论】：

谢谢，这对我来说可能是最好的方法。但是你知道通过给它们一些优先级来插入列表项的任何方法吗？例如，我希望将 C 项放在 D、E 之前和 A、B 之后。问题是 C 到达时列表中的可用项可能会有所不同。

是的，这当然是可能的！我已经添加了您所要求的基本实现。如果有任何不清楚的地方，请告诉我。

【参考方案2】：

您始终可以使用 AnimatedSwitcher 在小部件之间设置动画，只需 setState 并更改 _widget：

AnimatedSwitcher(
  duration: Duration(milliseconds: 200),
  transitionBuilder: (Widget child, Animation<double> animation) 
    var tween=Tween<Offset>(begin: Offset(1, 0), end: Offset(0, 0))
     return SlideTransition(
       child: child,
       position: tween.animate(animation),
    );
  ,
  child: _widget,
)

或使用 flutter_staggered_animations 与 Column & Row 显示动画

@override
  Widget build(BuildContext context) 
    return Scaffold(
      body: SingleChildScrollView(
        child: AnimationLimiter(
          child: Column(
            children: AnimationConfiguration.toStaggeredList(
              duration: const Duration(milliseconds: 375),
              childAnimationBuilder: (widget) => SlideAnimation(
                horizontalOffset: 50.0,
                child: FadeInAnimation(
                  child: widget,
                ),
              ),
              children: YourColumnChildren(),
            ),
          ),
        ),
      ),
    );
  

【讨论】：

但是 AnimatedSwitcher 不是用于在两个不同的小部件之间切换吗？我希望我的小部件突然出现。有没有更好的做法，还是我需要将 AnimatedSwitcher 的孩子设置为空 Container，然后将其切换到我想要的小部件？

我已经编辑了我的答案，这是你想要的吗？ flutter_staggered_animations