颤振错误：垂直视口被赋予了无限的高度答案

【问题标题】：Flutter Error: Vertical viewport was given unbounded height颤振错误：垂直视口被赋予了无限的高度
【发布时间】：2019-11-05 13:41:21
【问题描述】：

我正在学习颤振，我正在尝试实现一组可点击的卡片，我成功创建了卡片，但是当我尝试使用 GestureDetector 并将其包装在列表视图构建器中时，我收到以下错误

垂直视口被赋予了无限的高度。视口在滚动方向以填充其容器。在这种情况下，垂直视口被赋予了无限量的垂直空间，展开。

请在下面找到代码（task_card.dart）：

import 'package:flutter/material.dart';
import 'product_detail.dart';

class TaskCard extends StatelessWidget {
  final Map<String, dynamic> product;
  final Function updateProduct;
  final Function deleteProduct;
  final int productIndex;

  TaskCard(this.product, this.productIndex, this.updateProduct, this.deleteProduct);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      //shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) {
        return GestureDetector(
          onTap: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
              return ProductDetail(
                product: product[index],
                productIndex: index,
                updateProduct: updateProduct,
                deleteProduct: deleteProduct,
              );
            }));
          },
          child: Card(
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.only(left: 10.0, top: 5.0),
                      child: Text(
                        product['title'],
                        style: TextStyle(
                          fontSize: 22.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      }
    );
  }
}

(task.dart)

import 'package:flutter/material.dart';
import 'task_card.dart';

class Tasks extends StatelessWidget {
  final List<Map<String, dynamic>> products;
  final Function updateProduct;
  final Function deleteProduct;

  Tasks(this.products, this.updateProduct, this.deleteProduct);

  Widget _buildTaskCard() {
    Widget taskCard = Center(
      child: Text('No Products found'),
    );
    if (tasks.length > 0) {
      taskCard = ListView.builder(
        itemBuilder: (BuildContext context, int index) =>
            TaskCard(products[index], index, updateProduct, deleteProduct),
        itemCount: products.length,
      );
    }
    return taskCard;
  }

  @override
  Widget build(BuildContext context) {
    return _buildTaskCard();
  }
}

我尝试在一个灵活的小部件中扭曲我的列表视图构建器，并使用收缩包装，但它们都不起作用（收缩包装使应用程序崩溃）。

我正在尝试使卡片可点击，以便导航到另一个页面。任何帮助表示赞赏，谢谢:)

【问题讨论】：

你在哪里使用TaskCard。
数据是和函数在main.dart中初始化并传递给这里的代码
我的意思是，TaskCard 的父母是谁？
父级是task.dart，我添加了代码供参考

标签： flutter dart

【解决方案1】：

好的，我想我找到了解决办法。我在 task_card.dart 中添加了一个不必要的列表视图构建器，并通过已经有一个列表视图构建器的 tasks.dart 调用它。将我的代码分享给任何想要参考的人。

task.dart

import 'package:flutter/material.dart';
import 'task_card.dart';

class Tasks extends StatelessWidget {
  final List<Map<String, dynamic>> products;
  final Function updateProduct;
  final Function deleteProduct;

  Tasks(this.products, this.updateProduct, this.deleteProduct);

  Widget _buildTaskCard() {
    Widget taskCard = Center(
      child: Text('No Products found'),
    );
    if (tasks.length > 0) {
      taskCard = ListView.builder(
        itemBuilder: (BuildContext context, int index) =>
            TaskCard(products[index], index, updateProduct, deleteProduct),
        itemCount: products.length,
      );
    }
    return taskCard;
  }

  @override
  Widget build(BuildContext context) {
    return _buildTaskCard();
  }
}

task_card.dart

import 'package:flutter/material.dart';
import 'product_detail.dart';

class TaskCard extends StatelessWidget {
  final Map<String, dynamic> product;
  final Function updateProduct;
  final Function deleteProduct;
  final int productIndex;

  TaskCard(this.product, this.productIndex, this.updateProduct, this.deleteProduct);

  @override
  Widget build(BuildContext context) {
        return GestureDetector(
          onTap: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
              return ProductDetail(
                product: product,
                productIndex: productIndex,
                updateProduct: updateProduct,
                deleteProduct: deleteProduct,
              );
            }));
          },
          child: Card(
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.only(left: 10.0, top: 5.0),
                      child: Text(
                        product['title'],
                        style: TextStyle(
                          fontSize: 22.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      }
}

【讨论】：