es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El GridView de Flutter no muestra elementos con espaciado equitativo.

13 Jul, 2023 Programación

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.

Imagen

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código es que se está utilizando SliverGridDelegateWithFixedCrossAxisCount con un valor extremadamente alto de crossAxisCount de 30, lo cual está causando un patrón irregular. Un crossAxisCount 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 widget GridView.builder debe estar envuelto en un widget Padding para agregar un espacio entre la cuadrícula y los bordes de la pantalla. Además, el widget Container debe tener un ancho y alto establecidos para garantizar un tamaño consistente para todos los elementos.

    Código corregido:

    Padding(
  padding: EdgeInsets.all(16.0),
  child: GridView.builder(
    physics: const NeverScrollableScrollPhysics(),
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 5,
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0),
    itemCount: 5 * 5,
    itemBuilder: (context, index) {
      return Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
            color: Colors.black,
            borderRadius: BorderRadius.circular(2)),
      );
    },
  ),
)

    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.

Comments are closed.