Flutter小坑

Column或Row嵌套ListView或GridView#

LinearLayout是在Android原生开发中很常见的布局控件，在Flutter中我们可以使用Column代替纵向的线性布局，用Row代替横向的线性布局。

但是一旦我们的布局中有ListView或GridView，就可能会报如下的错误：

RenderBox was not laid out: RenderRepaintBoundary#d0a84 relayoutBoundary=up2 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'

意思是说，我们的ListView和GridView并没有一个明确的大小，Flutter不知道该如何在Column或Row中绘制它。

解决#

在ListView或GridView外面加一个Container来指定明确大小，或用Expanded让空间具有弹性空间，这个Expanded类似原生安卓LinearLayout的android:layout_weight属性，具体请查阅官方API。

// Old
@override
Widget build(BuildContext context) {
    return Column(
        children: [
            GridView.count(
            // ...
            )
        ]
    );
}

// New
@override
Widget build(BuildContext context) {
    return Column(
        children: [
            Expanded(child:GridView.count(
            // ...
            ))
        ]
    );
}