Question

我正在学习颤动，并且试图获得一组可点击的卡片，我成功创建了卡片，但是当我尝试使用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();
  }
}

我尝试在一个灵活的小部件中变形我的listview构建器，并且还使用收缩包装，但是没有一个起作用（收缩包装使应用程序崩溃）。

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

Answer 1

好的，所以我想我找到了解决方法。我在task_card.dart中添加了一个不必要的listview构建器，并通过task.dart对其进行了调用，task.dart已经具有一个listview构建器。与任何想要参考的人共享我的代码。

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

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

1 个答案: