Flutter GridView网格布局

简单网格布局

• main.dart代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Link World!',
        home: Scaffold(
            appBar: new AppBar(title: new Text('GridView'),),
            body: GridView.count(
              padding: const EdgeInsets.all(20.0),
              crossAxisSpacing: 10.0,   // 每个网格的间距
              crossAxisCount: 3,
              children: <Widget>[
                const Text('看书'),
                const Text('写博客'),
                const Text('王者'),
                const Text('后羿'),
                const Text('鲁班'),
                const Text('元芳'),
                const Text('赵云'),
                const Text('黄忠'),
              ],
            )
        )
    );
  }
}

效果如下：

image.png

换种写法

• main.dart代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Link World!',
        home: Scaffold(
            appBar: new AppBar(title: new Text('GridView'),),
            body: GridView(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 2.0,      // 纵轴间距
                crossAxisSpacing: 4.0,     // 横轴间距
                childAspectRatio: 0.75,     // 横竖比
              ),
              children: <Widget>[   // 时光网找的电影海报
                new Image.network('http://img5.mtime.cn/mg/2019/03/29/095612.14234221_126X190X4.jpg',fit: BoxFit.cover,),
                new Image.network('http://img5.mtime.cn/mg/2018/03/30/101318.97845092_126X190X4.jpg',fit: BoxFit.cover,),
                new Image.network('http://img5.mtime.cn/mg/2017/01/24/105507.20986123_126X190X4.jpg',fit: BoxFit.cover,),
                new Image.network('http://img5.mtime.cn/mg/2019/11/20/222359.62536108_126X190X4.jpg',fit: BoxFit.cover,),
                new Image.network('http://img5.mtime.cn/mt/2019/12/06/153112.21055685_180X260X4.jpg',fit: BoxFit.cover,),
                new Image.network('http://img5.mtime.cn/mt/2019/12/20/081536.69612356_180X260X4.jpg',fit: BoxFit.cover,),
              ],
            )
        )
    );
  }
}

效果：

image.png