我的Flutter(Dart)RenderFlex像素溢出了。 渲染库的例外。
如何管理或应用滚动功能到我的应用页面视图,并避免Flutter出现诸如以下消息的渲染异常:
RenderFlex在底部溢出了28个像素。
如果您有任何需要完整的日志来帮助我的信息,请在这里:
在热重装时,它会根据消息在底部显示黄色/黑色条纹。
我可以使用可滚动的小部件来管理吗?或者我可以声明其他方式来控制它?
如果需要的话,提供完整代码(我更改了文本数据,但假定出现的文本长于屏幕尺寸,因此出现错误):
@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:
https://flutter.io/widgets/scrolling/
我建议您将全部内容包装在中SingleChildScrollView,或使用滚动条ListView。
SingleChildScrollView
ListView
编辑:这个问题和答案已经得到一些注意,所以我想为那些登陆这里的人提供更多帮助。
Flutter SDK团队将大量精力投入到SDK代码本身内的良好文档中。一个用于理解算法最好的资源是Flex小部件(Row和Column是两个子类Flex)使用,以奠定了他们的孩子是伴随着阶级本身DartDoc:
https://github.com/flutter/flutter/blob/e3005e6962cfefbc12e7aac56576597177cc966f/packages/flutter/lib/src/widgets/basic.dart#L3724
Flutter网站还包含有关建筑布局的教程以及 有关如何使用和小部件的交互式代码实验室。 RowColumn