目錄

常用屬性

GridView使用配置? ? ? ?

????????GridView.count使用

????????GridView.extent使用

????????GridView.count?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 {@overrideWidget 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 {@overrideWidget 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 {@overrideWidget 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 {@overrideWidget 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 {@overrideWidget 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;}@overrideWidget 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 {@overrideWidget 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;}@overrideWidget 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 {@overrideWidget 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;}@overrideWidget 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 {@overrideWidget 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"]),],),);}@overrideWidget 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,// );
}