如何在颤振中的网格视图构建器中设置小部件的高度？

Question

我有一个列表视图构建器。 在列表视图构建器中有网格视图构建器。 它工作正常。 但是在最后一个图像上方有不需要的空间正在生成。 我尝试在图像小部件中使用 fit:Boxfit.fill ，但它使图片像素化。 有没有办法在颤振中动态构建行或列。

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class DemoPage extends StatefulWidget {
  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  var data, localData, innerData, count, imageUrl;

  @override
  void initState() {
    super.initState();
    getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Demo Grid")),
      body: ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index) {
          localData = data[index];
          count = localData["column"];

          innerData = localData["data"];

          return GridView.builder(
            shrinkWrap: true,
            physics: ScrollPhysics(),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: count,
            ),
            itemCount: innerData == null ? 0 : innerData.length,
            itemBuilder: (BuildContext context, int index) {
              imageUrl = innerData[index]["imageUrl"];

              // return Container(
              //   padding: const EdgeInsets.all(20),
              //   decoration: BoxDecoration(
              //     image: DecorationImage(
              //       image: NetworkImage(
              //         imageUrl,
              //       ),
              //     ),
              //   ),
              // );

              return Card(
                margin: EdgeInsets.all(10),
                color: Colors.green,
                child: Image.network(imageUrl),
              );
            },
          );
        },
      ),
    );
  } 

 Future<dynamic> getData() async {
    final newEndPoint = "https://api.myjson.com/bins/asy4s";
    final oldEndPoint = "https://api.myjson.com/bins/1fea5o";
    final response = await http.get(newEndPoint);

    final parsedJson = json.decode(response.body);

    setState(() {
      data = parsedJson;
    });
  }
}

图片

Answer 1

只需检查下面提到的链接，其中是否给出了示例，如果已动态创建小部件并添加。 只需检查示例，也许它会帮助您：

Flutter：基于网络图像尺寸的不同ListView ItemBuilder 布局

Answer 2

将图像包裹在纵横比为 16/9 的纵横比小部件中

return Card(
                margin: EdgeInsets.all(10),
                color: Colors.green,
                child: AspectRatio( aspectRatio: 16 / 9, child: Image.network(imageUrl)),
              );