在我的屏幕上,我需要在另一个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),
            Expanded(
              child: ListView.builder(
                itemCount: 3,
                itemBuilder: (context, index) {
                  return Column(
                    children: [
                      Text("List $index"),
                      SizedBox(height: 32),
                      ListView.builder(
                          shrinkWrap: true,
                          physics: const ClampingScrollPhysics(),
                          itemCount: 50,
                          itemBuilder: (context, index) {
                            print("building $index");
                            return Text("$index");
                          })
                    ],
                  );
                },
              ),
            )
          ],
        ));
  }

如果您try 一下,您会发现内部ListView.builder个项目的所有200个项目都会立即构建,导致我的主应用程序中的UI堵塞,因为我的项目越来越复杂.

如何防止这种情况并保留仅构建可见项目的ListView种行为?我读到shrinkWrap: true可能是原因,但如果我将其设置为假,我就会出现错误Vertical viewport was given unbounded height.并且无法修复它

推荐答案

您可以try 此代码

return Scaffold(
      appBar: AppBar(
        title: const Text('Isolate FutureBuilder Example'),
      ),
      body: CustomScrollView(
        physics: const ClampingScrollPhysics(),
        slivers: [
          const SliverAppBar(
            title: Text('Isolate FutureBuilder Example'),
          ),
          const SliverToBoxAdapter(
            child: Column(
              children: [
                Text("Header"),
                SizedBox(height: 16),
                Text("Filters"),
                SizedBox(height: 32),
              ],
            ),
          ),
          ...Iterable.generate(3, (index) {
            return [
              SliverToBoxAdapter(
                child: Column(
                  children: [
                    Text("List $index"),
                    const SizedBox(height: 32),
                  ],
                ),
              ),
              SliverList.builder(
                itemBuilder: (context, index) {
                  print("building $index");
                  return Text("$index");
                },
                itemCount: 50,
              )
            ];
          }).toList().expand((element) => element).toList()
        ],
      ),
    );
  }

这里,使用CustomScrollView和Slivers将嵌套列表视图分解为平面列表视图.

Flutter相关问答推荐

此同步方法会返回True还是False?

如何解析json中的枚举并忽略 case 敏感性

创建多个具有适当填充和对齐的按钮的最佳方法

获取屏幕大小的滚动视图与动态大小?

BlocBuilder仅生成一次,并在后续发出时停止重建

在Flutter 中更改扩展瓷砖的高度

使小部件处于有状态状态会导致hasSize异常

Wired Firebase错误-[CLOUD_FIRESTORE/UNAvailable]该服务当前不可用

Flutter 构建 Web 分段故障 - 无法启动事件处理程序线程

Supabase Auth:重定向到 Google.com 而不是我的应用程序

如何将此文本按钮剪辑在堆栈中的圆形头像上方?

Flutter blue plus 库,当try 从 esp32 驱动程序获取 PlatformException 时读取特性

MediaQuery 在不同手机上不一致

如何让小部件根据小部件的大小构建不同的布局?

如何在两个不同的路由(屏幕)之间正确设置 BlocProvider?

flutter - 无法解析 JSON 消息:文档为空

Flutter Websockets MacOS:相同的代码在调试模式下有效,但在发布模式下无效:(操作系统错误:提供了 node 名或服务名..)

配置项目:firebase_core时出现问题

Flutter:制作自定义小部件的最佳做法是什么?

Flutter 活跃的互联网连接