1

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

我需要的？

  • 动画容器需要高度，但我不知道 listview builder 的高度。
  • 当我使用普通容器时，我没有设置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也是不可能的。

任何建议都非常感谢，谢谢

4

2 回答 2

8

您可以使用 AnimatedSize 小部件实现您正在寻找的东西。

它会自动创建一个小部件，该小部件会对其进行动画处理以匹配其子大小，并且您无需为其提供任何高度或宽度。你只需要用它包装你的小部件

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

您可以查看更多信息。

于 2021-08-17T19:45:47.143 回答
0

在此处输入图像描述

使用 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(),
          ),
        ],
      )
    ),
  );
}
于 2021-02-08T13:18:14.327 回答