Flutter 动画容器：底部的RenderFlex溢出154像素

我在设置不同内容高度时调整动画容器的大小时遇到问题

它在调整大小时引发异常：

════════ 呈现库捕获到异常════════

布局期间引发了以下断言：

底部的RenderFlex溢出了154个像素

下面是一个再现问题的最小示例（在我的真实应用程序中要复杂得多，但你明白了要点）：

bool扩展；
initState（）{
super.initState（）；
扩展=假；
}
void _toggleMode（）{
设置状态（）{
扩展=！扩展；
});
}
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：文本（“测试”）），
主体：动画容器(
高度：展开？230:70，
持续时间：持续时间（毫秒：800），
子：列(
儿童：[
扩大(
子项：PageView.builder(
itemBuilder：（上下文、位置）{
扩大回报
？立柱(
儿童：[
容器（高度：40，颜色：颜色。蓝色），
容器（高度：40，颜色：Colors.blue[400]），
容器（高度：40，颜色：Colors.blue[300]），
容器（高度：40，颜色：Colors.blue[200]），
容器（高度：40，颜色：Colors.blue[100]），
],
)
：列(
儿童：[
容器（高度：40，颜色：颜色。蓝色），
],
);
},
),
),
InkWell（onTap:_切换模式，子项：扩展？图标（图标。键盘箭头向上）：图标（图标。键盘箭头向下））
],
),
),
);
}

在两种模式下（扩展或不扩展），内容都适合容器（无溢出），问题仅在调整大小时出现

当然，没有动画的基本容器不会出现问题

---

如何处理此问题？

之所以发生此情况，是因为您检查是否已展开，然后在容器达到最终尺寸之前立即返回容器

一个解决办法是使用

NeverScrollableScrollPhysics（）

编辑：您甚至不需要再检查是否已展开，您将获得正确的动画

 bool expanded;

  initState() {
    super.initState();
    expanded = false;
  }

  void _toggleMode() {
    setState(() {
      expanded = !expanded;
    });
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Test")),
      body: AnimatedContainer(
        height: expanded ? 230 : 70,
        duration: Duration(milliseconds: 800),
        child: Column(
          children: <Widget>[
            Expanded(
              child: PageView.builder(
                itemBuilder: (context, position) {
                  return ListView(
                    physics: NeverScrollableScrollPhysics(),
                        children: <Widget>[
                    Column(
                      children: <Widget>[
                          Container(height: 40, color: Colors.blue),
                          Container(height: 40, color: Colors.blue[400]),
                          Container(height: 40, color: Colors.blue[300]),
                          Container(height: 40, color: Colors.blue[200]),
                          Container(height: 40, color: Colors.blue[100]),
                      ],
                    ),
                  ],
                      );
//                      : Column(
//                    children: <Widget>[
//                      Container(height: 40, color: Colors.blue),
//                    ],
//                  );
                },
              ),
            ),
            InkWell(onTap: _toggleMode, child: expanded ? Icon(Icons.keyboard_arrow_up) : Icon(Icons.keyboard_arrow_down))
          ],
        ),
      ),
    );
  }

bool扩展；
initState（）{
super.initState（）；
扩展=假；
}
void _toggleMode（）{
设置状态（）{
扩展=！扩展；
});
}
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：文本（“测试”）），
主体：动画容器(
高度：展开？230:70，
持续时间：持续时间（毫秒：800），
子：列(
儿童：[
扩大(
子项：PageView.builder(
itemBuilder：（上下文、位置）{
返回列表视图(
物理学：NeverscrollableScroll物理学（），
儿童：[
纵队(
儿童：[
容器（高度：40，颜色：颜色。蓝色），
容器（高度：40，颜色：Colors.blue[400]），
容器（高度：40，颜色：Colors.blue[300]），
容器（高度：40，颜色：Colors.blue[200]），
容器（高度：40，颜色：Colors.blue[100]），
],
),
],
);
//：列(
//儿童：[
//容器（高度：40，颜色：颜色。蓝色），
//                    ],
//                  );
},
),
),
InkWell（onTap:_切换模式，子项：扩展？图标（图标。键盘箭头向上）：图标（图标。键盘箭头向下））
],
),
),
);
}

---

谢谢，好把戏！正如你所说，这是一个解决办法，但它确实起到了作用。事实上，我并不是只有两个状态（扩展或不扩展），而是有多个不同高度的内容，所以我必须将我的开关/外壳提取到一个函数中，然后按照您的建议用一个不可滚动的可滚动小部件包装它：D。我使用了一个

SingleChildScrollView

而不是

ListView

，我想这可能比较省钱。工作起来很有魅力。