Flutter 抽屉测试错误，显示“右侧 RenderFlex 溢出 188 像素”。

Question

我正在为我的应用程序编写一些测试。目前我一直在测试抽屉。在各种尺寸的模拟器上，它运行没有问题（从 240x432 到 1440x2960），但是当我尝试运行简单的测试时，会抛出以下错误：

\n\n

   \xe2\x95\x90\xe2\x95\x90\xe2\x95\xa1 EXCEPTION CAUGHT BY RENDERING LIBRARY \xe2\x95\x9e\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\nThe following assertion was thrown during layout:\nA RenderFlex overflowed by 188 pixels on the right.\n\nThe overflowing RenderFlex has an orientation of Axis.horizontal.\nThe edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and\nblack striped pattern. This is usually caused by the contents being too big for the RenderFlex.\nConsider applying a flex factor (e.g. using an Expanded widget) to force the children of the\nRenderFlex to fit within the available space instead of being sized to their natural size.\nThis is considered an error condition because it indicates that there is content that cannot be\nseen. If the content is legitimately bigger than the available space, consider clipping it with a\nClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,\nlike a ListView.\nThe specific RenderFlex in question is: RenderFlex#1ae2c relayoutBoundary=up17 OVERFLOWING:\n  creator: Row \xe2\x86\x90 Center \xe2\x86\x90 Padding \xe2\x86\x90 Container \xe2\x86\x90 IconTheme \xe2\x86\x90 Builder \xe2\x86\x90 Listener \xe2\x86\x90 _GestureSemantics \xe2\x86\x90\n    RawGestureDetector \xe2\x86\x90 GestureDetector \xe2\x86\x90 Listener \xe2\x86\x90 InkWell \xe2\x86\x90 \xe2\x8b\xaf\n  parentData: offset=Offset(0.0, 0.0) (can use size)\n  constraints: BoxConstraints(0.0<=w<=256.0, 0.0<=h<=Infinity)\n  size: Size(256.0, 24.0)\n  direction: horizontal\n  mainAxisAlignment: start\n  mainAxisSize: min\n  crossAxisAlignment: center\n  textDirection: ltr\n  verticalDirection: down\n\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\xe2\x97\xa2\xe2\x97\xa4\n\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\n

\n\n

在代码中，我将其范围缩小到了一些RaisedButton。当Row内部长度低于一定长度时，错误不会显示。

\n\n

当我注释掉以下代码时，所有测试都可以正常运行。

\n\n

          Padding(\n          padding: EdgeInsets.symmetric(vertical: 32, horizontal: 16),\n          child: Column(\n            children: [\n              FacebookSignInButton(\n                onPressed: _fbLogin,\n              ),\n              GoogleSignInButton(\n                onPressed: _googleLogin,\n              )\n            ],\n            crossAxisAlignment: CrossAxisAlignment.stretch,\n          ))\n

\n\n

将其中的文本（“继续使用 Facebook”、“使用 Google 登录”）更改为较短的文本也可以解决此问题。

\n\n

测试（请注意，我目前只是想避免出错，一旦我弄清楚了，就会添加断言）

\n\n

   testWidgets("Drawer",\n        (WidgetTester tester) async {\n          final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();\n          BuildContext savedContext;\n          await tester.pumpWidget(\n            MaterialApp(\n              home: Builder(\n                builder: (BuildContext context) {\n                  savedContext = context;\n                  return Scaffold(\n                    key: _scaffoldKey,\n                    drawer: HomePageDrawer(),\n                    body: Container(),\n                  );\n                },\n              ),\n            ),\n          );\n          await tester.pump(); // no effect\n          _scaffoldKey.currentState.openDrawer();\n          await tester.pump();\n    });\n

\n

Answer 1

该错误表明 Widget 的大小超出了预期的范围。此问题的解决方案是定义父窗口小部件的尺寸。使用SizedBox或Container应该有助于定义 Widget 的大小。