如何“RenderFlex 底部溢出 61 像素”。位于 Android 虚拟键盘的顶部

Question

这是用户界面。下面是 main.dart 文件和错误消息\n\n我在 Flutter 应用程序中使用文本字段，它在虚拟键盘顶部给出了渲染弯曲错误。请检查下面的代码。\n在底部我添加了错误消息。\n之前我尝试了所有其他方法来解决该问题，但我不同意

\n

import \'package:flutter/material.dart\';\nimport \'./transaction.dart\';\nimport \'package:intl/intl.dart\';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: \'Expenses Tracker\',\n      home: MyHomePage(),\n    );\n  }\n}\n\nclass MyHomePage extends StatelessWidget {\n  final List<Transaction> transactions = [\n    Transaction(\n      id: \'t1\',\n      title: \'New Shoes\',\n      amount: 87.25,\n      date: DateTime.now(),\n    ),\n    Transaction(\n      id: \'t2\',\n      title: \'Weekly Groceries\',\n      amount: 83.25,\n      date: DateTime.now(),\n    ),\n  ];\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(\'Expenses Tracker\'),\n      ),\n      body: Column(\n        children: <Widget>[\n          Container(\n            width: double.infinity,\n            child: Card(\n              child: Text("Chart!"),\n              color: Colors.deepOrange,\n              elevation: 9,\n            ),\n          ),\n          Card(\n            elevation: 5,\n            child: Container(\n              padding: EdgeInsets.all(10),\n              child: Column(\n                children: <Widget>[\n                  TextField(\n                    decoration: InputDecoration(labelText: \'Title\'),\n                  ),\n                  TextField(\n                    decoration: InputDecoration(labelText: \'Amount\'),\n                  ),\n                ],\n              ),\n            ),\n          ),\n          Column(\n            children: transactions.map((tx) {\n              return Card(\n                child: Row(\n                  children: <Widget>[\n                    Container(\n                      margin: EdgeInsets.symmetric(\n                        vertical: 10,\n                        horizontal: 15,\n                      ),\n                      decoration: BoxDecoration(\n                        border: Border.all(\n                          color: Colors.purple,\n                          width: 3,\n                        ),\n                      ),\n                      padding: EdgeInsets.all(10),\n                      child: Text(\n                        \'\\$ ${tx.amount}\',\n                        style: TextStyle(\n                          fontWeight: FontWeight.bold,\n                          fontSize: 20,\n                          color: Colors.purple,\n                        ),\n                      ),\n                    ),\n                    Column(\n                      crossAxisAlignment: CrossAxisAlignment.start,\n                      children: <Widget>[\n                        Text(\n                          tx.title,\n                          style: TextStyle(\n                            fontWeight: FontWeight.bold,\n                            fontSize: 18,\n                          ),\n                        ),\n                        Text(\n                          DateFormat.yMMMEd().format(tx.date),\n                          style: TextStyle(color: Colors.grey, fontSize: 14),\n                        ),\n                      ],\n                    ),\n                  ],\n                ),\n              );\n            }).toList(),\n          ),\n        ],\n      ),\n    );\n  }\n}\n\n\n

\n

下面是错误。

\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\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 61 pixels on the bottom.\nThe relevant error-causing widget was:\n  Column \nlib\\main.dart:41\nThe overflowing RenderFlex has an orientation of Axis.vertical.\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#0559b relayoutBoundary=up1 OVERFLOWING:\n  needs compositing\n  creator: Column \xe2\x86\x90 _BodyBuilder \xe2\x86\x90 MediaQuery \xe2\x86\x90 LayoutId-[<_ScaffoldSlot.body>] \xe2\x86\x90\n    CustomMultiChildLayout \xe2\x86\x90 AnimatedBuilder \xe2\x86\x90 DefaultTextStyle \xe2\x86\x90 AnimatedDefaultTextStyle \xe2\x86\x90\n    _InkFeatures-[GlobalKey#39d3c ink renderer] \xe2\x86\x90 NotificationListener<LayoutChangedNotification> \xe2\x86\x90\n    PhysicalModel \xe2\x86\x90 AnimatedPhysicalModel \xe2\x86\x90 \xe2\x8b\xaf\n  parentData: offset=Offset(0.0, 80.0); id=_ScaffoldSlot.body (can use size)\n  constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=263.0)\n  size: Size(360.0, 263.0)\n  direction: vertical\nmainAxisAlignment: start\n  mainAxisSize: max\n  crossAxisAlignment: center\n  verticalDirection: down\n\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

Answer 1

\n
1. 一个快速的解决方案是阻止内部的小部件Scaffold在键盘打开时调整自身大小，但这样，
\n

\n

\n

一些小部件可以obscured通过键盘操作

\n

\n

我们可以使用小部件resizeToAvoidBottomInset上的属性来做到这一点Scaffold。

\n

例子：

\n

 return Scaffold(\n      resizeToAvoidBottomInset: false,   //new line\n      appBar: AppBar(\n        title: Text(\'Expenses Tracker\'),\n      ),\n      body: Column(\n          children: <Widget>[\n            ...... // other widgets \n          ],\n      ),\n    );\n

\n\n

\n
2. 另一种解决方案是将Column小部件包装成可滚动小部件。提供的一个运行良好的内置小部件Flutter是SingleChildScrollView. \xe2\x80\x9cBottom overflowed\xe2\x80\x9d这是避免键盘打开时出现错误的最佳解决方案。
\n

\n

 return Scaffold(\n      appBar: AppBar(\n        title: Text(\'Expenses Tracker\'),\n      ),\n      body: SingleChildScrollView( // wrap with a scrollable widget\n        child: Column(\n          children: <Widget>[\n            ...... // other widgets \n          ],\n        ),\n      ),\n    );\n

\n