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: [
                  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: [
                    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所以学习问题有点多，如果是前端的话感觉会好很多啊。

有问题欢迎纠正，谢谢啦

如果对你有帮助就点个赞把。