點燈坊

失くすものさえない今が強くなるチャンスよ

GridView 顯示水平清單 (Count)

Sam Xiao's Avatar 2024-11-19

GridView 適合顯示水平清單，且自動根據目前寬度換行。

Version

Flutter 3.24

Flutter

count01

  • Android 與 iOS 都成功使用 GridView 實現水平清單

GridView

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _Home();
}

class _Home extends State<Home> {
  final List<String> _data = List.generate(
    8,
    (index) => 'Item ${index + 1}',
  );

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(
      title: const Text('GridView.count'),
    );

    var gridTile = _data.map(
      (item) {
        return Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(8),
          ),
          child: Text(
            item,
            style: const TextStyle(
              color: Colors.white,
            ),
          ),
        );
      },
    ).toList();

    var gridView = GridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 8.0,
      crossAxisSpacing: 8.0,
      childAspectRatio: 2,
      children: gridTile,
    );

    var body = Padding(
      padding: const EdgeInsets.all(8.0),
      child: gridView,
    );
    return Scaffold(
      appBar: appBar,
      body: body,
    );
  }
}

Line 11

final List<String> _data = List.generate(
  8,
  (index) => 'Item ${index + 1}',
);
  • List.generate()：產生 8 筆 List 假資料

Line 41

var gridView = GridView.count(
  crossAxisCount: 2,
  mainAxisSpacing: 8.0,
  crossAxisSpacing: 8.0,
  childAspectRatio: 2,
  children: gridTile,
);
  • GridView.count()：建立 GridView
    • crossAxisCount：設定橫軸顯示個數
    • mainAxisSpacing：設定縱軸間距
    • crossAxisSpacing：設定橫軸間距
    • childAspectRatio：設定項目的長寬比例
    • children：設定子項目

GridView 的 mainAxis 為 縱軸，crossAxis 為 橫軸

Line 22

var gridTile = _data.map(
  (item) {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(
        item,
        style: const TextStyle(
          color: Colors.white,
        ),
      ),
    );
  },
).toList();
  • map()：將 List 轉成 GridView 的子項目

Conclusion

  • 當使用 GridView.count() 建立 GridView 時，一定要設定 crossAxisCount 設定橫軸顯示個數

# Flutter