动画容器:RenderFlex 底部溢出 154 像素 [英] Animated container : RenderFlex overflowed by 154 pixels on the bottom

问题描述

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

I have a problem when resizing an animated container while setting different content height.

调整大小时抛出异常:

════════ 渲染库捕获的异常════════

════════ Exception caught by rendering library ════════

在布局期间抛出了以下断言:

The following assertion was thrown during layout:

一个 RenderFlex 在底部溢出了 154 个像素.

A RenderFlex overflowed by 154 pixels on the bottom.

这是一个重现问题的最小示例(在我的真实应用中要复杂得多，但你明白了):

Here is a minimal example to reproduce the problem (much more complex in my real app but you get the point) :

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 expanded
                    ? 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))
        ],
      ),
    ),
  );
}

在两种模式下(扩展或不扩展)，内容都适合容器(没有溢出)，问题只在调整大小时出现.

In both mode (expanded or not), the content fits the container (no overflow), problem appears only during resizing.

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

Of course problem does not happen with a basic container without animation.

我该如何处理?

推荐答案

发生这种情况是因为您检查了是否展开，然后在容器达到最终大小之前立即返回容器

This happening because you check for expanded and then immediately return the containers before the container takes its final size

一种解决方法将使用 NeverScrollableScrollPhysics() 用 ListView 更改更大的列

A workaround will be to change the bigger column with a ListView with NeverScrollableScrollPhysics()

你甚至不需要再检查展开了，你会得到正确的动画

you don't even need to check for expanded any more and you will get the correct animation

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

这篇关于动画容器:RenderFlex 底部溢出 154 像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！