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

u5i3ibmn  于 2022-12-14  发布在  Flutter
关注(0)|答案(9)|浏览(220)

我有一个这样的部件树:

SingleChildScrollView
   Column
     Container
       ListView(or GridView)

问题是,当我小部件树像上面一样时,它给我的错误是
需要油漆
因此我将部件树更改为:

Column
     Container
       ListView(or GridView)

但在这种情况下,ListView或GridView部分分别滚动,而我希望整个部件树都滚动。你认为我如何实现这一点?

eeq64g8w

eeq64g8w1#

您可以使用第一个widget-tree并应用以下更改:
1.在每个ListViewGridView中设置shrinkWrap: true。这将修复您收到的错误消息。
1.在每个ListViewGridView中设置physics: NeverScrollableScrollPhysics()。这将禁用它们上的滚动,新的只能在SingleChildScrollView上滚动

7uzetpgm

7uzetpgm2#

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

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

afdcj2ne3#

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

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

yfjy0ee74#

ListView中将primary设置为false

ListView(
   primary: false,
),

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

x759pob2

x759pob25#

"为什么会这样“
发生这种情况是因为ColumnListView都单独占用了屏幕的整个空间,这是默认行为。

如何解决问题?

要解决上述问题,我们必须禁用列表视图的滚动,这可以通过shrinkWrapphysics属性实现

shrinkWrap:true-强制ListView只占用所需的空间,而不是整个屏幕。
physics:NeverScrollableScrollPhysics()-它禁用ListView的滚动功能,这意味着现在我们只有SingleChildScrollView提供滚动功能。
代码:

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

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

**注:**上述ListView行为也适用于GridView

bakd9h0s

bakd9h0s6#

我正在使用嵌套的Listviews,这对我很有帮助。

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

zazmityj7#

使用这个内部列表视图对我来说工作得很好。

physics: NeverScrollableScrollPhysics(),

shrinkWrap: true,
kq0g1dla

kq0g1dla8#

这会很管用的

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

kgsdhlau9#

我使用了这三种方法的组合(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);
                      },
                    ),
                  ),
                ),
              );
            }),
          )
        ],
      ),
    )

相关问题