flutter GridLayout项目溢出抖动

0s0u357o 于 2023-06-30 发布在 Flutter

关注(0)|答案(3)|浏览(114)

我有一个gridlayout，其中griditems基本上是：有两样东西的卡片：

图像
文本

但是图像是通过互联网加载的，因此有时它会溢出网格项目框，这个框不会改变高度，我想要的是图像应该是固定大小。
下面是我的代码：“怎么样？）

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}"),
            ),
          ],
        ),
      ),
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/55069369/gridlayout-item-overflow-flutter

3条答案

按热度按时间

liwlm1x91#

你需要 Package 图像小部件-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"),
              ),
            ),
          ],
        ),
      ),
    );
  }

输出：

赞(0）回复(0）举报 2023-06-30

hgqdbh6s2#

使用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,
    ),
   ),
 )

我希望，这将帮助你。

赞(0）回复(0）举报 2023-06-30

gopyfrb33#

最简单和100%确定的方法是自己指定图像的宽度和高度，例如Image.network('somepath', width: 200, height: 200,)

赞(0）回复(0）举报 2023-06-30