【发布时间】：2019-01-16 20:20:59
【问题描述】：
我想构建像 Ios 应用商店这样的设计，如下图所示。 我想要实现的是有 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),
],
);
},
),
],
),
),
);
但是网格视图没有出现，如果我注释掉网格视图然后显示没有图像的列表只有类别名称。
我试图包装expanded，将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),
],
);
},
),
),
],
),
),
);
【问题讨论】：
标签： flutter