GridLayout 项目溢出抖动

Question

我有一个网格布局，网格项目基本上是：有两件事的卡片：

• 图像
• 文本

但图像是通过互联网加载的，因此有时它会溢出网格项框，并且该框不会改变高度，我想要的是图像应该具有固定大小。

这是我的代码：（我该怎么做？）

import 'package:flutter/material.dart';
import '../models/dbModel.dart';

class GridLayout extends StatelessWidget {
  final List<DbModel> m;
  var appContext;

  GridLayout(this.m, this.appContext);

  Widget build(context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, crossAxisSpacing: 7.0, mainAxisSpacing: 7.0),
      padding: const EdgeInsets.all(10.0),
      itemBuilder: (context, i) {
        return GridItem(appContext, m[i]);
      },
      itemCount: m.length,
    );
  }
}

class GridItem extends StatelessWidget {
  final appContext;
  final dbModel;

  GridItem(this.appContext, this.dbModel);

  Widget build(context) {
    return GestureDetector(
      onTap: () {},
      child: Card(
        child: Column(
          children: <Widget>[
            dbModel.img == "NOLINK" ? Image.network("https://i.ibb.co/Vv6cPj4/404.png",) : Image.network(dbModel.img),
            Container(
              padding: EdgeInsets.all(10.0),
              child: Text("${dbModel.title}"),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

您需要包装图像小部件 -Image.network使用Expanded& add fit: BoxFit.cover,。

工作代码：

Widget build(context) {
    return GestureDetector(
      onTap: () {},
      child: Card(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch, //add this
          children: <Widget>[
            Expanded(
              child: Image.network(
                "https://i.ibb.co/Vv6cPj4/404.png",
                fit: BoxFit.cover, // add this
              ),
            ),
            Center(
              child: Container(
                padding: EdgeInsets.all(10.0),
                child: Text("Title under"),
              ),
            ),
          ],
        ),
      ),
    );
  }

输出：