Flutter学习-网格列表

//引入库
import 'package:flutter/material.dart';

//主函数
void main() => runApp(MyApp());

//类，继承无状态组件
class MyApp extends StatelessWidget {
  //重写函数
  @override
  //返回值为Widget类型
  Widget build(BuildContext context) {
    //对应函数类型返回值
    return MaterialApp(
      //dart结构，title和home
      title: 'flutter study',
      //home，故用脚手架
      home: Scaffold(
          //顶上一个appBar
          appBar: AppBar(
            title: Text('GridView Study'),
          ),
          //中间是身体
          //GridView网格列表组件
          body: GridView(
            padding: const EdgeInsets.all(5.0), //内边距
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,  //横向最大排列数
                mainAxisSpacing: 15.0,  //纵向间距
                crossAxisSpacing: 5.0,  //横向间距
                childAspectRatio: 0.7   //宽高比
            ),
            children: <Widget>[
              new Image.network(
                  'http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',
                  fit: BoxFit.cover),
              new Image.network(
                  'http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',
                  fit: BoxFit.cover),
            ],
          )),
    );
  }
}

运行效果：