在我的屏幕上,我需要在另一个 ListView 中显示一个 ListView。屏幕可以总结如下:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Isolate FutureBuilder Example'),
),
body: Column(
children: [
Text("Header"),
SizedBox(height: 16),
Text("Filters"),
SizedBox(height: 32),
Text("List 1"),
SizedBox(height: 32),
Expanded(
child: ListView(
children: [
Text("List 1"),
SizedBox(height: 32),
ListView.builder(
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
itemCount: 200,
itemBuilder: (context, index) {
print("building $index");
return Text("$index");
})
],
),
)
],
),
);
}
如果你尝试一下,你会发现内部
ListView.builder
的所有 200 个项目都会立即构建,导致我的主应用程序中出现 UI 堵塞,因为我有越来越多复杂的项目。
我怎样才能防止这种情况并保持仅构建可见项目的
ListView
行为?我读到 shrinkWrap: true
可能是原因,但如果我将其设置为 false,则会出现错误 Vertical viewport was given unbounded height.
并且我无法修复它
尝试用这个替换你的代码
我认为你不需要列表视图中的列表视图
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Isolate FutureBuilder Example'),
),
body: Column(
children: [
Text("Header"),
SizedBox(height: 16),
Text("Filters"),
SizedBox(height: 32),
Text("List 1"),
SizedBox(height: 32),
Expanded(
child: ListView(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.5, // Adjust height as needed
child: ListView.builder(
physics: const ClampingScrollPhysics(),
itemCount: 200,
itemBuilder: (context, index) {
print("building $index");
return Text("$index");
},
),
),
],
),
),
],
),
),
);
}