SingleChildScrollView中的Flutter ListView.Builder无法滚动

Question

我刚刚开始Flutter。我制作了一个HeaderComponent，在顶部显示标题“ Home”，并使用了在底部显示的BubbleBottomNavbar插件。 目前，我使用字符串列表作为模拟，但稍后将通过API从循环中获取新闻列表以显示为卡片。

我尝试创建尽可能多的组件，并将它们包装起来以在各处重复使用相同的“ MainContainer”。这将显示HeaderComponent以及它将作为参数接收的小部件列表。

我希望它默认为可滚动视图。其内容中的所有小部件都可以很好地显示，但是我一直看到“底部溢出...”警告。我尝试了许多组件，并使用Flex组件，可扩展组件以不同的方式来解决此问题，但是...我仍然无法滚动并保留此警告

这是我的App Render：

这是我的构建方法：

MainComponent.dart：

PostsComponent.dart：

谢谢您为我提供的帮助?

Answer 1

您可能希望在其下面有一个固定的标题和一个可滚动的列表。为此，您需要像这样构建页面的build方法：

Widget build(BuildContext context){
  return Column(children: <Widget>[
      HeaderComponent(title:"Home", hasBackButton:false),
      ListView.builder(
        ...
      ),
    ],
  )
}

将2个可在同一轴上滚动的窗口小部件彼此堆叠在一起，经常会导致错误（“尺寸不受限制”，“溢出”等），因为这2个组件重叠的位置没有明确的滚动行为

要实现Sliver行为，请使用SliverList之类的Sliver。

Answer 2

请问为什么您创建了自定义标头却没有使用AppBar？您可以创建一个自定义PreferredSizedWidget，如果您需要过度自定义的设计，可以将其传递到脚手架（但是您可以在预先构建的AppBar中进行设计的所有元素）。

在Flutter文档中，建议SingleChildScrollView仅在必要时使用它，而改用ListView。

当您有一个孩子列表并且不需要跨轴收缩包装行为时，例如始终是屏幕宽度的滚动列表，请考虑使用ListView，它比包含ListBody的SingleChildScrollView效率更高或有很多孩子的专栏。

如果将标题设置为AppBar，则可以使用ListView.builder(...)作为支架的主体。

但是，如果您坚持在此用例中使用SingleChildScrollView，请将ListBody与作为孩子传入的外部构建的小部件一起使用。如果要内联生成列表元素，可以使用List.generate在ListBody内内联生成列表。

将Column保留在外部，并以Column的第一个子元素作为标题，然后将SingleChildScrollView作为其子元素的ListBody作为您的list元素，孩子们。

Widget build(BuildContext context) => Column(
 children: <Widget>[
   Header(),
   SingleChildScrollView(
     child: ListBody(
       children: List.generate(...),
     ),
   )
 ],
);

编辑：或者按照其他用户的建议，您可以在ListView内嵌套Column并完全消除SingleChildScrollView，这是比较理想的，而且性能更高。

Answer 3

您应该将 ListView.builder 放在容器中，以便构建器知道从哪里获取它的 Size(Height,Width from)。

Widget build(BuildContext context){
  return Container(
     // You can add its height height here or you can leave it empty
     height : YourHeightValue,
     child: ListView.builder(
       ...
     ),
  )
}