Flutter-GridView网格布局

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