异常信息
在使用 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 设置即可。