【杭州校区】flutter中GridView网格列表组件 - 黑马程序员技术交流社区

列表组件已经学会了，那还有一种常用的列表，叫做网格列表。网格列表经常用来显示多张图片，比如我们经常使用的手机里的相册功能，大部分形式都是网格列表。

我们先不做一个相册的应用，而是使用文字，作一个最简单的网格列表，目的是先熟悉一下GridView的基本语法，代码如下：

[AppleScript] 纯文本查看 复制代码

import 'package:flutter/material.dart';

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



class MyApp extends StatelessWidget{

  @override

  Widget build(BuildContext context ){

      return MaterialApp(

        title:'ListView widget',

        home:Scaffold(

          body:GridView.count(

            padding:const EdgeInsets.all(20.0),

            crossAxisSpacing: 10.0,

            crossAxisCount: 3,

            children: <Widget>[

              const Text('I am Jspang'),

              const Text('I love Web'),

              const Text('jspang.com'),

              const Text('我喜欢玩游戏'),

              const Text('我喜欢看书'),

              const Text('我喜欢吃火锅')

            ],

          )

        ),

      );

  }

}

我们在body属性中加入了网格组件，然后给了一些常用属性:

加入文字作网格列表总是怪怪的，也不是很直观，我们利用图片来作一些网格列表。当然我们用一种更原生的方法，现在官方已经不鼓励使用这种方法了，但是为了你碰到时，不至于不知道怎么回事，所以我们作一下这种形式，但主要是为了作图片布局。

[AppleScript] 纯文本查看 复制代码

import 'package:flutter/material.dart';

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



class MyApp extends StatelessWidget{

  @override

  Widget build(BuildContext context ){

      return MaterialApp(

        title:'ListView widget',

        home:Scaffold(

          body:GridView(

            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

            crossAxisCount: 3,

              mainAxisSpacing: 2.0,

              crossAxisSpacing: 2.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),

           

            ],

          )

        ),

      );

  }

}