Flutter页面布局之GridView

简介：GridView是Flutter中用于展示网格布局的widget，我们通常使用GridView.count构造函数来创建一个GridView

demo：

import 'package:flutter/material.dart';


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

const CITY_NAMES = {
  '北京':['东城区','西城区','海淀区','朝阳区','石景山区','顺义区'],
  '上海':['黄浦区','徐汇区','长宁区','静安区','普陀区','闸北区'],
  '广州':['越秀','海珠','荔湾','天河','白云','黄埔','南沙'],
  '深圳':['南山','福田','罗湖','盐田','龙岗','宝安','龙华'],
  '杭州':['上城区','下城区','江干区','拱墅区','西湖区','滨江区'],
  '苏州':['姑苏区','吴中区','相城区','高新区','虎丘区','工业园区','吴江区'],
};

class MyApp extends StatelessWidget {



  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("网格布局"),
        ),
        //crossAxisCount 每行显示的个数
        body: GridView.count(crossAxisCount: 2,children: _buildList(),)
      ),

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