列表视图内的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),
],
);
},
),
],
),
),
);
但是没有出现网格视图，如果我注释掉了网格视图，那么显示的列表中没有图像，只是类别名称。
我尝试包装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),
],
);
},
),
),
],
),
),
);
4 个答案:
答案 0 :(得分：3)
您可以尝试在垂直滚动列表中使用水平滚动列表，以轻松实现这种布局。
在水平列表和垂直列表中
shrinkWrap : true
或
将列表包装在Expanded（）小部件中
编辑
这就是我在另一个列表视图中使用列表视图的方式。
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
....
....
);
答案 1 :(得分：3)
我在GridView中使用了ListView，两者都是垂直滚动：
body: ListView(
children: <Widget>[
GridView.count(
crossAxisCount: 3,
physics: ScrollPhysics(), // to disable GridView's scrolling
shrinkWrap: true,
children: <Widget>[
Container(
height: 24,
color: Colors.green,
),
Container(
height: 24,
color: Colors.blue,
),
],
),
Stack(),
// ...... other list children.
],
),
答案 2 :(得分：1)
如果
physics: ScrollPhysics(),不滚动， ListView/GridView可以解决问题，如果“父窗口小部件”是SingleChildScrollView或ListView/GridView可以为父窗口小部件而不是子窗口提供滚动功能，则可能会发生这种情况小部件。
解决方案：
Scaffold(
backgroundColor: Colors.white,
appBar: new AppBar(
title: new Text('Search'),
),
body: new ListView(
shrinkWrap: true,
physics: ScrollPhysics(),
children: <Widget>[
new SizedBox(height: 20.0),
new Container(
child: new ListView.builder(
shrinkWrap: true,
itemCount: 5,
physics: ScrollPhysics(),
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('List Item',
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 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'),
),
);
},
),
),
new SizedBox(height: 20.0),
],
);
},
),
),
],
),
);
输出：
答案 3 :(得分：0)
当我使用
GridView.count(
shrinkWrap: true,
crossAxisCount: 2,
physics: ScrollPhysics(),
物理性质，它与我合作
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？