Flutter中SingleChildScrollView内嵌GridView无法正常工作求解决方案
问题分析
原布局无法正常运行的核心原因有两点:
- 外层
Column未给内部的SingleChildScrollView提供明确高度约束,导致滚动视图无法确定自身尺寸。 - 嵌套在
SingleChildScrollView内的Column中使用了Expanded——Expanded需要父组件提供固定剩余空间,但SingleChildScrollView的视口是可滚动的无限高度,两者逻辑冲突。
可行替代方案
方案一:让滚动视图占据外层Column剩余空间
给SingleChildScrollView套上Expanded,使其填充外层Column的剩余垂直空间,同时移除内部的Expanded(滚动视图本身支持内容滚动,无需强制拉伸):
Column( children: <Widget>[ SliderWidget(SliderList, "text", "text"), const SizedBox(height: 20), // 用Expanded约束滚动视图高度为Column剩余空间 Expanded( child: SingleChildScrollView( child: Column( children: [ Text("Some text"), // 注意:原代码的text应为Flutter内置的Text组件 Padding( padding: const EdgeInsets.all(24.0), child: GridListing(FavouriteList, false), ), ], ), ), ), ], ),
方案二:让整个页面可滚动(更简洁)
如果不需要顶部SliderWidget固定在页面顶部,直接将所有内容放入SingleChildScrollView,实现全页面滚动:
SingleChildScrollView( child: Column( children: <Widget>[ SliderWidget(SliderList, "text", "text"), const SizedBox(height: 20), Text("Some text"), Padding( padding: const EdgeInsets.all(24.0), child: GridListing(FavouriteList, false), ), ], ), ),
内容的提问来源于stack exchange,提问作者Sandeep Sharma
相关产品推荐
相关产品推荐

