底部溢出 112 像素的 RenderFlex

Question

我正在使用 AnimatedContainer。它的动画大小从 0 到某个大小，它包含一些文本和所有其他内容。按下一个按钮动画开始，它显示流动错误。

在按下按钮时，我只是设置了 sizeOfLevel 的值。它的初始值为 0.

代码：

 AnimatedContainer(
        curve: Curves.bounceIn,
        duration: Duration(milliseconds: 200),
        width: sizeOfLevel,
        height: sizeOfLevel,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(8.0)),
            image: DecorationImage(
                image: AssetImage('images/levelunlockScreen.jpg'),
                fit: BoxFit.cover),
            border: Border.all(
                style: BorderStyle.solid, width: 4.0, color: Colors.white)),
        child: Column(
          children: <Widget>[

            Center(
              child: new Text(
                "Unlock Level",
                style: TextStyle(color: Colors.white, fontSize: 30.0),
              ),
            ),

          ],
        ),
      ),

错误：

  I/flutter ( 4579): The following message was thrown during layout:
  I/flutter ( 4579): A RenderFlex overflowed by 112 pixels on the bottom.
  I/flutter ( 4579): The overflowing RenderFlex has an orientation of Axis.vertical.
  I/flutter ( 4579): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
  I/flutter ( 4579): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
  I/flutter ( 4579): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
  I/flutter ( 4579): RenderFlex to fit within the available space instead of being sized to their natural size.
  I/flutter ( 4579): This is considered an error condition because it indicates that there is content that cannot be
  I/flutter ( 4579): seen. If the content is legitimately bigger than the available space, consider clipping it with a
  I/flutter ( 4579): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
      I/flutter ( 4579): like a ListView.
  I/flutter ( 4579): The specific RenderFlex in question is:
  I/flutter ( 4579):   RenderFlex#4086c OVERFLOWING
  I/flutter ( 4579):   creator: Column ← Padding ← DecoratedBox ← ConstrainedBox ← Container ← AnimatedContainer ← Center
  I/flutter ( 4579):   ← Stack ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder
  I/flutter ( 4579):   ← ⋯
  I/flutter ( 4579):   parentData: offset=Offset(4.0, 4.0) (can use size)
  I/flutter ( 4579):   constraints: BoxConstraints(w=115.7, h=115.7)
  I/flutter ( 4579):   size: Size(115.7, 115.7)
  I/flutter ( 4579):   direction: vertical
  I/flutter ( 4579):   mainAxisAlignment: start
  I/flutter ( 4579):   mainAxisSize: max
  I/flutter ( 4579):   crossAxisAlignment: center
  I/flutter ( 4579):   verticalDirection: down

Answer 1

“将您的父列变形为 - SingleChildScrollView”对我有用，我正在为 AnimatedContainer 的高度设置动画。

旧代码

return new AnimatedContainer(
  curve: Curves.easeInOutCubic,
  height: showSearchBar ? 350 : 0,
  duration: new Duration(seconds: 3),
  child: Container(
    margin: EdgeInsets.all(10),
    child: Card(
      child: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: [
              Text('Busque por pacientes'),
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
                child: Column(
                  children: this.children,
                ),
              ),
              RaisedButton(
                color: themeSecondary,
                onPressed: () {
                  print('raised clicked');
                },
                child: Text('Buscar'),
              )
            ]),
      ),
    ),
  ),
);

以及更新的 SingleChildScrollView

return new AnimatedContainer(
  curve: Curves.easeInOutCubic,
  height: showSearchBar ? 350 : 0,
  duration: new Duration(seconds: 3),
  child: Container(
    margin: EdgeInsets.all(10),
    child: Card(
      child: Padding(
        padding: EdgeInsets.all(20),
        child: SingleChildScrollView(
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: [
                Text('Busque por pacientes'),
                Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 0, vertical: 20),
                  child: Column(
                    children: this.children,
                  ),
                ),
                RaisedButton(
                  color: themeSecondary,
                  onPressed: () {
                    print('raised clicked');
                  },
                  child: Text('Buscar'),
                )
              ]),
        ),
      ),
    ),
  ),
);

底部溢出 112 像素的 RenderFlex

A RenderFlex overflowed by 112 pixels on the bottom

flutter

flutter-layout

flutter-animation