如何在 SingleChildScrollView 中放置一个列表视图但防止它们单独滚动？

Question

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

SingleChildScrollView
   Column
     Container
       ListView(or GridView)

问题是当我的小部件树像上面一样时，它给了我错误

需要油漆

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

Column
     Container
       ListView(or GridView)

但在这种情况下，ListView 或 GridView 部分单独滚动，我希望整个小部件树滚动。 你认为我怎样才能实现它？

Answer 1

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

1. 在每个ListView和GridView设置shrinkWrap: true 。 这修复了您收到的错误消息。
2. 在每个ListView和GridView设置physics: NeverScrollableScrollPhysics() 。 这会禁用它们的滚动，而新的你只能在SingleChildScrollView滚动

Answer 2

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

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

Answer 3

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

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

Answer 4

在ListView中将primary设置为false 。

ListView(
   primary: false,
),

这应该可以防止它单独滚动。

Answer 5

为什么会发生？

发生这种情况是因为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 6

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

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

Answer 7

在列表视图中使用这个对我来说很好用。

physics: NeverScrollableScrollPhysics(),

shrinkWrap: true,

Answer 8

这将像一个魅力。

Column(
children: itemList.map((item) {
   return Text(item);
}).toList(),
),

Answer 9

我使用了所有三者的组合（ primary: false, shrinkWrap: true, physics: NeverScrollableScrollPhysics() ）并且它只是工作：

   SingleChildScrollView(

      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            child: ListView.builder(primary: false, shrinkWrap: true, physics: NeverScrollableScrollPhysics(), itemCount: movies.length ,itemBuilder: (context, index) {
              Movie movie = movies[index];
              return Container(
                child: Card(
                  color: Colors.greenAccent,
                  key: ValueKey(movie.title),
                  child: ListTile(
                    title: Text(movie.title),
                    subtitle: Text(movie.duration),
                    trailing: IconButton(
                      icon: Icon(Icons.favorite),
                      color: movies[index].isFav ? Colors.red : Colors.white,
                      onPressed: () {
                        context.read<MovieProvider>().updateFav(!movies[index].isFav, movie);
                      },
                    ),
                  ),
                ),
              );
            }),
          )
        ],
      ),
    )