在列表视图中颤动网格视图

我想构建像 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, set shrinkWrap为真但没有工作。 我一直在寻找但仍然无法弄清楚。 谁知道怎么修它？

EDIT:

 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里面一个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.