Flutter 异常 “Another exception was thrown: A RenderFlex overflowed by 2.5 pixels on the bottom.” 解决办法

异常信息

在使用 GridView 展示商品列表时程序抛出一下异常：

flutter: Another exception was thrown: A RenderFlex overflowed by 2.5 pixels on the bottom.

并且在程序的页面上也同样无法正常显示：

相关的代码如下：

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Widget _getData(context, index) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          width: 1,
          color: BoxLineColor,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Image.network(
            hPageData[index]['imageUrl'],
            fit: BoxFit.cover,
          ),
          // SizedBox(
          //   height: 5,
          // ),
          Text(
            hPageData[index]['pName'],
            style: TextStyle(
              fontSize: 14,
            ),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
          // SizedBox(
          //   height: 5,
          // ),
          Text(
            '￥${hPageData[index]['price']}',
            style: TextStyle(
              fontSize: 18,
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10),
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
        itemCount: hPageData.length,
        itemBuilder: this._getData,
      ),
    );
  }
}

异常原因及解决方法

经过尝试此问题的原因是因为 SizedBox 值设置的大小超过了外层widget的高度。相关代码：

SizedBox(height: 5),

根据异常可看出超过了2.5 pixels（像素），那么将 SizedBox 的值变小即可

解决：

减小或者去掉 SizedBox 设置即可。