【重要】基于GridView实现网格布局-文档和源码
来源:10-4 基于GridView实现网格布局【跟着做】

CrazyCodeBoy
2019-08-01
GridView
GridView
是flutter中用于展示网格布局风格的widget,我们通常使用GridView.count
构造函数来创建一个GridView
.
练一练
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
const CITY_NAMES = [ '北京', '上海', '广州', '深圳', '杭州', '苏州', '成都', '武汉', '郑州', '洛阳', '厦门', '青岛', '拉萨' ];
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Basic List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
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.only(bottom: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.teal),
child: Text(
city,
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
}
}
写回答
1回答
-
CrazyCodeBoy
提问者
2019-08-01
以上。
00
相似问题