AnimatedContainer在设置其高度动画时引发错误

Question

我正在尝试一个卡片列表，其中包含ListTile和AnimatedContainer(包含动态列表(，当用户单击ListTile时，该列表将展开。

列表最初是这样的：初始

当用户单击其中一个时，它将展开动画容器，如下所示：扩展

但是，在动画过程中，会发生以下情况：错误演示

这是上面gif中的错误消息：错误消息

该错误持续的时间与我为AnimatedContainer设置的持续时间一样长。我可以通过简单地在AnimatedContainer上声明静态高度来解决这个问题，但是，我需要AnimatedContainer具有动态高度，这取决于ListView中的项目数量。

以下是我的代码片段，如有任何帮助，我们将不胜感激。

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:shop_shop/providers/orders_provider.dart';
class OrdersScreen extends StatelessWidget {
static const routeName = 'order';
@override
Widget build(BuildContext context) {
final ordersProvider = Provider.of<OrdersProvider>(context);
final List<OrderItem> orderList = ordersProvider.orderList;
return Scaffold(
appBar: AppBar(
title: Text('Order History'),
),
body: Column(
children: [
Expanded(
child: ListView.builder(
itemBuilder: (ctx, i) {
OrderItem order = orderList[i];
return OrderCard(order: order);
},
itemCount: orderList.length,
),
),
],
),
);
}
}
class OrderCard extends StatefulWidget {
final OrderItem order;
const OrderCard({required this.order});
@override
State<OrderCard> createState() => _OrderCardState();
}
class _OrderCardState extends State<OrderCard> {
bool isExpanded = false;
@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: [
ListTile(
subtitle: Text(
'$${widget.order.totalPrice.toStringAsFixed(2)}',
),
title: Text(
DateFormat.yMMMMEEEEd().format(widget.order.orderDate),
),
onTap: () {
setState(() {
isExpanded = !isExpanded;
});
},
),
AnimatedContainer(
duration: Duration(milliseconds: 500),
curve: Curves.easeOutBack,
padding: EdgeInsets.only(top: 10, right: 15, left: 15, bottom: 12),
height: isExpanded ? null : 0,
width: double.infinity,
color: Colors.grey[300],
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (ctx, i) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(widget.order.orderList[i].title),
Text('x${widget.order.orderList[i].quantity}'),
Text(widget.order.orderList[i].price.toStringAsFixed(2)),
],
),
itemCount: widget.order.orderList.length,
),
),
],
),
);
}
}

Answer 1

删除AnimatedContainer内的行width: double.infinity,。它应该在不定义的情况下自动扩展。

AnimatedContainer具有有限的宽度，并尝试将动画设置为无限的宽度。这就是你出错的原因。但在那之后，父对象将无限宽度限制为有限宽度，并且误差消失。

Answer 2

我找到了一个变通的解决方案，可以根据列表的长度手动计算高度，这样我就不需要shrinkWrap了(请参阅AnimatedContainer中的属性height(：

AnimatedContainer(
duration: Duration(milliseconds: 300),
curve: Curves.linearToEaseOut,
padding: EdgeInsets.only(top: 10, right: 15, left: 15, bottom: 10),
height: isExpanded
? widget.order.orderList.length * 17.5 + 20 // <==== dynamic height
: 0,
width: double.infinity,
color: Colors.grey[300],
child: ListView.builder(
itemBuilder: (ctx, i) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(widget.order.orderList[i].title),
Text('x${widget.order.orderList[i].quantity}'),
Text(widget.order.orderList[i].price.toStringAsFixed(2)),
],
),
itemCount: widget.order.orderList.length,
),
),

如果你找到了更合适的方法，请随时发布另一个答案，谢谢！