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

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

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

我目前正在布局中使用if子句，并在检索新数据时调用

setState（）

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

---

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

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

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,
)

---

颤振已经有很多有用的小部件，可以用于此实现。我相信

AnimatedList

小部件可以解决您的问题。我在下面添加了本周视频小部件和一个基本示例

示例：

导入“包装：颤振/材料.省道”；
类PageOne扩展StatefulWidget{
@凌驾
_PageOneState createState（）；
}
类PageOneState扩展了状态{
///用于访问动画列表的全局键。
最终_animatedListKey=GlobalKey（）；
列表_项=[]；
@凌驾
void initState（）{
//设置应显示的项目。
_项目=['A'，'B'，'D'，'E'，'F']；
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：Text（'Example'）），
主体：动画列表(
键：_animatedListKey，
initialItemCount:_items.length，
itemBuilder：（上下文、索引、动画）{
返回幻灯片转换(
位置：animation.drive(
//从右到左滑动的二者之间。
吐温（开始：偏移（1.0,0.0），结束：偏移（0.0,0.0）），
),
//只需显示字母即可。
子项：ListTile（标题：文本（_items[索引]），
);
},
),
浮动操作按钮：浮动操作按钮(
子：图标（Icons.add），
已按下：（）{
//要插入的项目。
最终_项='C'；
//添加、排序和检索插入项的索引。
列表_temp=_项..添加（_项）；
_临时排序（）；
最终索引=（项目）的临时索引；
//更新状态并启动动画列表动画。
设置状态（）{
_项目。插入（_索引，_项目）；
_animatedListKey.currentState？.insertItem（_索引）；
});
},
),
);
}
}

但AnimatedSwitcher不是用于在两个不同的小部件之间切换的吗？我希望我的小部件出现在任何地方。有没有更好的做法，或者我需要将AnimatedSwitcher的子对象设置为空容器，然后将其切换到我想要的小部件？我已经编辑了我的答案，这是您想要的吗？颤振动画谢谢，这可能是我最好的方法。但是，您知道通过赋予列表项一些优先级来插入列表项的方法吗？例如，我希望C项放在D、E之前，A、B之后。问题是，当C到达时，列表中的可用项可能会有所不同。是的，这当然是可能的！我已经添加了您所要求的基本实现。如果有什么不清楚的地方，请告诉我。

@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(),
            ),
          ),
        ),
      ),
    );
  }