如何使用 CustomScrollView 调用 ListView 并显示所有元素？答案

【问题标题】：How do I call the ListView using CustomScrollView and display all the elements?如何使用 CustomScrollView 调用 ListView 并显示所有元素？
【发布时间】：2023-04-04 00:30:02
【问题描述】：

我有一个由分隔符分隔的 ListView，如下所示。我已经调用了所有元素，但是最后一个图块在我的屏幕上被剪切了。我已经尝试在列表周围添加 SliverPadding ，但它没有帮助并且更多地裁剪列表。这是我的 ListView 的代码：

  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 80.0),
            child: CustomScrollView(slivers: <Widget>[
              SliverToBoxAdapter(
                child: Padding(
                  padding: EdgeInsets.only(
                      top: MediaQuery.of(context).size.height * 0.09,
                      bottom: MediaQuery.of(context).size.height * 0.015,
                      left: 18.0),
                  child: Text("Puppies",
                      style: khomeStyle.copyWith(color: kOrange, fontSize: 27)),
                ),
              ),
              SliverFillRemaining(
                child: ListView.separated(
                    itemCount: 10,
                    //shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    //padding: EdgeInsets.all(0),
                    separatorBuilder: (BuildContext context, int index) {
                      return Divider();
                    },
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                          isThreeLine: false,
                          leading: ClipRRect(
                            borderRadius: BorderRadius.circular(12.0),
                            child: Container(
                              child: Image.network(
                                  'https://www.thesprucepets.com/thmb/LhWrTxh5MaOb_6IY-fgLxH75SI8=/2121x1193/smart/filters:no_upscale()/golden-retriever-puppy-in-grass-923135452-5c19243546e0fb000190737c.jpg'),
                            ),
                          ),
                          title: Row(
                            children: <Widget>[
                              Text(
                                "Helllo",
                                style: khomeStyle.copyWith(
                                    fontSize: 17,
                                    color: kOrange,
                                    fontWeight: FontWeight.w600),
                              ),
                            ],
                          ),
                          subtitle: Text(
                            'This is a message',
                            style: khomeStyle.copyWith(
                                fontSize: 15,
                                color: Colors.black.withOpacity(0.7),
                                fontWeight: FontWeight.w300),
                          ));
                    }),
              ),
            ]),
          ),
        ],
      ),
    );
  }

这是 ListView 的样子： https://i.stack.imgur.com/vyL2x.png

【问题讨论】：

为什么是physics: NeverScrollableScrollPhysics(),？
因为我希望整个页面滚动，而不仅仅是页面内的列表@dev-aentgs
好的。根据您的代码，所有内容都在CustomScrollView 内，因此整个页面都会滚动。通过添加physics: NeverScrollableScrollPhysics(),，我们有效地阻止了ListView 显示其在屏幕可见区域之外的元素。如果设备方向发生变化，它也会导致剪辑。删除physics: NeverScrollableScrollPhysics(),，然后重试。
所以我尝试删除它但是现在列表滚动但页面没有。所以我在页面顶部的标题保持不变
不，我不想实现类似于粘性标题的东西。实际上我试图做相反的事情。我希望标题与列表和页面一起滚动。@dev-aentgs

标签： flutter user-interface dart flutter-layout

【解决方案1】：

如果您不是在寻找 Slivers，请尝试以下代码。这将滚动到最后一项，并且不会裁剪任何内容。

Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.only(top: 80.0),
      child: SingleChildScrollView(
        child: ListView.separated(
            itemCount: 10,
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            separatorBuilder: (BuildContext context, int index) {
              return Divider();
            },
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                  isThreeLine: false,
                  leading: ClipRRect(
                    borderRadius: BorderRadius.circular(12.0),
                    child: Container(
                      child: Image.network(
                          'https://www.thesprucepets.com/thmb/LhWrTxh5MaOb_6IY-fgLxH75SI8=/2121x1193/smart/filters:no_upscale()/golden-retriever-puppy-in-grass-923135452-5c19243546e0fb000190737c.jpg'),
                    ),
                  ),
                  title: Row(
                    children: <Widget>[
                      Text(
                        "Helllo",
                        style: khomeStyle.copyWith(
                            fontSize: 17,
                            color: kOrange,
                            fontWeight: FontWeight.w600),
                      ),
                    ],
                  ),
                  subtitle: Text(
                    'This is a message',
                    style: khomeStyle.copyWith(
                        fontSize: 15,
                        color: Colors.black.withOpacity(0.7),
                        fontWeight: FontWeight.w300),
                  ));
            }),
      ),
    ),
  );
}

【讨论】：