Flutter之使用GridView实现网格布局

一、效果

 二、实现

        1、创建GridView.count为body子元素

        2、设置crossAxisCount设置列数

        3、设置children即为每个子View

三、源码

class UserPage extends StatefulWidget {
  const UserPage({Key key}) : super(key: key);

  @override
  _UserPageState createState() => _UserPageState();
}

const citys = [
  "北京",
  "北京",
  "上海",
  "北京",
  "广东",
  "深圳",
  "北京",
  "杭州",
  "北京",
  "苏州",
  "北京",
  "苏州",
  "武汉",
  "苏州",
  "郑州",
  "天津"
];

class _UserPageState extends State<UserPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "网格布局",
      home: Scaffold(
        body: GridView.count(
          crossAxisCount: 3,
          children: _buidList(),
        ),
      ),
    );
  }

  List<Widget> _buidList() {
    return citys.map((city) => _item(city)).toList();
  }

  Widget _item(String city) {
    return Container(
      child: Text(
        city,
      ),
      alignment: Alignment.center,
      margin: EdgeInsets.only(bottom: 3,right: 1),
      height: 80,
      decoration: BoxDecoration(color: Colors.lightBlueAccent),

    );
  }
}