Flutter 中的 AnimatedList 显示被压碎的元素

Question

我试图在 Flutter 中显示 ExpansionTiles/ListTiles 的 AnimatedList，结果是这样的：

这是我的代码：

Expanded (
    child: Column(
        children: [
            Expanded(
                flex: 10,
                child: Padding(
                padding: EdgeInsets.symmetric(vertical: 5),
                child: Text(
                        "Results found: ${widget.guests.length}",
                        textScaleFactor: useMobileLayout ? 1 : 1.3,
                        style: TextStyle(
                        fontWeight: FontWeight.bold,
                        ),
                    ),
                ),
            ),
            Expanded(
                flex: 90,
                child: Scrollbar(
                child: buildList(),
                ),
            ),
        ],
    ),
) 

Widget buildList(BoxConstraints constraints) {
      return AnimatedList(
        key: _animatedListKey,
        initialItemCount: 10,
        shrinkWrap: true,
        physics: const AlwaysScrollableScrollPhysics(),
        itemBuilder: (BuildContext context, int index, Animation animation) {
          return buildAnimatedItem(
              widget.guests[index], index, animation);
        },
      );
}

Widget buildAnimatedItem(Guest guest, int index, Animation animation) {
    return SizeTransition(
      sizeFactor: animation.drive(
        Tween(begin: 0.0, end: 0.1),
      ),
      child: buildItem(guest, index: index),
    );
}

Widget buildItem(Guest guest, {int index}) {
   return GuestRow();
}

我认为 Expanded 可能会导致 AnimatedList 出现填充问题，但我不确定。

你能告诉我这里发生了什么吗？

Answer 1

问题是我将 SizeTransition 的 sizeFactor 设置为

animation.drive(
    Tween(begin: 0.0, end: 0.1),
  ),

它应该在的地方

animation.drive(
    Tween(begin: 0.0, end: 1.0), // <-- changed 0.1 to 1.0
  ),

Flutter 中的 AnimatedList 显示被压碎的元素

AnimatedList in Flutter is displaying crushed elements

list

flutter

dart

flutter-animatedlist