动态混合高度 Flutter 的动画容器

Question

当按下按钮时，我正在使用 animatedContainer 来显示 listView.builder()。这是一个简单的子列表来显示，但问题是我不知道 ListView 构建器的高度传递给 animatedContainer 高度约束。有没有办法动态获取列表视图构建器的高度或任何其他方法来实现这一点？

我需要什么？

• 动画容器需要高度，但我不知道高度 列表视图生成器。
• 当我使用普通容器时，我没有设置height: 属性，所以 它会自动环绕孩子

类似这样的：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计算高度也是不可能的。

非常感谢任何建议，谢谢

Answer 1

您可以使用 AnimatedSize 小部件实现您想要的。

它会自动创建一个小部件，该小部件会自行设置动画以匹配其子尺寸，您无需为其提供任何高度或宽度。 你只需要用它包装你的小部件

AnimatedSize(
            curve: Curves.fastOutSlowIn,
            duration: Duration(milliseconds: 300),
            vsync: this,
            child: Container()
)

您可以查看at 了解更多信息。

Answer 2

使用 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(),
          ),
        ],
      )
    ),
  );
}