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

使用 Container 和 Inside a container 将图像的宽度和高度声明为你要。

new Container(
    width: 60.0
    height: 60.0,
    decoration: new BoxDecoration(
      image: new DecorationImage(
      image:Image.network("https://i.ibb.co/Vv6cPj4/404.png",),
      //repeat: ImageRepeat.repeat,
    ),
   ),
 )

希望对您有所帮助。

Answer 2

您需要包装图像小部件 - Image.network 和 Expanded 并添加 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"),
              ),
            ),
          ],
        ),
      ),
    );
  }

输出：

GridLayout 项目溢出颤振

GridLayout Item Overflow flutter

flutter

flutter-layout