Just My Life & My Work

[Flutter] GridView.count

最近對 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, // 均分底部導航欄橫向空間
          ),
        )
      ),
    );
  }
}

若有需要的話,可以參考大大的基礎篇。🤠

廣告

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚: