Flutter入门学习--(11)表格控件GridView

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zx13525079024/article/details/86616674

  GridView是表格控件，可以指定列数，列间隙，行数根据内容自动生成

 

代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter',
        home: new GridView.count(
          primary: false,
          padding: const EdgeInsets.all(10),
          crossAxisSpacing: 10,
          crossAxisCount: 3,
          children: <Widget>[
            Image.network(
                "http://p1.so.qhmsg.com/bdr/1843__/t0101bc5934a0f24496.jpg"),
            Image.network(
                "http://p1.so.qhmsg.com/bdr/1843__/t0101bc5934a0f24496.jpg"),
            Image.network(
                "http://p1.so.qhmsg.com/bdr/1843__/t0101bc5934a0f24496.jpg"),
            Image.network(
                "http://p1.so.qhmsg.com/bdr/1843__/t0101bc5934a0f24496.jpg"),
            Image.network(
                "https://img11.360buyimg.com/babel/s190x180_jfs/t1/8477/11/13325/21045/5c418a3aEf371e16d/ee1320521435329c.jpg!q90!cc_190x180"),
            Image.network(
                "http://p1.so.qhmsg.com/bdr/1843__/t0101bc5934a0f24496.jpg"),
            Image.network(
                "https://img11.360buyimg.com/babel/s190x180_jfs/t1/8477/11/13325/21045/5c418a3aEf371e16d/ee1320521435329c.jpg!q90!cc_190x180"),
            Image.network(
                "https://img11.360buyimg.com/babel/s190x180_jfs/t1/8477/11/13325/21045/5c418a3aEf371e16d/ee1320521435329c.jpg!q90!cc_190x180"),
            Image.network(
                "https://img11.360buyimg.com/babel/s190x180_jfs/t1/8477/11/13325/21045/5c418a3aEf371e16d/ee1320521435329c.jpg!q90!cc_190x180"),
          ],
        ));
  }
}

crossAxisCount：指定列数

 crossAxisSpacing:指定内部间隙