Flutter学习第2章 ListView Widget 网格列表的使用（4）

使用场景
适合展示图片，可以很快调成自己想要的效果

1、基本结构

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{

//接收父类传入的list
final List<String> items;
MyApp({key,@required this.items}) : super(key:key);

  @override
    Widget build(BuildContext context){
      return MaterialApp(
        title: '组件学习',
        home: Scaffold(
          appBar: new AppBar(
            title: new Text(
              '组件学习'
            ),
          ),
          //网格
          body:new GridView(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 2.0,
                crossAxisSpacing: 2.0,
                childAspectRatio: 0.7
              ),
              children: <Widget>[
                  new Image.network(
                    'http://img5.mtime.cn/mt/2019/06/28/141445.67206086_185X277X4_185X277X4.jpg',
                       fit:BoxFit.cover
                       ),
                  new Image.network(
                    'http://img5.mtime.cn/mt/2019/05/31/163639.93224012_185X277X4_185X277X4.jpg',
                       fit:BoxFit.cover
                       ),
                        new Image.network(
                    'http://img5.mtime.cn/mt/2019/04/19/101038.59732288_185X277X4_185X277X4.jpg',
                       fit:BoxFit.cover
                       ),
                        new Image.network(
                    'http://img5.mtime.cn/mt/2019/05/21/110927.64276487_185X277X4_185X277X4.jpg',
                       fit:BoxFit.cover
                       ),
                        new Image.network(
                    'http://img5.mtime.cn/mt/2019/04/01/175340.68316923_185X277X4_185X277X4.jpg',
                       fit:BoxFit.cover
                       ),
                    new Image.network(
                    'http://img5.mtime.cn/mt/2019/07/17/173708.85525823_185X277X4_185X277X4.jpg',
                       fit:BoxFit.cover
                       ),
                
              ],
          )
          
          
          
          /*
          new GridView.count(
            padding: const EdgeInsets.all(20.0),//内边距 20
            crossAxisSpacing: 10.0,//网格间距
            crossAxisCount:3,//显示几行
            children: <Widget>[
              //内容
              const Text('I am Hello',),
              const Text('I am Hello1',),
              const Text('I am Hello2',),
              const Text('I am Hell3',),
              const Text('I am Hell4',),
              const Text('I am Hello5',)
            ],
          )
*/
        ),
      );
    }
}

2、 new GridView.count(）

这种方式官方已经不推荐使用

 new GridView.count(
            padding: const EdgeInsets.all(20.0),//内边距 20
            crossAxisSpacing: 10.0,//网格间距
            crossAxisCount:3,//显示几行
            children: <Widget>[
              //内容
              const Text('I am Hello',),
              const Text('I am Hello1',),
              const Text('I am Hello2',),
              const Text('I am Hell3',),
              const Text('I am Hell4',),
              const Text('I am Hello5',)
            ],
          )

网格间距的意思，其实就是左右间隔多大

显示几行的意思，就是整个屏幕里面有几行

这就是列表里面的具体内容了

3、gridDelegate: SliverGridDelegateWithFixedCrossAxisCount()
现在暂时比较流行的写法

 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,//显示几行
                mainAxisSpacing: 2.0,//上下间距
                crossAxisSpacing: 2.0,//左右间距
                childAspectRatio: 0.7//宽高比
              ),
              children: <Widget>[
                  new Image.network(
                    'http://img5.mtime.cn/mt/2019/06/28/141445.67206086_185X277X4_185X277X4.jpg',
                       fit:BoxFit.cover
                       ),
                  new Image.network(
                    'http://img5.mtime.cn/mt/2019/05/31/163639.93224012_185X277X4_185X277X4.jpg',
                       fit:BoxFit.cover
                       ),
                        new Image.network(
                    'http://img5.mtime.cn/mt/2019/04/19/101038.59732288_185X277X4_185X277X4.jpg',
                       fit:BoxFit.cover
                       ),
                        new Image.network(
                    'http://img5.mtime.cn/mt/2019/05/21/110927.64276487_185X277X4_185X277X4.jpg',
                       fit:BoxFit.cover
                       ),
                        new Image.network(
                    'http://img5.mtime.cn/mt/2019/04/01/175340.68316923_185X277X4_185X277X4.jpg',
                       fit:BoxFit.cover
                       ),
                    new Image.network(
                    'http://img5.mtime.cn/mt/2019/07/17/173708.85525823_185X277X4_185X277X4.jpg',
                       fit:BoxFit.cover
                       ),
                
              ],

• crossAxisCount: 2,//显示几行

• mainAxisSpacing: 2.0,//上下间距

• crossAxisSpacing: 2.0,//左右间距

• childAspectRatio: 0.7//宽高比

4、效果展示