首先需要一個滾動頁面

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Wrap(
            children: <Widget>[
              
            ],
          ),
        ),
      ),
    );

按照文檔編寫ListView和GridView

class Lists extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          title: Text(
            "我是列表第一項",
            style: TextStyle(color: Colors.red),
          ),
        ),
        ListTile(
          title: Text(
            "我是列表第二項",
            style: TextStyle(color: Colors.yellow),
          ),
        ),
        ListTile(
          title: Text(
            "我是列表第三項",
            style: TextStyle(color: Colors.blue),
          ),
        )
      ],
    );
  }
}

class GridViews extends StatelessWidget {
  List<Widget> _getList() {
    List<Widget> list = new List();
    for (var i = 0; i < 20; i++) {
      list.add(Container(
        alignment: Alignment.center,
        color: Colors.blue.shade50,
        child: Text(
          "第${i + 1}條數(shù)據(jù)",
          style: TextStyle(color: Colors.red, fontSize: 20),
        ),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      mainAxisSpacing: 5, //垂直間距
      crossAxisSpacing: 10, //水平間距
      padding: EdgeInsets.all(10),
      childAspectRatio: 2, //寬高比例
      children: _getList(),
    );
  }
}

把ListView和GridView引入頁面

body: SingleChildScrollView(
        child: Center(
          child: Wrap(
            children: <Widget>[
              Lists(),
              GridViews(),
            ],
          ),
        ),
      ),

保存，恭喜你押袍，喜提報錯

Cannot hit test a render box that has never been laid out.
當ListView殴俱、GridView作為Wrap政冻、Column等組件的子組件時枚抵，若外部沒有設(shè)置高度，則會產(chǎn)生此報錯明场。

若需求高度能夠自適應(yīng)

解決放案：為ListView汽摹、GridView設(shè)置屬性 shrinkWrap: true,

return GridView.count(
      crossAxisCount: 3,
      mainAxisSpacing: 5, //垂直間距
      crossAxisSpacing: 10, //水平間距
      padding: EdgeInsets.all(10),
      childAspectRatio: 2, //寬高比例
      shrinkWrap: true,
      children: _getList(),
    );

刷新后，報錯消失苦锨，但是發(fā)現(xiàn)其只可內(nèi)部滾動逼泣。

若要使其更隨外部頁面整體滾動，為其設(shè)置屬性：physics: NeverScrollableScrollPhysics(),

return GridView.count(
      crossAxisCount: 3,
      mainAxisSpacing: 5, //垂直間距
      crossAxisSpacing: 10, //水平間距
      padding: EdgeInsets.all(10),
      childAspectRatio: 2, //寬高比例
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      children: _getList(),
    );

至此舟舒，需求達成拉庶。
參考http://www.reibang.com/p/60abecfdc51d