修复错误 Bottom OverFlowed By in flutter

Question

我正在做一个 flutter 项目，已经好几个小时没解决这个错误了。我制作了一个 GridView，其中的标题在卡片之外，但出现此错误。我不能将高度设置为高于 56。我想让它们看起来像正方形。非常感谢任何帮助。

这是我的代码：

Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        InkWell(
          onTap: () {
            setState(() {
              isLoading = true;
            });
            _splitScreen2(index);
          },
        child: Card(
          elevation: 18.0,
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0))),
    child: Expanded(
          child: Image.asset(
            img,
            alignment: Alignment.center,
            fit: BoxFit.cover,
           
          ),
    ),
          margin: EdgeInsets.all(8.0),
        ),
    ),
        Text(
          title,
          style: TextStyle(fontSize: 12.0,),
        )
      ],
    );

Answer 1

之前（您的代码）

Container(
      // height: 150,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          InkWell(
            onTap: () {
              // setState(() {
              //   isLoading = true;
              // });
              // _splitScreen2(index);
            },
            child: Card(
              elevation: 18.0,
              shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10.0))),
              child: Expanded(
                child: Image.Network(
                  data["Image"],
                  alignment: Alignment.center,
                  fit: BoxFit.cover,

                ),
              ),
              margin: EdgeInsets.all(8.0),
            ),
          ),
          Text(
            data["name"],
            style: TextStyle(fontSize: 12.0,),
          )
        ],
      ),
    );

之后

Container(
      // height: 150,
      child: InkWell(
        onTap: () {
          // setState(() {
          //   isLoading = true;
          // });
          // _splitScreen2(index);
        },
        child: Card(
          child: Column(
            children: [
              Expanded(
                child: Container(
                  child: Image.network(
                    data["Image"],
                    alignment: Alignment.center,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Text(
                data["Name"],
                style: TextStyle(
                  fontSize: 12.0,
                ),
              )
            ],
          ),
        ),
      ),
    );

将 Column 视为 Card

的子窗口小部件

class ItemWidget extends StatelessWidget {
  var data;

  ItemWidget(this.data, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var column = Column(
      children: [
        Expanded(
          child: Container(
            // height: 125,
            child: Image.network(
              data["Image"],
              alignment: Alignment.center,
              fit: BoxFit.cover,
            ),
          ),
        ),
        Center(
            child: Text(
          data["Name"],
          style: TextStyle(fontSize: 12),
        ))
      ],
    );
    var column2 = InkWell(
      onTap: () {
        // setState(() {
        //   isLoading = true;
        // });
        // _splitScreen2(index);
      },
      child: Column(
        children: [
          Expanded(
            child: Container(
              child: Image.network(
                data["Image"],
                alignment: Alignment.center,
                fit: BoxFit.cover,
              ),
            ),
          ),
          Text(
            data["Name"],
            style: TextStyle(
              fontSize: 12.0,
            ),
          )
        ],
      ),
    );
    return Container(
      // height: 150,
      child: InkWell(
        onTap: () {
          // setState(() {
          //   isLoading = true;
          // });
          // _splitScreen2(index);
        },
        child: Card(
          child: Column(
            children: [
              Expanded(
                child: Container(
                  child: Image.network(
                    data["Image"],
                    alignment: Alignment.center,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Text(
                data["Name"],
                style: TextStyle(
                  fontSize: 12.0,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

修复错误 Bottom OverFlowed By in flutter

Fixing error Bottom OverFlowed By in flutter

android

gridview

dart

flutter