Flutter 颤振ListView.builder中的不可重复标题

（请让我知道这类问题是否已经在其他地方得到了回答，因为我不知道用什么来描述这个问题。谢谢。）

我正在设计一个Flitter应用程序，页面显示项目列表，如下面的屏幕截图所示：

我使用

ListView.builder

迭代项目列表，可以向下滚动查看更多项目。现在，页眉和分隔符在页面顶部是静态的。但是,

我希望标题项目（16）和分隔符可以与项目一起滚动出页面。

• 将

  ListView

  包装为父项=不理想（项目滚动不工作）
• 尝试将标题和分隔符包含到

  ListView.builder

  或

  ListView.separated

  =不合适

有什么办法使之成为可能吗？以下是我的部分代码：

返回脚手架(
resizeToAvoidBottomInset:false，
appBar:appBar(
背景颜色：appBarColor，
标题：文本（“杂货”），
),
正文：专栏(
儿童：[
//标题//
Text.rich(
TextSpan(
正文：“项目”，
样式：TextStyle（fontSize:20.0，fontWeight:fontWeight.bold），
儿童：[
TextSpan(
文本：（“+items.length.toString（）+”），
样式：TextStyle(
字体大小：16.0，
fontWeight:fontWeight.normal，
),
),
],
),
),
//分隔器//
分隔器(
身高：20.0，
厚度：1.0，
),
//项目清单//
扩大(
子项：ListView.builder(
滚动方向：轴垂直，
收缩膜：对，
itemCount:items.length，
itemBuilder：（上下文，索引）{
返回CheckboxListTile(
价值观：正确，
标题：文本（项目[索引]），
);
}),
),
],
),
);

试试这个：

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

---

怎么样

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

---

谢谢大家的快速回复

从Tasnuva和Gunaseelan的两个答案来看，使用

SingleChildScrollView

包装不起作用，它在呈现小部件时出错

然而，从这两个答案中，我注意到

scrollDirection:neverScrollablePhysics（）

在

ListView.builder

中，它做到了这一点。在我将

列

parent更改为

ListView

parent之后，它的工作方式正是我想要的

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

---

更清楚地看我的帖子，我没有用

扩展的
小部件包装
ListView
。这就是它会起作用的原因。再试一次。不必在ListView中包含ListView，您可以在列中包含一个ListView，它很轻。给你更多的表现。@Gunaseelan我很抱歉没有注意到这一点。尝试了你的解决方案，效果很好。非常感谢。
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]),
                  );
                }),
          ),
        ],
      ),