如何将列表视图放在SingleChildScrollView中，但防止它们分开滚动？

Question

我有一个像这样的小部件树：

SingleChildScrollView
   Column
     Container
       ListView(or GridView)

问题是当我的小部件树如上时，它给我错误

需要油漆

所以我像这样更改我的小部件树：

Column
     Container
       ListView(or GridView)

但是在这种情况下，ListView或GridView部分会单独滚动，而我希望整个窗口小部件树都可以滚动。您认为我如何实现？

Answer 1

正如其他答案所建议的那样，您可以通过设置来做到这一点shrinkWrap: true, physics: NeverScrollableScrollPhysics()，但是构建收缩包装的列表视图比构建普通列表视图更昂贵，我认为在列表上使用 map() 是个好主意。

Column(
  children: <Widget>[
    ...itemList.map((item) {
       return Text(item);
    }).toList(),
  ],
),

Answer 2

对我来说，将primary 设置为false 并将shrinkWrap 设置为true 有效。

ListView(
   primary: false,
   shrinkWrap: true,
),

Answer 3

为什么会发生？

这是因为Column，并ListView都接受屏幕的整个空间分别是有默认行为。

如何解决问题？

为了解决我们要的ListView禁用滚动上述问题，这可以通过有可能shrinkWrap与physics财产

shrinkWrap:true - 它强制 ListView 只占用所需的空间，而不是整个屏幕。

物理：NeverScrollableScrollPhysics() - 它禁用 ListView 的滚动功能，这意味着现在我们只有 SingleChildScrollView 提供滚动功能。

代码：

SingleChildScrollView
   Column
     Container
        ListView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                //...
                )

https://medium.com/flutterworld/flutter-problem-listview-vs-column-singlechildscrollview-43fdde0fa355

注意：上述ListView行为也将适用于GridView.

Answer 4

设置primary到false你ListView。

ListView(
   primary: false,
),

那应该防止它单独滚动。

Answer 5

我正在使用嵌套Listviews，这对我有帮助。在您的所有内容中添加这些行ListviewBuilders

ListView(
   shrinkWrap: true,
   primary: false,
),

Answer 6

您可以使用第一个小部件树并应用以下更改：

1. 在每一次ListView和GridView设定shrinkWrap: true。这可以修复您在哪里得到的错误消息。
2. 在每一次ListView和GridView设定physics: NeverScrollableScrollPhysics()。这会禁用它们上的滚动，而新的您只能在SingleChildScrollView