tema
Este artículo presentará el uso de filas y columnas en flutter. En términos sencillos, es el uso de diseño horizontal y diseño vertical.
entorno de desarrollo
win10
androidstudio2022.1.1
jdk11
fluttersdk-flutter_windows_3.7.8
Código fuente
La dirección completa de la demostración de código abierto se adjuntará al final del artículo.
proceso de desarrollo
En primer lugar, el diseño de Fila y Columna aquí es similar al LinearLayout de Android, y utiliza el atributo de orientación para controlar la dirección del diseño.
La fila es un diseño horizontal. Utilice el diseño de fila. La situación de visualización normal es la siguiente:
La columna es un diseño vertical. Utilice el diseño de columna. La situación de visualización normal es como se muestra a continuación:
Puede ver que la dirección del diseño es diferente.
Las propiedades de estos dos controles se enumeran a continuación:
Alineación del eje principal:
El eje principal de la dirección de alineación actual, como una fila, el eje principal es la línea horizontal.
spaceBetween: hace que los subcontroles en el medio estén igualmente espaciados.
start: coloca los subcontroles al comienzo del eje principal (similar (a la regla de disposición Linearlayout predeterminada de Android)
final: coloque los subcontroles en el eje principal. La posición final
centro: coloque el subcontrol en el medio del
espacio del eje principal. Uniformemente: divida el área en blanco del eje principal en partes iguales. para que el espacio entre cada subcontrol sea igual
spaceAround: Indica que el espacio restante en ambos lados de cada componente es igual
Alineación del eje transversal:
El eje transversal vertical de la dirección de alineación actual, como la fila, el eje transversal es la dirección vertical
inicio: el lugar inicial del eje transversal
final: el lugar final del centro del eje transversal
: la posición central del tramo del eje transversal
: hacer que el subcontrol llene la
línea base del eje transversal: alinear en la línea transversal, usado con textBaseline, actuando sobre el texto
Línea de base de texto:
Alineación del texto
alfabético: la línea base del texto está configurada para hacer referencia al inglés.
Ideográfica: la línea base del texto está configurada para hacer referencia al chino.
No hay mucha diferencia entre las dos propiedades.
Tamaño del eje principal:
El tamaño del control, fila es el tamaño horizontal, col es el tamaño vertical
MainAxisSize.min: el control es lo más pequeño posible
MainAxisSize.max: el control se llena al máximo – predeterminado
Dirección vertical:
Alineación vertical
hacia abajo: de arriba hacia
abajo hacia arriba: de abajo hacia arriba
De hecho, en el uso diario, los atributos más utilizados deberían ser MainAxisAlignment y MainAxisSize.
MainAxisSize corresponde a wrap_content y match_parent en el diseño de Android.
MainAxisAlignment es la alineación del subdiseño.
Finalmente, si desea comprender realmente el diseño de filas y columnas, no se recomienda simplemente leer el artículo, debe escribir el código manualmente y luego resumirlo para recordarlo profundamente.
Finalmente, la dirección del código fuente es la siguiente:
https://gitee.com/motosheep/flutter-demo
Cambiar a rama: 202303281729RowCol control