我很常使用 IG 來張貼自己的生活美食照片，IG 在個人頁面是以一列三行的方式排列。在 iOS 這樣的排列元件叫做 CollectionView，而在 Flutter 中則叫為 GridView。
GridView Widget 相當好實現，比原生容易太多。🤠
來看一下一次建立所有介面的寫法：
/*
Author: HappyMan
Date: 2022/02/14
Topic: GridView Class
*/
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final List<String> entryList = <String>['A', 'B', 'C', 'D', 'E', 'F'];
final List<int> colorList = <int>[600, 500, 400, 300, 200, 100];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Happy Grid View'),
),
body: GridView.count(
primary: false,
padding: const EdgeInsets.all(30),
crossAxisSpacing: 10,
mainAxisSpacing: 5,
crossAxisCount: 3,
children: <Widget>[
for(int i = 0; i < entryList.length; i++)
Container(
padding: EdgeInsets.all(20),
child: Text(entryList[i]),
color: Colors.amber[colorList[i]],
),
],
),
),
);
}
}
執行後呈現如上截圖。
接著我們想要顯示時再建立介面，而且可以無限個介面。
/*
Author: HappyMan
Date: 2022/02/14
Topic: GridView Class
*/
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final List<String> entryList = <String>['A', 'B', 'C', 'D', 'E', 'F'];
final List<int> colorList = <int>[600, 500, 400, 300, 200, 100];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Happy Grid View'),
),
body: GridView.builder(
primary: false,
padding: const EdgeInsets.all(30),
itemCount: entryList.length,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(20),
child: Text(entryList[index]),
color: Colors.amber[colorList[index]],
);
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 5,
),
),
),
);
}
}
GridView.builder 顯示效果如上一個例子 GridView.count 一模一樣，差別在於設定值是在 gridDelegate 屬性中。
參考：
逍遙文工作室 
隨意留個言吧：）～