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,
    // );
}
相关推荐
你听得到118 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
RaidenLiu12 小时前
Flutter Shader预热技术解析与实践指南
flutter·前端框架
ITfeib1 天前
Flutter基础
flutter
RaidenLiu1 天前
RepaintBoundary是什么?怎么用?
flutter
淹没1 天前
🚀 告别复杂的HTTP模拟!HttpHook让Dart应用测试变得超简单
android·flutter·dart
吴Wu涛涛涛涛涛Tao2 天前
Flutter 个人主页实践笔记
flutter
愿天深海2 天前
Flutter 提取图像主色调 ColorScheme.fromImageProvider
android·前端·flutter
梦想改变生活2 天前
《Flutter篇第一章》基于GetX 和 Binding、Dio 实现的 Flutter UI 架构
flutter·ui·架构
耳東陈3 天前
[重磅发布] Flutter Chen Generator 必备脚本工具
flutter