flutter - 在列表视图中颤动网格视图
问题描述
我想构建像 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),
],
);
},
),
],
),
),
);
但是网格视图没有出现,如果我注释掉网格视图然后显示没有图像的列表只有类别名称。我试图 wrap 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),
],
);
},
),
),
],
),
),
);
解决方案
我GridView
在 a中使用了颤振ListView
,两者都是垂直滚动:
body: ListView(
children: <Widget>[
GridView.count(
crossAxisCount: 3,
physics: NeverScrollableScrollPhysics(), // to disable GridView's scrolling
shrinkWrap: true, // You won't see infinite size error
children: <Widget>[
Container(
height: 24,
color: Colors.green,
),
Container(
height: 24,
color: Colors.blue,
),
],
),
// ...... other list children.
],
),
您可以使用相同的方法来水平ListView
/GridView
在另一个内部颤动ListView
。
推荐阅读
- android - android中没有Surface View的媒体管道中的地标扣除
- javascript - 使用 jquery/javascript 从表单值生成 url
- excel - 使用 VBA 工作表更改覆盖用户编辑的值
- c - IS_BIG_ENDIAN 宏有效,但在 #if 中无效
- java - TOTP 代币不匹配
- matlab - 如何在matlab中进行三维乘法?
- python - 使用 lxml Etree 在 python 中更新 xml 标签
- javascript - 如何使用地图坐标和比例绘制多边形画布
- java - 使用 getrealmetrics 阅读时屏幕尺寸错误
- javascript - 如何在更改 DropDownMenu 时通过 Jquery 使 jqGrid 动态化?