问题描述
我正在使用一个动画容器来在按下按钮时显示一个 listView.builder()。这是一个简单的子列表来显示,但问题是我不知道 ListView 构建器的高度传递给动画容器高度约束。有没有办法动态获取列表视图构建器的高度或任何其他方法来实现这一点?
我需要什么?
像这样:https://getbootstrap.com/docs/4.0/components/collapse/
AnimatedContainer(
duration: Duration(milliseconds: 200),curve: Curves.easeIn,height: _expanded ? 150 : 0,// This height I cannot set here explicitly. I need to set dynamically like,get child's height
child: ListView.builder(
key: listViewKey,shrinkWrap: true,scrollDirection: Axis.vertical,physics: const NeverScrollableScrollPhysics(),itemCount: loadedSubCategories.length,itemBuilder: (ctx,i) => ChangeNotifierProvider.value(
value: loadedSubCategories[i],child: SubCategoryItem(loadedSubCategories[i].categoryId,loadedSubCategories[i].subCategoryId)),),
当我使用普通的 Container() 时,我不会设置 height:
属性以便它自动获取孩子的高度,但我需要高度,因为我想以动画方式扩展子类别。
SubCategories 的每个元素具有不同的高度和 Subcategories 的数量也是未知的。所以用 subcategories.length
计算高度也是不可能的。
非常感谢任何建议,谢谢
解决方法
使用 Curves.fastLinearToSlowEaseIn 和 SizeBox.shrink 来实现您的要求
@override
Widget build(BuildContext context) {
return SafeArea(
bottom: true,top: false,child: Scaffold(
appBar: AppBar(
title: Text('Container'),),body: Column(
children: [
Center(
child: FlatButton(
onPressed: () {
setState(() {
_expanded = true;
});
},child: Text('expand')),AnimatedContainer(
duration: Duration(seconds: 2),curve: Curves.fastLinearToSlowEaseIn,height: _expanded ? 150 : 0,clipBehavior: Clip.antiAlias,decoration: BoxDecoration(
color: Colors.white
),child: _expanded ? ListView.builder(
shrinkWrap: true,scrollDirection: Axis.vertical,physics: const NeverScrollableScrollPhysics(),itemCount: 3,itemBuilder: (ctx,i) {
return ListTile(
title: Text(i.toString()),);
}) : SizedBox.shrink(),],)
),);
}