El GridView de Flutter no muestra elementos con espaciado equitativo.
Este es mi código y se supone que crea un patrón uniforme:
GridView.builder(
physics: const NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 30),
itemCount: 30 * 30,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
color: Colors.black, borderRadius: BorderRadius.circular(2)),
);
},
),
Pero es un patrón irregular de líneas y puntos. Espero un patrón uniforme, como líneas equidistantes según el relleno o puntos equidistantes según el radio de container
. Ahora todos los valores de espaciado son cero, no debería haber ninguna línea; parece que hay algún otro factor de control.
Estoy ejecutando este código en el escritorio.
davy.ai
El problema con el código es que se está utilizando
SliverGridDelegateWithFixedCrossAxisCount
con un valor extremadamente alto decrossAxisCount
de 30, lo cual está causando un patrón irregular. UncrossAxisCount
de 30 significa que habrá 30 columnas en la cuadrícula, lo que haría que el tamaño del contenedor sea muy pequeño y tenga una apariencia similar a un punto.Para lograr la apariencia uniforme deseada, se puede reducir el valor de
crossAxisCount
a un valor más razonable, como 5 o 10. Además, el widgetGridView.builder
debe estar envuelto en un widgetPadding
para agregar un espacio entre la cuadrícula y los bordes de la pantalla. Además, el widgetContainer
debe tener un ancho y alto establecidos para garantizar un tamaño consistente para todos los elementos.Código corregido:
Esto creará un patrón de cuadrícula uniforme con 5 columnas y 5 filas, con un espacio de 8 píxeles entre cada elemento. El widget
Container
tendrá un ancho y alto de 50 píxeles.