GridView widget

A GridView widgettel tudunk a képernyőn rács szerűen tartalmat megjeleníteni. A legegyszerűbb rács tipikusan két oszlopból és több sorból áll.

Használat

A GridView a material.dart része, tehát az első rész a jó öreg import:

import 'package:flutter/material.dart';

Kézenfekvő lehet egy Scaffold widget body tulajdonságában megadni, ahová a képernyő tartalma kerül:

body: GridView.builder(gridDelegate: gridDelegate, itemBuilder: itemBuilder)

Van egy builder konstruktor metódusa, ami lehetővé teszi, hogy a gridet dinamikusan építsük fel abban az esetben például, ha egy sok elemet számláló rácsot akarunk megjeleníteni. (Aminek elemei nem férnek el egyszerre a képernyőn.)

Akkor, ha relatíva kevés kategória van, akkor elég a konstruktor nélkül példányosítani a GridView-t, és ebben az esetben a children paraméterben tudjuk megadni a rács tartalmát:

body: GridView(children: [])

Amit nem úszunk meg semmiképp sem, az a gridDelegate paraméter megadása, ami a rács elrendezést vezérli:

GridView(
  gridDelegate:,
  children: []
)

A gridDelegate felhoz egy listát a lehetséges értékekkel:

Ami közül például ezt az extra hosszút ki is választottam:

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: crossAxisCount),

Ezzel gyakorlatilag meg tudjuk adni az oszlopok számát a crossAxisCount paraméterrel. De nem csak ezt az egy paramétert lehet megadni:

GridView(
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      childAspectRatio: 3 / 2,
      crossAxisSpacing: 20,
      mainAxisSpacing: 20,
    ),

A childAspectRatio-val lehet meghatározni egy rács cella szélesség / magasság arányát. A crossAxisSpacing határozza meg a cellák közötti távolságot vízszintesen. A mainAxisSpacing pedig ugyanezt teszi függőlegesen.

A teljes grid, aminek elemei is vannak, igaz kissé puritánul csak Text widget-ek:

GridView(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 3 / 2,
    crossAxisSpacing: 20,
    mainAxisSpacing: 20,
  ),
  children: const [
    Text('1', style: TextStyle(color: Colors.white)),
    Text('2', style: TextStyle(color: Colors.white)),
    Text('3', style: TextStyle(color: Colors.white)),
    Text('4', style: TextStyle(color: Colors.white)),
    Text('5', style: TextStyle(color: Colors.white)),
    Text('6', style: TextStyle(color: Colors.white)),
  ],
),

És így néz ki a rács működés közben:

Az app egy kissé komolyabb fázisában már jól látszanak azok a rács elemek:

És amikor megadjuk a paddingot is, mert a GridView-nak van padding tulajdonsága is:

GridView(
  padding: const EdgeInsets.all(24),