列表视图内的Flutter GridView [英] Flutter gridview inside listview
本文介绍了列表视图内的Flutter GridView的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想构建像Ios应用商店这样的设计，如下图所示. 我要实现的目标是有5个顶级类别，每个类别都有显示图像的网格. 我尝试过这样.
I'd like to build design like Ios app store like image below. What I'm trying to achieve is there are 5 top category and each category has grid that shows images. And I tried like this.
return new Scaffold(
backgroundColor: Colors.white,
appBar: buildBar(context),
// wrap in gesture to dismiss keyboard
body: new GestureDetector(
behavior: HitTestBehavior.opaque,
onPanDown: (detail) {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: new ListView(
shrinkWrap: true,
children: <Widget>[
new Container(
decoration: new BoxDecoration(color: Colors.grey[400]),
child: new Column(
children: <Widget>[
new SizedBox(height: 15.0),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.invert_colors,
color: Colors.red, size: 45.0),
new Text('Top 5',
style: new TextStyle(
color: Colors.white,
fontSize: 25.0,
fontWeight: FontWeight.bold)),
],
),
new SizedBox(height: 15.0),
],
),
),
new SizedBox(height: 30.0),
new ListView.builder(
shrinkWrap: true,
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
decoration:
new BoxDecoration(color: Colors.lightBlue[200]),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(icons[index],
size: 30.0),
new Padding(
padding: const EdgeInsets.only(right: 5.0)),
new Text('Category',
style: new TextStyle(
fontSize: 23.0, fontWeight: FontWeight.bold)),
],
),
),
new SizedBox(height: 5.0),
new GridView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 10,
gridDelegate:
new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4),
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
child: new Card(
elevation: 5.0,
child: new Container(
padding: new EdgeInsets.only(
bottom: 2.0, right: 3.0),
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://images.unsplash.com/photo-1505535162959-9bbcb4ab22d6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0891a99609bf6fdc48842101bef90d67&auto=format&fit=crop&w=500&q=60'),
),
),
),
),
onTap: () {
print('tapped');
});
},
),
new SizedBox(height: 20.0),
],
);
},
),
],
),
),
);
但是没有出现网格视图，如果我注释掉了网格视图，那么显示的列表中没有图像，只是类别名称.
我试图包装expanded，将shrinkWrap设置为true，但是没有用.
我一直在搜索，但仍然无法弄清楚.
有人知道如何解决吗?
But grid view doesn't appear and if I commented out grid view then shows list that doesn't have images just category names.
I tried to wrap expanded, set shrinkWrap to true but did not working.
I've been searching through but still can't figure it out.
Anyone know how to fix it?
return new Scaffold(
backgroundColor: Colors.white,
appBar: new AppBar(
title: new Text('Search'),
),
body: new GestureDetector(
behavior: HitTestBehavior.opaque,
onPanDown: (detail) {
print(detail);
FocusScope.of(context).requestFocus(new FocusNode());
},
child: new ListView(
shrinkWrap: true,
children: <Widget>[
new SizedBox(height: 20.0),
new Container(
height: 60.0,
color: Colors.blue,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.hourglass_empty,
color: Colors.white, size: 30.0),
new Padding(padding: const EdgeInsets.only(right: 5.0)),
new Text('TOP5',
style:
new TextStyle(color: Colors.white, fontSize: 23.0)),
],
),
),
new SizedBox(height: 20.0),
new Container(
child: new ListView.builder(
shrinkWrap: true,
itemCount: 5,
itemBuilder: (context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(
padding: const EdgeInsets.only(right: 5.0)),
new Text(arr[index],
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
new Container(
height: 150.0,
child: new ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (context, index) {
return new GestureDetector(
child: new Card(
elevation: 5.0,
child: new Container(
height: MediaQuery.of(context).size.width / 3,
width: MediaQuery.of(context).size.width / 3,
alignment: Alignment.center,
child: new Text('Item $index'),
),
),
onTap: () {
print(123);
},
);
},
),
),
new SizedBox(height: 20.0),
],
);
},
),
),
],
),
),
);
推荐答案
您可以尝试在垂直滚动列表中使用水平滚动列表"，以轻松实现这种布局.
You can try to use Horizontal scrolling lists inside a vertical scrolling list to achieve this type of layout easily.
在水平列表和垂直列表中
In your horizontal list and vertical list put
shrinkWrap : true
或
将列表包装在Expanded()小部件中
Wrap the lists inside an Expanded() widget
编辑
这就是我在另一个列表视图中使用列表视图的方式.
This is how I used a List view inside another list view.
Container ( child :
ListView.builder(
itemBuilder: (context, subMenuIndex) {
return Container(
padding: EdgeInsets.only(left: 20.0),
child: sideMenuStuff.sideMenuData.elementAt(mainIndex).menu.subMenu.elementAt(subMenuIndex).subSubMenu != null
? ExpansionTile(
title: Text(sideMenuStuff.sideMenuData.elementAt(mainIndex).menu.subMenu.elementAt(subMenuIndex).zero.info.title,
),
children: <Widget>[
ListView.builder(
shrinkWrap: true,
itemCount: sideMenuStuff.sideMenuData.elementAt(mainIndex).menu.subMenu.elementAt(subMenuIndex).subSubMenu.length,
itemBuilder:
(context, subSubMenuIndex) {
return Container(
padding: EdgeInsets.only(
left: 40.0,
top: 10.0,
bottom: 10.0),
child:
GestureDetector(
onTap:
() {
Navigator
.pop(context);
Navigator
.of(context)
.push(MaterialPageRoute(
builder: (context) =>
Products(
sideMenuStuff
.sideMenuData
.elementAt(
mainIndex)
.menu
....
....
);
这篇关于列表视图内的Flutter GridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
