Flutter(Dart):渲染引起的异常/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 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的Widget画廊有一个部分介绍了各种滚动Widget:
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网站上还包含有关建筑布局的教程和Row和Column小部件的"https://flutter.dev/docs/codelabs/layout-basics" rel ="noreferrer">交互式代码实验室.
The Flutter website also contains a tutorial on building layouts and an interactive codelab about how to use Row and Column widgets.
这篇关于Flutter(Dart):渲染引起的异常/RenderFlex溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
