Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.
Les columnes són uns ginys que ens permeten situar elements uns sota els altres. Cada columna tindrà, normalment, dos o més descendents. En aquest cas, hi ha tres descendents de text:
class Columna extends StatelessWidget {
const Columna({super.key});
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Text("Primera línia de text"),
Text("Segona línia de text"),
Text("Tercera línia de text"),
],
);
}
}
Les columnes, com tots els ginys, poden ser sensibles a les accions de l'usuari si els tanquem dins d'un detector d'accions.
Cal tenir present que les columnes no preveuen el desplaçament per la pantalla i, per tant, cal que tots els elements hi entrin. En tot cas, però, poden quedar components amagats si. per exemple, es mostra el teclat. El visor de llista és un empaquetador que es comporta de manera similar a la columna però sí permet el desplaçament.
Si volem posar un element dins d'una columna, hi ha una manera ràpida per fer-ho. Per posar l'element dins de la columna, podríem marcar el nom de l'element, picar a sobre amb el botói dret i triar Refactor.... Triaríem Wrap with Column i ja ens ho posaria automàticament a dins; només faltaria ajustar les propietats que necessitem.
Aquesta classe normalment estaria en un fitxer (que podem anomenar column.dart) a la carpeta layouts. Una columna és un giny (widget) sense estat. En el fitxer podem començar a escriure stl i ja ens sortiran diverses opcions, en aquest cas triarem StatelessWidget i el sistema ja ens generarà automàticament les instruccions bàsiques d'un element d'aquest tipus.
Com veiem, hi podem posar un paràmetre que defineixi com s'ha d'alinear el text dins de la columna o quina alçada ha de tenir.
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.