我有一个这样的部件树:
SingleChildScrollView Column Container ListView(or GridView)
问题是,当我小部件树像上面一样时,它给我的错误是需要油漆因此我将部件树更改为:
Column Container ListView(or GridView)
但在这种情况下,ListView或GridView部分分别滚动,而我希望整个部件树都滚动。你认为我如何实现这一点?
eeq64g8w1#
您可以使用第一个widget-tree并应用以下更改:1.在每个ListView和GridView中设置shrinkWrap: true。这将修复您收到的错误消息。1.在每个ListView和GridView中设置physics: NeverScrollableScrollPhysics()。这将禁用它们上的滚动,新的只能在SingleChildScrollView上滚动
ListView
GridView
shrinkWrap: true
physics: NeverScrollableScrollPhysics()
SingleChildScrollView
7uzetpgm2#
正如其他答案所建议的那样,可以通过设置shrinkWrap: true, physics: NeverScrollableScrollPhysics()来实现这一点,但是构建一个收缩的列表视图比构建一个普通的列表视图要昂贵得多,我认为在列表上使用map()是一个好主意。
shrinkWrap: true, physics: NeverScrollableScrollPhysics()
Column( children: <Widget>[ ...itemList.map((item) { return Text(item); }).toList(), ], ),
afdcj2ne3#
对我来说,将primary设置为false并将shrinkWrap设置为true很有效。
ListView( primary: false, shrinkWrap: true, ),
yfjy0ee74#
在ListView中将primary设置为false。
primary
false
ListView( primary: false, ),
这样应该可以防止它单独滚动。
x759pob25#
"为什么会这样“发生这种情况是因为Column和ListView都单独占用了屏幕的整个空间,这是默认行为。
Column
如何解决问题?
要解决上述问题,我们必须禁用列表视图的滚动,这可以通过shrinkWrap和physics属性实现
shrinkWrap
physics
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。
bakd9h0s6#
我正在使用嵌套的Listviews,这对我很有帮助。
Listviews
ListView( shrinkWrap: true, primary: false, ),
zazmityj7#
使用这个内部列表视图对我来说工作得很好。
physics: NeverScrollableScrollPhysics(), shrinkWrap: true,
kq0g1dla8#
这会很管用的
Column( children: itemList.map((item) { return Text(item); }).toList(), ),
kgsdhlau9#
我使用了这三种方法的组合(primary: false, shrinkWrap: true, physics: NeverScrollableScrollPhysics()),结果很好:
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); }, ), ), ), ); }), ) ], ), )
9条答案
按热度按时间eeq64g8w1#
您可以使用第一个widget-tree并应用以下更改:
1.在每个
ListView
和GridView
中设置shrinkWrap: true
。这将修复您收到的错误消息。1.在每个
ListView
和GridView
中设置physics: NeverScrollableScrollPhysics()
。这将禁用它们上的滚动,新的只能在SingleChildScrollView
上滚动7uzetpgm2#
正如其他答案所建议的那样,可以通过设置
shrinkWrap: true, physics: NeverScrollableScrollPhysics()
来实现这一点,但是构建一个收缩的列表视图比构建一个普通的列表视图要昂贵得多,我认为在列表上使用map()是一个好主意。afdcj2ne3#
对我来说,将primary设置为false并将shrinkWrap设置为true很有效。
yfjy0ee74#
在
ListView
中将primary
设置为false
。这样应该可以防止它单独滚动。
x759pob25#
"为什么会这样“
发生这种情况是因为
Column
和ListView
都单独占用了屏幕的整个空间,这是默认行为。如何解决问题?
要解决上述问题,我们必须禁用列表视图的滚动,这可以通过
shrinkWrap
和physics
属性实现shrinkWrap:true-强制ListView只占用所需的空间,而不是整个屏幕。
physics:NeverScrollableScrollPhysics()-它禁用ListView的滚动功能,这意味着现在我们只有SingleChildScrollView提供滚动功能。
代码:
https://medium.com/flutterworld/flutter-problem-listview-vs-column-singlechildscrollview-43fdde0fa355
**注:**上述
ListView
行为也适用于GridView
。bakd9h0s6#
我正在使用嵌套的
Listviews
,这对我很有帮助。zazmityj7#
使用这个内部列表视图对我来说工作得很好。
kq0g1dla8#
这会很管用的
kgsdhlau9#
我使用了这三种方法的组合(
primary: false, shrinkWrap: true, physics: NeverScrollableScrollPhysics()
),结果很好: