1 GridView.count

import 'package:flutter/material.dart';

import 'res/listData.dart';

void main() {
  runApp(new MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  List<Widget> _getList() {
    var templist = listData.map((val) => Container(
          color: Colors.blue,
          child: Column(
            children: <Widget>[
              Image.network(val['imageUrl']),
              SizedBox(height: 12),
              Text(val['title'])
            ],
          ),
        ));
    return templist.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: GridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        childAspectRatio: 1.0,
        // children: <Widget>[
        //   Icon(Icons.ac_unit),
        //   Icon(Icons.airport_shuttle),
        //   Icon(Icons.all_inclusive),
        //   Icon(Icons.beach_access),
        //   Icon(Icons.cake),
        //   Icon(Icons.free_breakfast),
        // ],
        children: this._getList(),
      ),
    );
  }
}

2 GridView.builder

import 'package:flutter/material.dart';

import 'res/listData.dart';

void main() {
  runApp(new MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  Widget _getList(context, index) {
    return Container(
      color: Colors.orange,
      child: Column(
        children: <Widget>[
          Image.network(listData[index]['imageUrl']),
          SizedBox(height: 12),
          Text(listData[index]['title'])
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: GridView.builder(
        // crossAxisCount: 2,
        // crossAxisSpacing: 10,
        // mainAxisSpacing: 10,
        // childAspectRatio: 1.0,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
        itemCount: listData.length,
        itemBuilder: this._getList,
      ),
    );
  }
}

参考：