GridView.count(
      //必传参数,一行分为几列的意思
      crossAxisCount: 2,
      children: <Widget>[
        Text("我是文本"),
        Text("我是文本"),
        Text("我是文本"),
        Text("我是文本"),
        Text("我是文本"),
        Text("我是文本"),
        Text("我是文本"),
        Text("我是文本"),
        Text("我是文本"),
        Text("我是文本"),
        Text("我是文本"),
      ],
    );

效果图:

2:子wedget水平方向的距离 crossAxisSpacing:20,代表子组件之间的水平距离为20

class MyGridView extends StatelessWidget {

  List<Widget> _getData(){
    List<Widget> list =new List();
    for (var i = 0; i < 20; i++) {
      list.add(
        Container(
          color:Colors.blue,
          alignment: Alignment.center,
          child: Text("我是第$i个数据",style: TextStyle(fontSize: 15,color: Colors.white),),
          )
      );
    }
   return list;
  }

  ///网格布局
  ///
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //必传参数,一行分为几列的意思
      crossAxisCount: 3,
      //子widget之间的水平方向距离
      crossAxisSpacing: 20,

      children: _getData(),
    );
  }
}

效果图:

3:垂直子widget的距离  mainAxisSpacing: 20,

class MyGridView extends StatelessWidget {

  List<Widget> _getData(){
    List<Widget> list =new List();
    for (var i = 0; i < 20; i++) {
      list.add(
        Container(
          color:Colors.blue,
          alignment: Alignment.center,
          child: Text("我是第$i个数据",style: TextStyle(fontSize: 15,color: Colors.white),),
          )
      );
    }
   return list;
  }

  ///网格布局
  ///
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //必传参数,一行分为几列的意思
      crossAxisCount: 3,
      //子widget之间的水平方向距离
      crossAxisSpacing: 20,
      //子widget主轴(垂直)之间的距离
      mainAxisSpacing: 20,
      children: _getData(),
    );
  }
}

效果图:

4:控制子widget的宽高

  注意在这个布局下子widge的高度没办法控制,他是受子widget里面的元素自动控制的,

  但是可以通过GridView给我们提供的childAspectRatio参数调整宽高比

  宽高比比较绕,比如:childAspectRatio:0.5 我自己的理解是 宽度是高度的 0.5 以此来慢慢调整子widget的大小

class MyGridView extends StatelessWidget {

  List<Widget> _getData(){
    List<Widget> list =new List();
    for (var i = 0; i < 20; i++) {
      list.add(
        Container(
          color:Colors.blue,
          alignment: Alignment.center,
          child: Text("我是第$i个数据",style: TextStyle(fontSize: 15,color: Colors.white),),
          )
      );
    }
   return list;
  }

  ///网格布局,
  ///注意在这个布局下子widge的高度没办法控制,他是受子widget里面的元素自动控制的,
  ///但是可以通过GridView给我们提供的childAspectRatio参数调整宽高比
  ///宽高比比较绕,比如:childAspectRatio:0.5 我自己的理解是 宽度是高度的 0.5 以此来慢慢调整子widget的大小
  ///
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //必传参数,一行分为几列的意思
      crossAxisCount: 3,
      //子widget之间的水平方向距离
      crossAxisSpacing: 20,
      //子widget主轴(垂直)之间的距离
      mainAxisSpacing: 20,
      //内边距
      padding: EdgeInsets.all(20),
      //设置子widget的宽高比
      childAspectRatio: 0.5,
      children: _getData(),
    );
  }
}

效果图:

5: 循环渲染GridView

class MyGridView extends StatelessWidget {

//定义数据
 List listData=[
      {
        "title":"生态文明思想在福建木兰溪的先行探索",
        "imageurl":"https://inews.gtimg.com/newsapp_ls/0/11071505202_640330/0"
      },
        {
        "title":"反差：内地去香港的人骤减 香港来内地的人增多",
        "imageurl":"https://inews.gtimg.com/newsapp_ls/0/11069411689_640330/0"
      }
      ,
        {
        "title":"南山集团69亿打包出售青岛航空，青岛政府接盘",
        "imageurl":"https://inews.gtimg.com/newsapp_ls/0/11072149544_580328/0"
      }
      ,
        {
        "title":"灰熊5人上双终结雷霆四连胜 瓦兰21分保罗空砍23+11",
        "imageurl":"https://inews.gtimg.com/newsapp_ls/0/11070284356_580328/0"
      }
      ,
        {
        "title":"前几天，我家的智能音箱劝我自杀",
        "imageurl":"https://inews.gtimg.com/newsapp_ls/0/11067642200_580328/0"
      }
      ,
        {
        "title":"本年度重磅SUV盘点，奔驰GLS、宝马X7、奥迪Q8都是硬货",
        "imageurl":"https://inews.gtimg.com/newsapp_ls/0/11070425369_580328/0"
      }
    ];

    //循环数据库
  List<Widget> _getData(){
    var temp = listData.map((value){
        return Container(
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Image.network(value["imageurl"]),
              Text(value["title"])
            ],
            ),
        );
    });
    
   return temp.toList();
  }

  ///网格布局,
  ///注意在这个布局下子widge的高度没办法控制,他是受子widget里面的元素自动控制的,
  ///但是可以通过GridView给我们提供的childAspectRatio参数调整宽高比
  ///宽高比比较绕,比如:childAspectRatio:0.5 我自己的理解是 宽度是高度的 0.5 以此来慢慢调整子widget的大小
  ///
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //必传参数,一行分为几列的意思
      crossAxisCount: 2,
      //子widget之间的水平方向距离
      crossAxisSpacing: 10,
      //子widget主轴(垂直)之间的距离
      mainAxisSpacing: 10,
      //内边距
      padding: EdgeInsets.all(10),
      //设置子widget的宽高比
      //childAspectRatio: 0.5,
      children: _getData(),
    );
  }
}

效果图: