Flutter SingleChildScrollView 内的 ListView.Builder 不可滚动

Question

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

我尝试创建尽可能多的组件并包装它们以在任何地方重用相同的“MainContainer”。 这将显示 HeaderComponent 和它将在参数中作为内容接收的小部件列表。

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

这是我的应用程序渲染：

这是我的构建方法：

MainComponent.dart：

PostsComponent.dart：

感谢您为我提供的帮助

Answer 1

你可能想要一个固定的 header和它下面的可滚动的帖子列表。 为此，您需要像这样构建页面的build方法：

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

将可在同一轴上滚动的 2 个小部件相互堆叠通常会导致错误（“无限维度”、“溢出”等），因为对于这两个组件重叠的位置没有明确的滚动行为。

要实现 Sliver 行为，请使用 Sliver，例如SliverList 。

Answer 2

请问您为什么创建了自定义 header 而没有使用AppBar ？ 如果您需要过度定制的设计（但您可以在预构建的AppBar中完成设计的所有元素），您可以创建一个自定义的PreferredSizedWidget ，您可以将其传递给您的脚手架。

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

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

如果您将 header 设为AppBar ，则可以使用ListView.builder(...)作为脚手架的主体。

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

将Column保持在外面， Column的第一个子元素是 header，然后是SingleChildScrollView ， ListBody作为子元素，列表元素作为子元素。

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

编辑：或者正如其他用户推荐的那样，您可以在Column中嵌套一个ListView并完全消除SingleChildScrollView ，这更理想且性能更高。

Answer 3

惠，因为我一直在努力寻找答案。 但最后我解决了。

1. 对于那些希望他们的 DataTable 垂直和水平滚动的人。

Expanded(
    child: ListView(children: [
      Column(
        children: [
           SingleChildScrollView(
                 scrollDirection: Axis.horizontal,
                 child: DataTable(
                          columns: [
                              DataColumn(label: Text('Storage Location')),
                              DataColumn(label: Text('Piece No ')),
                            ],
                          rows:
                              DataRow(
                                 cells: <DataCell>[
                                            DataCell(Text(element["LGORT"])),
                                            DataCell(Text(element["PCNO"])),
                                                  ],
                                     ),
                               ),
                            ),
                     ],
            ),
       ]),
    )
);

Answer 4

您应该在容器内创建 ListView.builder，以便构建器知道从哪里获取其 Size(Height,Width)。

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