ListView 中的 ListView 正在一次构建所有项目

Question

在我的屏幕上，我需要在另一个 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.

并且我无法修复它

Answer 1

尝试用这个替换你的代码

我认为你不需要列表视图中的列表视图

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