最近對 Flutter 開始感興趣，研究起來格外順暢，也許是因為我本身開發 iOS App，所以背景知識技術足夠跨越門檻。
這篇來展示我學習 GridView.count 的紀錄，實際上功能很類似 iOS 的 Collection View，GridView.count 在用法比較容易實作，真的很快！
開發階段，我還可以透過 Chrome 來 debug，比起要花時間編譯到實機或模擬器，Chrome 跑起來奇快無比呢～看來有 Google 老大哥扶持，很多事情都被簡化囉～😁
先來看一下我實現的畫面～
廣告
我們直接來看程式碼，除了 GridView.count 外，其他的部分也能稍微學習一下～
來展示 100 個 Grid（List.generate），以三個欄位往下排列（crossAxisCount）。點擊 Grid 會列印文字到 Console。
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
debugPaintSizeEnabled = false;
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.amber,
),
home: Scaffold(
appBar: AppBar(
title: Text('HappyMan Demo'),
leading: Builder(builder: (context) {
return IconButton(
icon: Icon(Icons.dashboard, color: Colors.white),
onPressed: () {
Scaffold.of(context).openDrawer();
},
);
}),
),
drawer: Drawer(),
body: GridView.count(
crossAxisCount: 3,
children: List.generate(100, (index) {
return Card(
child: GestureDetector(
child: Container(
color: Colors.lightGreen,
child: Text('Index $index'),
),
onTap: () {
print('$index $index');
},
),
);
}),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
print('飄浮球～');
},
),
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: CircularNotchedRectangle(), // 底部導航欄打一個圓形的洞
child: Row(
children: [
IconButton(icon: Icon(Icons.home)),
SizedBox(), // 中間位置空出來
IconButton(icon: Icon(Icons.star)),
],
mainAxisAlignment: MainAxisAlignment.spaceAround, // 均分底部導航欄橫向空間
),
)
),
);
}
}
若有需要的話，可以參考大大的基礎篇。🤠
廣告
逍遙文工作室 
隨意留個言吧：）～