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,
    // );
}
相关推荐
wuhanwhite14 小时前
Flutter Release 打包后插件失效问题排查与解决(实战分享)
flutter
BG15 小时前
Flutter Svg转Path对象,path.getBounds()获取测量信息不准问题记录
flutter
MaoJiu15 小时前
Flutter中实现Hero Page Route效果
flutter
神经骚栋15 小时前
Flutter面试题01-Flutter中的三棵树
flutter·面试
小严家2 天前
Flutter完整开发指南 | Flutter&Dart – The Complete Guide
开发语言·flutter
倾云鹤2 天前
flutter实现Function Call
flutter·llm·function call
程序员老刘·2 天前
Flutter版本选择指南:避坑3.27 | 2025年9月
flutter·跨平台开发·客户端开发
懒得不想起名字2 天前
Flutter二维码的生成和扫描
flutter
鹏多多2 天前
flutter-详解控制组件显示的两种方式Offstage与Visibility
前端·flutter