一、要实现的效果
二、基于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),
),
);
}
}