Flutter(Dart):渲染引起的异常/A RenderFlex溢出 [英] Flutter (Dart): Exceptions caused by rendering / A RenderFlex overflowed
问题描述
我遇到了 Flutter (Dart) RenderFlex 溢出像素的问题.渲染库异常.
I have a problem with Flutter (Dart) RenderFlex overflowed pixels. An exception of rendering library.
我如何管理或应用滚动功能到我的应用页面视图并避免 Flutter 的渲染异常，并显示如下消息:
How can I manage or apply scrolling ability to my app page view and avoid Flutter's rendering exceptions with messages like:
RenderFlex 在底部溢出了 28 个像素.
A RenderFlex overflowed by 28 pixels on the bottom.
如果你需要完整的日志来帮助我，这里是:
if you by any chance need the full log to help me is here:
在热重载时，它会根据消息在底部显示黄色/黑色条纹.
on the hot-reload it comes up with the yellow/black stripes at the bottom as per the message.
这是我可以使用可滚动小部件管理的东西吗?或者我可以另外声明我的小部件以控制它?
Is this something I can manage with a scrollable widget? Or I can declare otherwise my widgets in order to control it?
如果需要完整代码(我更改了文本数据，但假设出现的文本比屏幕尺寸长，因此出现错误):
full code if needed (i changed the Text data but assume the texts appearing are longer than the screen size, and thus the error comes up):
@override
Widget build(BuildContext context) {
return new DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new AppBar(
bottom: new TabBar(
tabs: [
new Tab(text: "xxx",),
new Tab(text: "xxx",),
new Tab(text: "xxx",),
],
),
title: new Text(data["xxx"]),
),
body: new TabBarView(
children: [
new Column(
children: <Widget>[
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.blue,
fontSize: 16.0
),),
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.blue,
fontSize: 10.0
),),
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.blue,
fontSize: 16.0
),),
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.blue,
fontSize: 8.0
),
),
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.blue,
fontSize: 8.0
),),
new Row(
children: <Widget>[
new Expanded(
child: new Text("xxx"),
),
new Expanded(
child: new Icon(Icons.file_download, color: Colors.green, size: 30.0,),
),
],
),
new Divider(),
new Text("xxx",
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.red,
fontSize: 16.0
),
),
],
),
new ListView.builder(
itemBuilder: (BuildContext context, int index) => new EntryItem(_lstTiles[index]),
itemCount: _lstTiles.length,
),
new Column(
children: <Widget>[
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.green[900],
fontSize: 16.0
),
),
new Text(data["xxx"],
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.green[900],
fontSize: 16.0
),),
new Text(data["xxx"]),
new ListTile(title: new Text("xxx")),
new Text(data["xxx"]),
new ListTile(title: new Text("xxx")),
new Divider(),
new Text("xxx",
style: new TextStyle(
fontStyle: FontStyle.italic,
color: Colors.red,
fontSize: 16.0
),
),
],
),
],
),
),
);
}
推荐答案
这是一个非常常见的问题，尤其是当您开始在多个设备和方向上测试您的应用程序时.Flutter 的小部件库中有一个部分涵盖了各种滚动小部件:
This is a pretty common issue to run into, especially when you start testing your app on multiple devices and orientations. Flutter's Widget gallery has a section covering the various scrolling widgets:
https://flutter.io/widgets/scrolling/
我建议您将整个内容包装在 SingleChildScrollView，或使用滚动ListView.
I'd recommend either wrapping your entire content in a SingleChildScrollView, or using a scrolling ListView.
这个问题和答案已经引起了一些注意，所以我想为那些登陆这里的人提供更多帮助.
This question and answer have gotten some notice, so I'd like to provide a little more help for those who land here.
Flutter SDK 团队在 SDK 代码本身的良好文档方面投入了大量精力.理解Flex 小部件(Row 和Column 都是Flex 的子类)算法的最佳资源之一用来布置他们的孩子的是伴随课程本身的 DartDoc:
The Flutter SDK team puts a lot of effort into good documentation within the SDK code itself. One of the best resources for understanding the algorithm that Flex widgets (Row and Column are both subclasses of Flex) use to lay out their children is the DartDoc that accompanies the class itself:
Flutter 网站还包含一个关于构建布局的教程和一个交互式 codelab 关于如何使用 Row 和 Column小部件.
The Flutter website also contains a tutorial on building layouts and an interactive codelab about how to use Row and Column widgets.
这篇关于Flutter(Dart):渲染引起的异常/A RenderFlex溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
