GridView

在flutter里面，使用GridView.count可以快速的生成一个表格，其中crossAxisCount参数时必须的，用于设置他的列。

参数列表

crossAxisCount：设置每行多少列；
crossAxisSpacing：设置左右间距；
mainAxisSpacing：设置上下间距；
childAspectRatio：设置宽高比例，值为宽除以高

展示：

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "Flutter Demo",
    home: Scaffold(
      body: HomeContent(),
    ),
  ));
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
     crossAxisCount: 2,
     crossAxisSpacing: 20,
     mainAxisSpacing: 20,
     padding: EdgeInsets.all(10),
     childAspectRatio: 0.5,
     children: [
      Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.blue[200]
        ),
        child: Text("我是一条数据"),
      ),
      Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.blue[200]
        ),
        child: Text("我是一条数据"),
      ),
      Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.blue[200]
        ),
        child: Text("我是一条数据"),
      ),
      Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.blue[200]
        ),
        child: Text("我是一条数据"),
      ),
      Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.blue[200]
        ),
        child: Text("我是一条数据"),
      ),
      Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.blue[200]
        ),
        child: Text("我是一条数据"),
      )
    ]);
  }
}

image.png

试着做个商品列表

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "Flutter Demo",
    home: Scaffold(
      body: HomeContent(),
    ),
  ));
}

List goods = [
  {
    "title": '优质耳机，为发烧而生',
    "imgUrl": "https://s1.ax1x.com/2020/10/26/BuJ3ng.jpg"
  },
  {
    "title": '优质耳机，为发烧而生',
    "imgUrl": "https://s1.ax1x.com/2020/10/26/BuJ3ng.jpg"
  },
  {
    "title": '优质耳机，为发烧而生',
    "imgUrl": "https://s1.ax1x.com/2020/10/26/BuJ3ng.jpg"
  },
  {
    "title": '优质耳机，为发烧而生',
    "imgUrl": "https://s1.ax1x.com/2020/10/26/BuJ3ng.jpg"
  },
  {
    "title": '优质耳机，为发烧而生',
    "imgUrl": "https://s1.ax1x.com/2020/10/26/BuJ3ng.jpg"
  },
  {
    "title": '优质耳机，为发烧而生',
    "imgUrl": "https://s1.ax1x.com/2020/10/26/BuJ3ng.jpg"
  },
];

class HomeContent extends StatelessWidget {
  List<Widget> getList() {
    List<Widget> newList = [];
    newList = goods.map((e) {
      return Column(
        children: [
          Image.network(e["imgUrl"]),
          Text(e["title"],
          style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700),
          )
        ],
      );
    }).toList();
    return newList;
  }
  @override
  Widget build(BuildContext context) {
    return GridView.count(
     crossAxisCount: 2,
     crossAxisSpacing: 20,
     mainAxisSpacing: 40,
     padding: EdgeInsets.all(10),
     children: getList());
  }
}

image.png

当然，同ListView一样，GridView也有动态布局biluder。

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "Flutter Demo",
    home: Scaffold(
      body: HomeContent(),
    ),
  ));
}

List goods = [
  {
    "title": '优质耳机，为发烧而生',
    "imgUrl": "https://s1.ax1x.com/2020/10/26/BuJ3ng.jpg"
  },
  {
    "title": '优质耳机，为发烧而生',
    "imgUrl": "https://s1.ax1x.com/2020/10/26/BuJ3ng.jpg"
  },
  {
    "title": '优质耳机，为发烧而生',
    "imgUrl": "https://s1.ax1x.com/2020/10/26/BuJ3ng.jpg"
  },
  {
    "title": '优质耳机，为发烧而生',
    "imgUrl": "https://s1.ax1x.com/2020/10/26/BuJ3ng.jpg"
  },
  {
    "title": '优质耳机，为发烧而生',
    "imgUrl": "https://s1.ax1x.com/2020/10/26/BuJ3ng.jpg"
  },
  {
    "title": '优质耳机，为发烧而生',
    "imgUrl": "https://s1.ax1x.com/2020/10/26/BuJ3ng.jpg"
  },
];

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
       crossAxisCount: 2, //设置每行多少列
       crossAxisSpacing: 20, //设置左右间距
       mainAxisSpacing: 20  //设置上下间距
     ),
     itemCount: goods.length,
     itemBuilder: (conText, index) {
       return Column(children: [
         Image.network(goods[index]["imgUrl"]),
         Text(goods[index]["title"])
       ]);
     }
    );
  }
}

image.png

注意使用了builder会发现无法在SliverGridDelegateWithFixedCrossAxisCount里面设置padding值，这个时候有两种方法。1：在外层使用一个Container，设置它的padding值；2：可以直接使用Padding组件