为什么这个 Flutter 代码在删除 onTap 和 OtherCallBacks 后不起作用

Question

我是 Flutter 的新手，目前正在练习。 我正在从官方文档中学习并自己尝试（删除 ONTAP）。 但它不起作用为什么请告诉。 我只是想了解结构，所以我在阅读官方文档后尝试了这个。 但它显示错误。 我 Go 回到文档我无法找到我的错误在哪里请帮助

import 'package:flutter/material.dart';

class Product {
  Product({this.name});
  final String name;
}

class Item extends StatelessWidget {
  Item({this.product});
  final Product product;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: CircleAvatar(
        child: Text(product.name[0]),
      ),
      title: Text(product.name),
    );
  }
}

class MyShoppingList extends StatefulWidget {
  MyShoppingList({this.products});
  final List<Product> products;

  @override
  _MyShoppingListState createState() => _MyShoppingListState();
}

class _MyShoppingListState extends State<MyShoppingList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Shopping List"),
      ),
      body: Column(
        children: <Widget>[
          ListView(
            children: widget.products.map((Product product) {
              Item(product: product);
            }).toList(),
          )
        ],
      ),
    );
  }
}

main() {
  return runApp(MaterialApp(
    home: MyShoppingList(
      products: <Product>[
        Product(name: "Hello"),
        Product(name: "World"),
        Product(name: "")
      ],
    ),
  ));
}

Answer 1

因此，您应该做两件事，首先> map 应该返回小部件，其次> 将您的列表视图包装在扩展中。

Expanded(
            child: ListView(
              children: widget.products.map((Product product) {
                return Item(product: product);
              }).toList(),
            ),
          )

Answer 2

您的代码中有 3 个问题：

首先：您在列内使用 listView 并且两者都有无限的高度。

解决方案：例如，您可以使用Expanded包装列表视图，如下所示：

Column(
    children: <Widget>[
      Expanded(
        child: ListView(
          children: widget.products.map((Product product) {
            return Item(product: product);
          }).toList(),
        ),
      )
    ],
  )

第二个问题：您需要在 map 方法中使用 return 关键字。

 ListView(
           children: widget.products.map((Product product) {
             // You need to return the Item widget here.
             return Item(product: product);
            }).toList(),
        ),

第三个问题：您试图在listTile小部件中显示product.name的第一个字符，有时可能是 null，因此您必须首先检查product.name是否为null 。

解决方案

ListTile(
  leading: CircleAvatar(
    child: Text(
        product.name == null || product.name == "" ? " " : product.name[0]),
  ),
  title: Text(product.name),
)

最终代码将是：

import 'package:flutter/material.dart';

class Product {
  Product({this.name});
  final String name;
}

class Item extends StatelessWidget {
  Item({this.product});
  final Product product;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: CircleAvatar(
        child: Text(
            product.name == null || product.name == "" ? " " : product.name[0]),
      ),
      title: Text(product.name),
    );
  }
}

class MyShoppingList extends StatefulWidget {
  MyShoppingList({this.products});
  final List<Product> products;

  @override
  _MyShoppingListState createState() => _MyShoppingListState();
}

class _MyShoppingListState extends State<MyShoppingList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Shopping List"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: widget.products.map((Product product) {
                return Item(product: product);
              }).toList(),
            ),
          )
        ],
      ),
    );
  }
}

main() {
  return runApp(MaterialApp(
    home: MyShoppingList(
      products: <Product>[
        Product(name: "Hello"),
        Product(name: "World"),
        Product(name: "")
      ],
    ),
  ));
}