尝试在Flutter FutureBuilder中构建ListView时出错

Question

我是Flutter的新手，正在开发一个小应用程序来记录我的开支并学习一些东西。

我正在使用配置单元存储数据。现在我正在构建一个页面，目标是显示以前保存的所有条目。我通过创建一个包含所有数据的列表来实现这一点，然后尝试使用FutureBuilder在ListView中显示数据。

这是迄今为止的代码：

class LogScreen extends StatefulWidget {
const LogScreen({Key? key}) : super(key: key);
@override
_LogScreenState createState() => _LogScreenState();
}
class _LogScreenState extends State<LogScreen> {
get futureEntries => getEntries();
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
return FutureBuilder<Widget>(
future: futureEntries,
builder: (BuildContext context, AsyncSnapshot<Widget> snapshot) {
if (snapshot.hasData) {
return Container(
child: ListView.builder(
itemCount: futureEntries.length,
itemBuilder: (context, index) {
Entry currentEntry = Hive.box<Entry>('entriesBox').getAt(index);
return ListTile(
title: Text('${currentEntry.description}'),
);
},
),
);
} else {
return CircularProgressIndicator();
}
}
);
}
Future<List> getEntries() async {
List listEntries = await DbHelper().getListEntries();
print(listEntries);
return listEntries;
}
}

不过我得到了以下错误：

The following _TypeError was thrown building LogScreen(dirty, state: _LogScreenState#75644):
type 'Future<List<dynamic>>' is not a subtype of type 'Future<Widget>?'
The relevant error-causing widget was: 
LogScreen file:///home/javier/StudioProjects/finanzas/lib/main.dart:55:14
When the exception was thrown, this was the stack: 
#0      _LogScreenState.build (package:finanzas/log_screen.dart:29:17)

有人能告诉我我做错了什么，并提出解决方案吗？我来自Python，对所有这些类型都很熟悉：-P

提前谢谢。

Answer 1

FutureBuilder<T>()的泛型类型应与Future将返回的数据类型相对应，而不是生成器正在构建的数据类型。在您的情况下，您有FutureBuilder<Widget>，因此它需要Future<Widget>，但您的getEntries返回Future<List<dynamic>>。这就是错误所暗示的。你的代码可能应该是这样的：

return FutureBuilder<List<Entry>>(
future: futureEntries,
builder: (BuildContext context, AsyncSnapshot<List<Entry>> snapshot) {
if (snapshot.hasData) {
return Container(
child: ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
Entry currentEntry = snapshot.data[index];
return ListTile(
title: Text('${currentEntry.description}'),
);
},
),
);
} else {
return CircularProgressIndicator();
}
}
);

还要注意，我将ListView.builder中的引用从直接引用您的未来替换为使用snapshot中的数据

Answer 2

好的。经过一些研究，以下是开始工作的代码：

Widget build(BuildContext context) {
return FutureBuilder<List>(
future: futureEntries,
builder: (BuildContext context, AsyncSnapshot<List> snapshot) {
if (snapshot.hasData) {
return Container(
child: ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
Entry currentEntry = snapshot.data![index];
return ListTile(
title: Text('${currentEntry.description}'),
);
},
),
);
} else {
return CircularProgressIndicator();
}
}
);
}
Future<List> getEntries() async {
List listEntries = await DbHelper().getListEntries();
print(listEntries);
return listEntries;
}

我还不知道"data"后面的感叹号到底是干什么的，但它们确实起到了作用。