Flutter GridView网格组件

目录

常用属性

GridView使用配置

GridView.count使用

GridView.extent使用

[GridView.count Container 实现列表](#GridView.count Container 实现列表)

[GridView.extent Container 实现列表](#GridView.extent Container 实现列表)

GridView.builder使用

---

GridView网格布局在实际项目中用的也是非常多的，当我们想让可以滚动的元素使用矩阵方式排列的时候。此时我们可以用网格列表组件GridView实现布局。

GridView创建网格列表主要有下面三种方式

1、可以通过GridView.count实现网格布局

2、可以通过GridView.extent 实现网格布局

3、通过GridView.builder实现动态网格布局

常用属性

GridView使用配置

GridView.count使用

import 'package:flutter/material.dart';

void main() {
  runApp(MyTestApp());
}

class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("App")),
        body: MyTestHomePage(),
      ),
    );
  }
}

//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return GridView.count(crossAxisCount: 4, //一行显示的
      children: [
        Image.asset("assets/images/iv_account_selected.png"),
        Icon(Icons.abc_rounded),
        Icon(Icons.abc_sharp),
        Icon(Icons.factory),
    ]);
  }
}

GridView.extent使用

import 'package:flutter/material.dart';

void main() {
  runApp(MyTestApp());
}

class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("App")),
        body: MyTestHomePage(),
      ),
    );
  }
}

//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 180, //横轴子元素的最大长度
      children: [
        Icon(Icons.abc_rounded),
        Icon(Icons.abc_sharp),
        Icon(Icons.factory),
      ],
    );
  }
}

GridView.count Container 实现列表

import 'package:flutter/material.dart';

void main() {
  runApp(MyTestApp());
}

class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("App")),
        body: MyTestHomePage(),
      ),
    );
  }
}

//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {
 
  List<Widget> initList() {
    List<Widget> list = [];
    for (var i = 0; i < 10; i++) {
      list.add(
        Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(color: Colors.blue),
          child: Text("第$i个元素", style: TextStyle(fontSize: 20)),
        ),
      );
    }
    return list;
  }
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.all(10),
      crossAxisSpacing: 10, //水平间距
      mainAxisSpacing: 10, //垂直间距
      crossAxisCount: 2, //一行显示多少个元素
      childAspectRatio: 0.7,//宽高的比例
      children: initList(),
    );
  }
}

GridView.extent Container 实现列表

import 'package:flutter/material.dart';

void main() {
  runApp(MyTestApp());
}

class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("App")),
        body: MyTestHomePage(),
      ),
    );
  }
}

//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {
 
  List<Widget> initList() {
    List<Widget> list = [];
    for (var i = 0; i < 10; i++) {
      list.add(
        Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(color: Colors.blue),
          child: Text("第$i个元素", style: TextStyle(fontSize: 20)),
        ),
      );
    }
    return list;
  }
  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      padding: EdgeInsets.all(10),
      crossAxisSpacing: 10, //水平间距
      mainAxisSpacing: 10, //垂直间距
      maxCrossAxisExtent: 120,//横轴子元素的最大长度 动态计算
      //childAspectRatio: 0.7,//宽高的比例
      children: initList(),
    );
  }
}

map循环遍历数据，通过Container渲染

import 'package:flutter/material.dart';

void main() {
  runApp(MyTestApp());
}

class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("App")),
        body: MyTestHomePage(),
      ),
    );
  }
}

//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {

  List<Widget> initList() {
    List<Widget> list = [];
    for (var i = 0; i < 10; i++) {
      list.add(
        Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(color: Colors.blue),
          child: Column(children: [
            Image.network("https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg"),
            Text("第$i元素"),
          ]),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
  

    return GridView.extent(
      padding: EdgeInsets.all(10),
      crossAxisSpacing: 10,
      //水平间距
      mainAxisSpacing: 10,
      //垂直间距
      maxCrossAxisExtent: 120,
      //横轴子元素的最大长度
      childAspectRatio: 1,
      //宽高的比例
      children: initList(),
    );
  }
}

GridView.builder使用

import 'package:flutter/material.dart';

void main() {
  runApp(MyTestApp());
}

class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.yellow),
      home: Scaffold(
        appBar: AppBar(title: Text("App")),
        body: MyTestHomePage(),
      ),
    );
  }
}

//Material Design官方Icons图标
class MyTestHomePage extends StatelessWidget {
  List list = [
    {
      "title": "Candy Shop",
      "imageUrl":
          "https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg",
      "author": "Mohamed Chahin",
    },
    {
      "title": "Zhao Shop",
      "imageUrl":
          "https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg",
      "author": "Mohamed Chahin",
    },
    {
      "title": "Fei Shop",
      "imageUrl":
      "https://p4.img.cctvpic.com/photoAlbum/photo/2025/05/27/PHOT1cFfxozsH6VncGwLpViz250527_1000x2000.jpg",
      "author": "Mohamed Chahin",
    },
  ];

  Widget initList(context,index) {

   return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.blue),
      child: Column(
        children: [
          Image.network(list[index]["imageUrl"]),
          Text(list[index]["title"]),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: EdgeInsets.all(10),
      itemCount: list.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        childAspectRatio: 1,
      ),
      itemBuilder: initList
    );
  }

  // return GridView.builder(
    //   padding: EdgeInsets.all(10),
    //   itemCount: list.length,
    //   gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    //     maxCrossAxisExtent: 200,
    //     crossAxisSpacing: 10,
    //     childAspectRatio: 1,
    //   ),
    //   itemBuilder: initList,
    // );
}