我想像
Ios app store一样构建设计,如下图所示.
我想要实现的是有5个顶级类别,每个类别都有显示图像的网格.
我试过这样的.
我想要实现的是有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,new SizedBox(height: 5.0),new GridView.builder(
shrinkWrap: true,scrollDirection: Axis.horizontal,itemCount: 10,gridDelegate:
new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4),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());
},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,new Padding(padding: const EdgeInsets.only(right: 5.0)),new Text('TOP5',style:
new TextStyle(color: Colors.white,fontSize: 23.0)),new Container(
child: new ListView.builder(
shrinkWrap: true,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,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);
},);
},);
},);
解决方法
您可以尝试在垂直滚动列表中使用水平滚动列表来轻松实现此类布局.
在你的水平列表和垂直列表中
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
....
....
);
