Implementación de FlexLayout en UI: Descomposición y Codificación

Clase 17 de 23 • Curso de .NET MAUI: Fundamentos de Interfaces Gráficas

Clase anteriorSiguiente clase

Resumen

El FlexLayout en MAUI te permite organizar eficazmente componentes visuales en tu interfaz gráfica. Al aprender esta técnica, puedes controlar fácilmente la posición, dirección y alineación de los elementos, facilitando diseños limpios y adaptables a diferentes pantallas. Veamos las claves prácticas para diseñar tarjetas visualmente atractivas.

¿Cómo identificar los elementos para tu UI?

Lo primero es reconocer claramente cada uno de los elementos del diseño antes de codificar:

  • Label inicial: con texto "Choose Illustration".
  • Frame: un cuadro con bordes redondeados, que agrupa los demás elementos.
  • Dentro del Frame:
  • Un Label con texto descriptivo.
  • Una imagen representativa.
  • Otro Label para el precio, destacado en negrita y en color rosa.

¿Qué propiedades usar para organizarlos?

Una buena organización requiere el uso adecuado de propiedades:

  • Dirección vertical: Define la propiedad Direction en valor columna. Esto permite posicionar los elementos verticalmente, uno debajo del otro.
  • Centrado de elementos: Implementa Alignment=center de los ítems para una distribución visual armónica.
  • Espaciado adecuado: Usa el Margin estratégicamente para separar visualmente los elementos del borde de la pantalla y entre ellos mismos.
  • Bordes redondeados: Emplea la propiedad Corner Radius para dar una forma más suave y moderna al Frame.

¿Cómo estructurar el código en Visual Studio?

Hazlo de manera limpia y organizada en la estructura de carpetas sugerida:

  • Carpeta Views
  • Subcarpeta Layouts
    • Archivo nuevo "Flex Layout Challenge"

Al momento de colocar etiquetas:

  • Abre y cierra explícitamente etiquetas de layout para incluir contenido dentro.
  • Emplea la autocierre con '/' cuando el control no lleva contenido interno, facilitando un código más compacto.

Ejemplo del uso de FlexLayout con MAUI

<FlexLayout Direction="column" AlignItems="center">
    <Label Text="Choose Illustration" HorizontalTextAlignment="Center" />
    <Frame CornerRadius="10" Margin="20">
      <FlexLayout Direction="column" AlignItems="center">
        <Label Text="Ejemplo de descripción" HorizontalTextAlignment="Center" />
        <Image Source="House" Aspect="Fill" />
        <Label Text="$50" FontAttributes="Bold" TextColor="HotPink" FontSize="30" />
      </FlexLayout>
    </Frame>
</FlexLayout>

¿Cómo corregir problemas visuales?

Para mantener un estilo visual atractivo recuerda:

  • Verificar que tus imágenes tengan marcado Build Action en MAUI Image, esencial para visualizarlas correctamente.
  • Ajustar tamaño y alineación con pruebas visuales frecuentes.
  • Mantener limpio el código eliminando espacios innecesarios, contribuyendo a una mejor legibilidad y mantenimiento.

¡Tu práctica es clave! No dudes en replicar el diseño usando otras estructuras como Grid, y compártenos tu experiencia en los comentarios.