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.

¿Cómo cambiar el formato de vista de lista a vista de cuadrícula en Flutter?

23 Jul, 2023 Programación

Estoy creando una aplicación de quiz pero las opciones están en formato de lista. Sin embargo, quiero las opciones en formato de cuadrícula.

... (_questions[_questionIndex]['answers']
                como List>)
            .map(
          (respuesta) => Respuesta(
            textoRespuesta: respuesta['textoRespuesta'],
            colorRespuesta: respuestaSeleccionada
                ? respuesta['puntuación']
                    ? Colors.green
                    : Colors.red
                : null,
            respuestaTap: () {
              // si la respuesta ya fue seleccionada, no ocurre nada en onTap
              si (respuestaSeleccionada) {
                retornar;
              }

Mis opciones están en este formato:
Formato actual de opciones

Pero quiero que estén en formato de 2*2 (2 filas y 2 columnas).

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar las opciones en una vista de cuadrícula con 2 filas y 2 columnas, puedes sustituir el widget de lista (ListView) por un widget de cuadrícula (GridView) en el código. Aquí te explico cómo:

    1. Reemplaza el widget ListView por un widget GridView en el código.
    GridView.count(
  crossAxisCount: 2, // Número de columnas en la cuadrícula
  children: (_questions[_questionIndex]['answers'] as List<><string, object="">>)
      .map((answer) =>
          Answer(
            answerText: answer['answerText'],
            answerColor: answerWasSelected
                      ? answer['score'] ? Colors.green : Colors.red
                      : null,
            answerTap: () {
              // Si la respuesta ya fue seleccionada, no se realiza ninguna acción en el onTap
              if (answerWasSelected) {
                return;
              }
            },
          ),
      )
      .toList(),
)
    1. Cambia la propiedad crossAxisCount a 2 para crear 2 columnas en la vista de cuadrícula.

    2. Envuelve los widgets Answer con una función map y conviértelos en una lista utilizando el método toList().

    De esta manera, se mostrarán las opciones en un formato de vista de cuadrícula de 2*2. Puedes ajustar los valores de la propiedad crossAxisCount para crear diferentes configuraciones de vista de cuadrícula.</string,>

Comments are closed.