PD: Es fácil querer hacer una cosa, pero es muy difícil hacer una sola.
La misma serie de artículos son los siguientes:
- Explicación detallada del uso del navegador de la serie Flutter
- Explicación detallada del diseño flexible de la serie Flutter
- Explicación detallada de la carga de imágenes en la serie Flutter
- Ciclo de vida del widget de la serie Flutter
- Serie Flutter de artículos de Android de desarrollo mixto
- Explicación detallada del uso del Platform Channel de la serie Flutter
Flutter es un marco de interfaz de usuario multiplataforma lanzado por Google, que puede crear rápidamente aplicaciones de alta calidad en Android e IOS. Su característica principal es que Flutter tiene capacidades de desarrollo rápido, interfaces de usuario expresivas y flexibles y un buen rendimiento nativo. Este artículo presenta principalmente el diseño de Flex en Flutter, de la siguiente manera:
- Conceptos básicos de Flex
- Flex configuraciones comunes
- Fila 和 Columna
- Ampliado 和 Flexible
- Espacio
- para resumir
Conceptos básicos de Flex
El método de diseño Flex se ha utilizado ampliamente en el desarrollo de programas pequeños y front-end. Si ya ha aprendido el diseño Flex antes, entonces es similar en Flutter. El diagrama esquemático de Flexible Box es el siguiente:
Para la introducción de esta imagen, consulte el artículo anterior:
Explicación detallada del contenedor flexible del subprograma WeChat
Flex Widget puede establecer la dirección del eje principal. Si conoce la dirección del eje principal, puede usar directamente Fila o Columna. Flex Widget no puede desplazarse. Si hay desplazamiento involucrado, puede intentar usar ListView. Si el contenido de Flex Widget excede su ancho y alto, se mostrará una advertencia amarilla y negra. Rayas, el mensaje de error que aparece en la dirección horizontal como ejemplo es el siguiente:
I/flutter (14749): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (14749): The following assertion was thrown during layout:
I/flutter (14749): A RenderFlex overflowed by 440 pixels on the right.
La pantalla de error es la siguiente:
Flex configuraciones comunes
Las propiedades comunes de Flex son las siguientes:
- dirección
- mainAxisAlignment
- mainAxisSize
- crossAxisAlignment
- dirección vertical
- textBaseline
1 dirección
Establezca la dirección del eje principal, los valores configurables son Axis.horizontal y Axis.vertical, y el eje transversal es perpendicular a la dirección del eje principal.
2. mainAxisAlignment:
Establezca la disposición de los widgets secundarios a lo largo del eje principal. El valor predeterminado es MainAxisAlignment.start. Los métodos de configuración son los siguientes:
- MainAxisAlignment.start: alineación a la izquierda, valor predeterminado;
- MainAxisAlignment.end: alineación a la derecha;
- MainAxisAlignment.center: alineación central;
- MainAxisAlignment.spaceBetween: Justificado en ambos extremos;
- MainAxisAlignment.spaceAround: el espacio en ambos lados de cada widget es igual, y el espacio desde el borde de la pantalla es la mitad del espacio entre otros widgets;
- MainAxisAlignment.spaceEvently: Los widgets se distribuyen uniformemente y el intervalo desde el borde de la pantalla es igual al intervalo entre otros widgets.
El efecto de comparación es el siguiente:
3. mainAxisSize
Configure el tamaño del eje principal, el valor predeterminado es MainAxisSize.max, los valores que se pueden configurar son los siguientes:
- MainAxisSize.max: El tamaño del eje principal es el tamaño del contenedor principal;
- MainAxisSize.min: El tamaño del eje principal es la suma del tamaño de su Widget.
El efecto de comparación es el siguiente:
Establezca mainAxisAlignment en spaceBetween. Si mainAxisSize se establece en max, todo el ancho de la fila se organizará en spaceBetween. Si mainAxisSize se establece en min, se organizará en spaceBetween dentro de la suma de los tres anchos de contenedor.
4. crossAxisAlignment
Establezca la disposición de los widgets secundarios a lo largo del eje transversal. El valor predeterminado es CrossAxisAlignment.center, y la configuración es la siguiente:
- CrossAxisAlignment.start: alinear con la posición inicial del eje transversal;
- CrossAxisAlignment.end: alinear con la posición final del eje transversal;
- CrossAxisAlignment.center: alineación central;
- CrossAxisAlignment.stretch: llena todo el eje transversal;
- CrossAxisAlignment.baseline: Alinee de acuerdo con la línea de base de la primera línea de texto.
El efecto de comparación es el siguiente:
5. verticalDirection
Establezca el orden de disposición de los widgets secundarios en la dirección vertical, el valor predeterminado es VerticalDirection.down, el método de configuración es el siguiente:
- VerticalDirection.down: comienza en la parte superior, termina en la parte inferior;
- VerticalDirection.up: el inicio está en la parte inferior y el final está en la parte superior.
El efecto de comparación es el siguiente:
Preste atención a CrossAxisAlignment.end de la configuración del eje transversal, y los cambios en la dirección vertical sobre esta base.
6. textBaseline
Establezca el tipo de línea base para la alineación del texto, los valores que se pueden establecer son los siguientes:
- TextBaseline.alphabetic: alinear con la línea de base de la letra;
- TextBaseline.ideographic: se alinea con la línea de base de los caracteres ideográficos;
Cuando se usa, cuando crossAxisAlignment se establece en la línea de base, se debe establecer el valor de la propiedad textBaseline. El uso es el siguiente:
// textBaseline
class FlexSamplePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flex Sample"),
centerTitle: true,
),
body: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Text("躬",style: TextStyle(fontSize: 40,),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("之",style: TextStyle(fontSize: 16,),),
],
)),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
Text("躬",style: TextStyle(fontSize: 40,),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("之",style: TextStyle(fontSize: 16, ),),
],
)),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.ideographic,
children: <Widget>[
Text("躬",style: TextStyle(fontSize: 40, ),),
Text("x",style: TextStyle(fontSize: 60,),),
Text("ing",style: TextStyle(fontSize: 16,),),
Text("之",style: TextStyle(fontSize: 16,),),
],
))
],
),
);
}
}
Respectivamente sin configurar la propiedad textBaseline, configurando TextBaseline.alphabetic y TextBaseline.ideographic, los efectos de comparación son los siguientes:
Aunque los dos son diferentes en el significado de la línea de base correspondiente, la prueba no encontró ninguna diferencia. Continúe prestando atención a la observación en el período posterior, y los amigos que conocen pueden comentar y señalar.
Fila 和 Columna
Tanto Row como Column heredan Flex, la dirección del eje principal de Row es la dirección horizontal y la dirección del eje principal de Column es la dirección vertical, es decir, la dirección del eje principal se establece sobre la base de Flex, como sigue:
// Row
direction: Axis.horizontal,
/// Column
direction: Axis.vertical,
Si determina la dirección del eje principal, puede usar directamente Fila o Columna, y el uso es el mismo que Flex.
Ampliado 和 Flexible
La propiedad fix de Flexible tiene como valor predeterminado FlexFit.loose, mientras que Expanded hereda de Flexible, y su propiedad fix se especifica como FlexFit.tight. Las dos son diferentes porque la propiedad fix no se utiliza. Si la propiedad de ajuste de Flexible se establece en FlexFit.tight , luego Flexible y Expanded Equivalently, los atributos de ajuste que se pueden establecer son los siguientes:
- apretado: llenar obligatoriamente el espacio disponible;
- suelto: el espacio disponible no está obligado a llenar, el tamaño del widget en sí.
El efecto de comparación es el siguiente:
Expandido puede hacer que los componentes en Fila, Columna y Flex llenen el espacio disponible a lo largo del eje principal. Si varios Widgets usan componentes Expandidos, puede usar la propiedad Flex expandida para distribuir el espacio del eje principal proporcionalmente. La propiedad flex es equivalente a la peso de las propiedades de LinearLayout de Android, de la siguiente manera:
// Expanded
class ExpandedSamplePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Row Sample"),
centerTitle: true,
),
body: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
width: 50,
height: 50,
color: Colors.red,
child: Center(
child: Text(
"A",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
),
Expanded(
flex: 2,
child: Container(
width: 50, // Row Expanded下width无效
height: 50, // Column Expanded下height无效
color: Colors.green,
child: Center(
child: Text(
"B",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
),
Container(
width: 50,
height: 50,
color: Colors.yellow,
child: Center(
child: Text(
"C",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
],
));
}
}
El efecto de visualización es el siguiente:
Espaciador
El espaciador se usa para ajustar el espacio entre los widgets y ocupará todo el espacio restante. Por lo tanto, la configuración de MainAxisAlignment no será válida. La propiedad flex de Spacer se usa para establecer el peso de distribución del espacio restante. El valor predeterminado es 1, lo que significa que todo el espacio restante está ocupado. Más de un espaciador asigna el espacio restante según flex, la referencia del código es la siguiente:
class RowSamplePage1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Row Sample"),
centerTitle: true,
),
body: ConstrainedBox(
constraints: BoxConstraints(maxHeight: 150),
child: Row(
children: <Widget>[
Container(
width: 80,
height: 80,
color: Colors.red,
),
Spacer(flex: 1,),
Container(
width: 80,
height: 80,
color: Colors.green,
),
Spacer(flex: 2,),
Container(
width: 80,
height: 80,
color: Colors.yellow,
),
],
),
));
}
}
El efecto de visualización es el siguiente:
Lo anterior aprende principalmente el contenido relacionado con el diseño Flex en Flutter, y el enfoque está en comprender los conceptos básicos de Flex. Sobre esta base, he estudiado y verificado el diseño Flex. Para obtener más contenido, consulte la cuenta pública de WeChat .
