Flutter之使用GridView实现网格布局

最新推荐文章于 2023-11-07 10:14:10 发布

wanxiaofan

最新推荐文章于 2023-11-07 10:14:10 发布

阅读量436

点赞数

分类专栏： Flutter 文章标签： flutter html css

本文链接：https://blog.youkuaiyun.com/wanxiaofan/article/details/120038250

版权

一、效果

二、实现

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(
          cross