我try 将ListView.Builder放在一个列中,该列是SliverAppBar的对等体.因此,我需要利用CustomScrollview和SliverToBoxAdapter,以便列可以驻留在CustomScrollView中.

只要我将包覆面提取设置为True,所有这些都可以正常工作.

但是,出于性能原因,我不想使用包络处理(根据官方文档,这是非常昂贵的,并且抵消了让ListView.Builder延迟加载列表项的性能优势).

错误是:"100".这是因为柱子有无限高.

我想not必须硬编码的列的大小,因为这将是一个响应/自适应脚手架.

我的代码如下-我的问题是,有没有人能够从小使用带有ListView.Builder的柱,而不使用设置为True的包络处理,也不硬编码高度?

import 'package:flutter/material.dart';

class TestScaffold extends StatelessWidget {
  const TestScaffold({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[100],
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              mainAxisSize: MainAxisSize.min,
              children: [
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text('Title 1'),
                      Expanded(
                        child: ListView.builder(
                          //shrinkWrap: true,
                          itemCount: 3,
                          itemBuilder: (context, index) {
                            return Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                height: 100,
                                width: 100,
                                color: Colors.red,
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text('Title 2'),
                      Expanded(
                        child: ListView.builder(
                          //shrinkWrap: true,
                          itemCount: 3,
                          itemBuilder: (context, index) {
                            return Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                height: 100,
                                width: 100,
                                color: Colors.green,
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

推荐答案

您可以使用SliverFillRemaining而不是Row,而内部部件使用的是Expanded.

class TestScaffold extends StatelessWidget {
  const TestScaffold({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[100],
      body: CustomScrollView(
        slivers: [
          SliverFillRemaining( //this
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              mainAxisSize: MainAxisSize.min,
              children: [
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text('Title 1'),
                      Expanded(
                        child: ListView.builder(
                          //shrinkWrap: true,
                          itemCount: 3,
                          itemBuilder: (context, index) {
                            return Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                height: 100,
                                width: 100,
                                color: Colors.red,
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text('Title 2'),
                      Expanded(
                        child: ListView.builder(
                          //shrinkWrap: true,
                          itemCount: 3,
                          itemBuilder: (context, index) {
                            return Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                height: 100,
                                width: 100,
                                color: Colors.green,
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

我想你也会喜欢用SliverPersistentHeader美元来装你的箱子.

Flutter相关问答推荐

如何在列表磁贴上添加行

在Flutter中,CachedNetworks Image不工作(不从CachedData加载)

从Flutter应用程序解释蓝牙BLE数据:了解Sylvania压力值

为什么他们实例化类,然后丢弃该实例?

Dexing时出错.将Flutter 升级到3.19.0后

在Flutter TextField中计算子字符串位置

修复后期变量的抖动皮棉

UI中的Flutter 下拉列表值未更改

'Flutter的无效常数值错误

Riverpod 2.0-如何使用FutureOr和AutoDisposeSyncNotificationer处理api状态代码?

如何在 Flutter 中设计像 zomato 应用程序一样的搜索字段?

GridView 渲染项目之间有微小的间隙

Flutter记录返回类型问题

模块是使用不兼容的 kotlin 版本编译的.其元数据的二进制版本是1.8.0,预期版本是1.6

如何在Flutter中显示ListView Builder区域外的列表数据?

在 Flutter 中,SpinEdit 叫什么?

如何在 Flutter (iOS) 中解决这个问题

转换函数上传文件上传Uint8List

改变步进器的线条 colored颜色 Flutter

运行Flutter 测试时出现 FirebaseAppPlatform.verifyExtends 错误