Gridview实现网格布局

一 Gridview

Gridview 是Flutter中用户展示网格布局风格的widget,通常我们用GridView.count 函数来创建一个Gridview.

二 代码实现

 import 'package:flutter/material.dart';

//gridview 网格布局

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

final CITY_NAMES=['北京','上海','广州','深圳','江苏','浙江','海南','云南','大连','厦门'];

class MyApp extends StatelessWidget{
final title = '网格布局';
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: GridView.count(
crossAxisCount: 2,
children: _buildList(),

),
),
);
}

}
List _buildList() {
return CITY_NAMES.map((city)=>_item(city)).toList();
}

Widget _item(String city) {
return Container(
height: 80,
margin: EdgeInsets.only(bottom: 5,right: 5,left: 5),
decoration: BoxDecoration(color: Colors.teal),
alignment: Alignment.center,
child: Text(
city,
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 20),
),

);
}