网格布局 - 爱码网

一、要实现的效果

网格布局

二、基于GridView实现网格布局

GridView是flutter中用于展示网格布局风格的widget，通常使用GridView.count构造函数来创建一个GridView

使用方式:

GridView.count可以用来控制一行显示几列

通过在GridView.count()函数中设置crossAxisCount来设置一行显示多少列，同时GridView.count接收一个children参数，该参数调用了方法_buildList()

_buildList()通过遍历city的数组生成item的数组

在_item()里面，定义了每个item的高度、item底部的边距、里面内容的居中方式以及item的装饰器

网格布局

三、

添加网格布局

网格布局

四、代码：


import 'package:flutter/material.dart';

const CITY_NAMES=['东城区','西城区','朝阳区','丰台区','石景山区','海淀区','顺义区'];

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


class MyGridViewApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyGridViewApp> {
  String countString = '';
  String localCount = '';
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: Text('网格布局')),
          body: GridView.count(
            crossAxisCount: 2,      //每行显示两列
            children:_buildList(),
    ),
    ));
  }

  List<Widget> _buildList() {
    return CITY_NAMES.map((city)=>_item(city)).toList();
  }
  
  Widget _item(String city){
    return Container(
      height: 80,
      margin: EdgeInsets.all(5),
      decoration: BoxDecoration(color: Colors.teal),
      child: Text(
        city,
        style: TextStyle(color:Colors.white,fontSize: 20),
      ),
    );
  }

}