像这样-RenderFlex底部溢出了11个像素

Question

import 'package:flutter/material.dart';
import 'package:http_demo/models/product.dart';
class ProductListRowWidget extends StatelessWidget{
Product product;
ProductListRowWidget(this.product);

@override
Widget build(BuildContext context) {
return buildProductItemCard(context);
}
Widget buildProductItemCard(BuildContext context) {
return InkWell(
child: Card(
child: Column(
children: <Widget>[
Container(
child: Image.network("https://cdn.pixabay.com/photo/2022/03/02/13/42/peace-7043225_960_720.jpg"),
height: 125.0,
width: MediaQuery.of(context).size.width/2,
),
Text(product.productName,style: TextStyle(color: Colors.black,fontSize: 13.0), textAlign: TextAlign.center,),
Text(product.unitPrice.toString(), style: TextStyle(fontSize: 15.0,color: Colors.grey,),textAlign: TextAlign.center,)
],
),
),
);
}
}

---

渲染库捕获到异常=====================================================布局过程中引发了以下断言：RenderFlex底部溢出11个像素

导致错误的相关小部件是：列列：file:///C:/Users/musta/AndroidStudioProjects/http_demo/lib/widgets/product_list_row.dart:18:16溢出的RenderFlex的方向为Axis.vertical。渲染中已使用黄色和黑色条纹图案标记溢出的RenderFlex边缘。这通常是因为内容对于RenderFlex来说太大。

在此处输入图像描述

Answer 1

列展开以填充最大垂直空间。您可以通过向列中添加mainAxisSize:mainAxisSize.min 来修复这种行为

InkWell(
child: Card(
child: Column(
mainAxisSize:MainAxisSize.min,
children: <Widget>[
Container(
child: Image.network(
"https://cdn.pixabay.com/photo/2022/03/02/13/42/peace-7043225_960_720.jpg"),
height: 125.0,
width: MediaQuery
.of(context)
.size
.width / 2,
),
Text(product.productName,style: TextStyle(color: Colors.black,fontSize: 13.0), textAlign: TextAlign.center,),
Text(product.unitPrice.toString(), style: TextStyle(fontSize: 15.0,color: Colors.grey,),textAlign: TextAlign.center,)
],
),
),
));