GridView.count使用
关键代码
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
static const _cityNames = ['北京', '郑州', '上海', '杭州', '北京', '上海', '泰康'];
List<Widget> _buildList() {
return _cityNames.map((city) => _item(city)).toList();
}
Widget _item(String city) {
return Container(
height: 80,
margin: EdgeInsets.all(5),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.teal),
child: Text(
city,
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('网格布局'),
),
body: Container(
height: 800,
color: Colors.white,
child: GridView.count(
crossAxisCount: 2,
children: _buildList(),
),
),
);
}
}
效果图
网格布局.gif
