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

Question

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

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

您的代码中有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: "")
],
),
));
}

Answer 2

所以你应该做两件事，第一件>地图应该返回小部件Second>将列表视图包装在展开中。

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