Question

我有一个网格布局，网格元素基本上是：牌有两件事：

图片
文字

但是图像是通过Internet加载的，因此有时它会超出网格项目框，并且此框不会更改高度，我要的是图像应为固定大小。

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

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

使用容器，并且在容器内部将图像的宽度和高度声明为你要。

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项目溢出抖动

2 个答案: