Flutter 中的嵌套 GridView
Nested GridView in flutter
我正在尝试使用 GridView
构建器在 flutter 中构建嵌套列表。但是子列表的高度很小。由于我没有为任何列表指定高度,所以我不知道如何增加它。
这是我用来构建嵌套列表的代码。
return DecoratedBox(
decoration: const BoxDecoration(
color: Styles.scaffoldBackground,
),
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildSearchBox(),
Expanded(
child:GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 3/1,
crossAxisSpacing: 20,
mainAxisSpacing:50),
padding: const EdgeInsets.all(10.0),
itemCount: res2.length,
itemBuilder: (context, index) => ChangeNotifierProvider.value(
value: res2[index],
child:Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:<Widget>[
GestureDetector(
onTap: (){
Navigator.push(
context, MaterialPageRoute(builder: (context) => ProductOverview()));
},
child: shopItem(),),
Expanded(
child:Container(
height: 10*_blockSizeVertical,
child:GridView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
padding: const EdgeInsets.all(10.0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1,
childAspectRatio: 3/1,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
itemCount: results.length,
itemBuilder: (context, index) => ChangeNotifierProvider.value(
value: results[index],
child: productItem(
),
),
),),),],),
),),),
],
),
),);
}
列表截图:
更改父 GridView 的 childAspectRatio
。需要 width/height.
改为childAspectRatio: 3/6 ;
我正在尝试使用 GridView
构建器在 flutter 中构建嵌套列表。但是子列表的高度很小。由于我没有为任何列表指定高度,所以我不知道如何增加它。
这是我用来构建嵌套列表的代码。
return DecoratedBox(
decoration: const BoxDecoration(
color: Styles.scaffoldBackground,
),
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildSearchBox(),
Expanded(
child:GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 3/1,
crossAxisSpacing: 20,
mainAxisSpacing:50),
padding: const EdgeInsets.all(10.0),
itemCount: res2.length,
itemBuilder: (context, index) => ChangeNotifierProvider.value(
value: res2[index],
child:Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:<Widget>[
GestureDetector(
onTap: (){
Navigator.push(
context, MaterialPageRoute(builder: (context) => ProductOverview()));
},
child: shopItem(),),
Expanded(
child:Container(
height: 10*_blockSizeVertical,
child:GridView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
padding: const EdgeInsets.all(10.0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1,
childAspectRatio: 3/1,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
itemCount: results.length,
itemBuilder: (context, index) => ChangeNotifierProvider.value(
value: results[index],
child: productItem(
),
),
),),),],),
),),),
],
),
),);
}
列表截图:
更改父 GridView 的 childAspectRatio
。需要 width/height.
改为childAspectRatio: 3/6 ;