Flutter ListView.builder 中的不可重复标头答案

【问题标题】：Non-repeatable header in Flutter ListView.builderFlutter ListView.builder 中的不可重复标头
【发布时间】：2021-06-25 04:42:14
【问题描述】：

（如果此类问题已经在其他地方得到回答，请告诉我，因为我不知道用什么来形容这个问题。谢谢。）

我正在设计一个 Flutter 应用，其中包含一个显示项目列表的页面，如下图所示：

我使用ListView.builder 来迭代一个项目列表，可以向下滚动查看更多项目。现在，页眉和分隔符在页面顶部是静态的。然而，

我想要标题 Items(16) 并且分隔线可以与项目一起滚动到页面外。

将 ListView 包装为父级 = 不理想（项目滚动不起作用）；
尝试在 ListView.builder 或 ListView.separated 中包含标题和分隔符 = 不合适。

有什么方法可以实现吗？这是我的代码的一部分：

return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        backgroundColor: appBarColor,
        title: Text("Groceries"),
      ),
      body: Column(
        children: [
          // Header //
          Text.rich(
            TextSpan(
              text: "Items",
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
              children: [
                TextSpan(
                  text: " (" + items.length.toString() + ")",
                  style: TextStyle(
                    fontSize: 16.0,
                    fontWeight: FontWeight.normal,
                  ),
                ),
              ],
            ),
          ),

          // Divider //
          Divider(
            height: 20.0,
            thickness: 1.0,
          ),

          // Items List //
          Expanded(
            child: ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return CheckboxListTile(
                    value: true,
                    title: Text(items[index]),
                  );
                }),
          ),
        ],
      ),
    );

【问题讨论】：

标签： flutter

【解决方案1】：

SingleChildScrollview怎么样

return Scaffold(
  resizeToAvoidBottomInset: false,
  appBar: AppBar(
    backgroundColor: Colors.white,
    title: Text("Groceries"),
  ),
  body: SingleChildScrollView(child: Column(
    children: [
      // Header //
      Text.rich(
        TextSpan(
          text: "Items",
          style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
          children: [
            TextSpan(
              text: " (" + '10' + ")",
              style: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.normal,
              ),
            ),
          ],
        ),
      ),

      // Divider //
      Divider(
        height: 20.0,
        thickness: 1.0,
      ),

      ListView.builder(
                   scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemCount: 10,
          physics: NeverScrollableScrollPhysics(),
            itemBuilder: (context, index) {
              return CheckboxListTile(
                value: true,
                title: Text("Item $index"),
                onChanged:(value){}
              );
            }),
    ],
  )),
);

【讨论】：

【解决方案2】：

body: SingleChildScrollView(child :Column(
        children: [
          // Header //
          Text.rich(
            TextSpan(
              text: "Items",
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
              children: [
                TextSpan(
                  text: " (" + items.length.toString() + ")",
                  style: TextStyle(
                    fontSize: 16.0,
                    fontWeight: FontWeight.normal,
                  ),
                ),
              ],
            ),
          ),

          // Divider //
          Divider(
            height: 20.0,
            thickness: 1.0,
          ),

          // Items List //
          Expanded(
            child: ListView.builder(
                scrollDirection: neverScrollablePhysics(),
                shrinkWrap: true,
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return CheckboxListTile(
                    value: true,
                    title: Text(items[index]),
                  );
                }),
          ),
        ],
      ),

【讨论】：

【解决方案3】：

感谢大家的快速回复！

从 Tasnuva 和 Gunaseelan 的两个答案来看，用 SingleChildScrollView 包裹不起作用，它在渲染小部件时出错。

但是，从两个答案中我注意到ListView.builder 中的scrollDirection: neverScrollablePhysics()，它可以解决问题。在我将 Column 父级更改为 ListView 父级后，完全符合我的要求。

body: ListView(
        children: [
          Center(
            child: Text.rich(
              TextSpan(
                text: "Items",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
                children: [
                  TextSpan(
                    text: " (" + items.length.toString() + ")",
                    style: TextStyle(
                      fontSize: 16.0,
                      fontWeight: FontWeight.normal,
                    ),
                  ),
                ],
              ),
            ),
          ),
          Divider(
            height: 20.0,
            thickness: 1.0,
          ),
          Expanded(
            child: ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                // Override physics to work with ListView parent
                physics: NeverScrollableScrollPhysics(),
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return CheckboxListTile(
                    value: true,
                    title: Text(items[index]),
                  );
                }),
          ),
        ],
      ),

【讨论】：

更清楚地看我的帖子，我没有用Expanded 小部件包装ListView。这就是它会起作用的原因。再试一次。您可以在列内拥有一个列表视图，而不是在 ListView 中使用 ListView，这是轻量级的。并为您提供更多性能。
@Gunaseelan 我很遗憾没有注意到这一点。试过你的解决方案，效果很好。谢谢。

【解决方案4】：

试试这个：

    return Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: AppBar(
            title: Text("Groceries"),
          ),
          body: CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: Text.rich(
                  TextSpan(
                    text: "Items",
                    style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
                    children: [
                      TextSpan(
                        text: " (" + items.length.toString() + ")",
                        style: TextStyle(
                          fontSize: 16.0,
                          fontWeight: FontWeight.normal,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              SliverToBoxAdapter(
                child: Divider(
                  height: 20.0,
                  thickness: 1.0,
                ),
              ),
SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                // Todo: Populate the Map data with CheckboxListTile
                // Todo: Make CheckBoxListTile check/uncheck-able
                return CheckboxListTile(
                  onChanged: (changed) {},
                  value: true,
                  title: Text(items[index]),
                );
              },
              childCount: items.length,
            ),
          ),
            ],
          ),
        );

【讨论】：