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.

Flutter: Prioridad de compresión de widget

26 Jul, 2023 Programación

Soy principiante en Flutter y ahora trato de entender cómo puedo establecer la prioridad de compresión de los diseños de los widgets. Lo que quiero, por ejemplo:

Tengo un “Horizontal Stack” como “Row”, que tiene dentro:

Un espacio como “SizedBox”, luego un “Text”. Y quiero reducir el espacio antes del texto cuando el texto se desborda y ocupa todo el espacio.

En iOS, esto se resuelve mediante la prioridad de compresión en las restricciones de diseño, pero ¿cómo puedo hacer lo mismo en Flutter?

Mi código actual es:

Row(
  mainAxisSize: MainAxisSize.min,
  children: <widget>[
    SizedBox(width: titleWidth),
    Expanded(child: subline),
  ],
)

donde titleWidth es el ancho del espacio que se debe aplicar cuando el widget subline es más pequeño que el resto del espacio accesible pinkSpace.
subline es un widget, en el ejemplo es un Text.

Pero el código solo funciona en la tarjeta con ‘Pero en lugar de esto…’ No reduce el espacio antes del widget de texto.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para establecer la prioridad de compresión para las restricciones de diseño en Flutter, puedes utilizar el widget Flexible en lugar de Expanded. Flexible tiene una propiedad llamada fit que puedes establecer como FlexFit.tight para indicar que el widget debe tratar de ocupar todo el espacio disponible, incluso si eso significa comprimir otros widgets.

    Aquí tienes una versión actualizada de tu código utilizando Flexible:

    Row(
  mainAxisSize: MainAxisSize.min,
  children: <widget>[
    SizedBox(width: titleWidth),
    Flexible(
      fit: FlexFit.tight,
      child: subline,
    ),
  ],
)

    Con este código, a medida que el widget subline crece y ocupa más espacio, el SizedBox se comprimirá para dejar espacio.

    Ten en cuenta que también puedes ajustar la propiedad maxLines del widget Text para controlar cuándo ocurre el desbordamiento y se produce la compresión.

Comments are closed.