Flutter 学习笔记:A RenderFlex overflowed by 48 pixels on the right
问题产生
最近学习Flutter的过程中遇到一个问题A RenderFlex overflowed by 48 pixels on the right.,就是显示的内容跑到屏幕外了,看不到了,如下图:
####解决思路
查看报错信息,只是截取了关键的一段,如下:
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
我的代码是使用column来显示两个text,不过text的长度不固定的一段文字,代码如下所示:
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(x == 0
? "ONE STORY"
: x == 1
? "Ba As One"
: getTitle(int.parse(root[x].content_type))),
new Text(root[x].title.toString(),
softWrap: true, maxLines: 2),
],
),
结合上面的报错信息,建议我们使用Expanded来包裹一下children来解决这个问题,我们如下处理代码将上面的代码块放到Expanded进行一层包裹,问题解决。
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(x == 0
? "ONE STORY"
: x == 1
? "Ba As One"
: getTitle(int.parse(root[x].content_type))),
new Text(root[x].title.toString(),
softWrap: true, maxLines: 2),
],
),
)
结束了啊
由于本人是Android开发,所以Flutter所以学习问题有点多,如果是前端的话感觉会好很多啊。