Just My Life & My Work

[Flutter] GridView Widget

我很常使用 IG 來張貼自己的生活美食照片,IG 在個人頁面是以一列三行的方式排列。在 iOS 這樣的排列元件叫做 CollectionView,而在 Flutter 中則叫為 GridView。

以類似 Instagram 排列方式呈現

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 屬性中。

參考:

GridView class

【Flutter 程式設計入門實戰 30 天】Day 25:GridView 網格元件

隨意留個言吧:)~

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

WordPress.com 標誌

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

Twitter picture

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

Facebook照片

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

連結到 %s

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

標籤雲

%d 位部落客按了讚: