我想像 Ios app store一样构建设计,如下图所示. 我想要实现的是有5个顶级类别,每个类别都有显示图像的网格. 我试过这样的. return new Scaffold( backgroundColor: Colors.white, appBar: buildBar(context),
我想要实现的是有5个顶级类别,每个类别都有显示图像的网格.
我试过这样的.
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),
],
);
},
),
],
),
),
);
但是网格视图没有出现,如果我注释掉网格视图,那么显示没有图像的列表只是类别名称.
我试图包装扩展,设置shrinkWrap为true但没有工作.
我一直在搜索,但仍然无法弄清楚.
谁知道怎么修它？
编辑：
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),
],
);
},
),
),
],
),
),
);
在你的水平列表和垂直列表中
shrinkWrap : true
要么
将列表包装在Expanded()小部件中
编辑
这就是我在另一个列表视图中使用List视图的方式.
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
....
....
);