PS: É fácil querer fazer uma coisa, mas é muito difícil fazer realmente uma coisa.
A mesma série de artigos é a seguinte:
- Explicação detalhada do uso do Navigator da série Flutter
- Explicação detalhada do layout flexível da série Flutter
- Explicação detalhada do carregamento de imagens na série Flutter
- Ciclo de vida do widget da série Flutter
- Flutter série de artigos Android de desenvolvimento misto
- Explicação detalhada do uso do Canal de Plataforma da série Flutter
Flutter é uma estrutura de interface do usuário de plataforma cruzada lançada pelo Google, que pode criar rapidamente aplicativos de alta qualidade no Android e IOS. Seu principal recurso é que o Flutter tem recursos de desenvolvimento rápido, interfaces de usuário expressivas e flexíveis e bom desempenho nativo. Este artigo apresenta principalmente o layout Flex no Flutter, da seguinte maneira:
- Flex basics
- Configurações comuns do Flex
- Linha 和 Coluna
- Expandido 和 Flexível
- Espaço
- Resumindo
Flex basics
O método de layout Flex tem sido amplamente usado no desenvolvimento de front-end e pequenos programas. Se você aprendeu o layout Flex antes, é semelhante no Flutter. O diagrama esquemático da Caixa Flexível é o seguinte:
Para a introdução desta figura, consulte o artigo anterior:
Explicação detalhada do flex container do miniaplicativo WeChat
O Flex Widget pode definir a direção do eixo principal. Se você souber a direção do eixo principal, pode usar diretamente a linha ou coluna. O Flex Widget não pode rolar. Se a rolagem estiver envolvida, você pode tentar usar o ListView. Se o conteúdo do Flex Widget exceder o seu largura e altura, um aviso amarelo e preto será exibido. Listras, a mensagem de erro que aparece na direção horizontal como exemplo é a seguinte:
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.
A exibição do erro é a seguinte:
Configurações comuns do Flex
As propriedades comuns do Flex são as seguintes:
- direção
- mainAxisAlignment
- mainAxisSize
- crossAxisAlignment
- direção vertical
- textBaseline
1 direção
Defina a direção do eixo principal, os valores configuráveis são Axis.horizontal e Axis.vertical e o eixo cruzado é perpendicular à direção do eixo principal.
2. mainAxisAlignment ：
Defina a disposição dos widgets filhos ao longo do eixo principal. O padrão é MainAxisAlignment.start. Os métodos de configuração são os seguintes:
- MainAxisAlignment.start: alinhamento à esquerda, valor padrão;
- MainAxisAlignment.end: Alinhamento à direita;
- MainAxisAlignment.center: alinhamento central;
- MainAxisAlignment.spaceBetween: Justificado em ambas as extremidades;
- MainAxisAlignment.spaceAround: O espaçamento em ambos os lados de cada widget é igual, e o espaçamento da borda da tela é a metade do espaçamento entre outros Widgets;
- MainAxisAlignment.spaceEvently: os widgets são distribuídos uniformemente e o intervalo da borda da tela é igual ao intervalo entre outros Widgets.
O efeito de comparação é o seguinte:
3. mainAxisSize
Defina o tamanho do eixo principal, o padrão é MainAxisSize.max, os valores que podem ser definidos são os seguintes:
- MainAxisSize.max: O tamanho do eixo principal é o tamanho do contêiner pai;
- MainAxisSize.min: O tamanho do eixo principal é a soma do tamanho do seu Widget.
O efeito de comparação é o seguinte:
Defina mainAxisAlignment como spaceBetween. Se mainAxisSize for definido como max, toda a largura da linha será organizada em spaceBetween. Se mainAxisSize for definido como min, será organizado em spaceBetween na soma das três larguras de contêiner
4. crossAxisAlignment
Defina a disposição dos widgets filhos ao longo do eixo cruzado. O padrão é CrossAxisAlignment.center e as configurações são as seguintes:
- CrossAxisAlignment.start: alinha com a posição inicial do eixo cruzado;
- CrossAxisAlignment.end: alinhe com a posição final do eixo cruzado;
- CrossAxisAlignment.center: alinhamento central;
- CrossAxisAlignment.stretch: preenche todo o eixo transversal;
- CrossAxisAlignment.baseline: Alinha de acordo com a linha de base da primeira linha do texto.
O efeito de comparação é o seguinte:
5. direção vertical
Defina a ordem de organização dos widgets filhos na direção vertical, o padrão é VerticalDirection.down, o método de configuração é o seguinte:
- VerticalDirection.down: começa na parte superior, termina na parte inferior;
- VerticalDirection.up: o início está na parte inferior e o final está no topo.
O efeito de comparação é o seguinte:
Preste atenção ao CrossAxisAlignment.end da configuração do eixo cruzado e às mudanças na direção vertical nesta base.
6. textBaseline
Defina o tipo de linha de base para o alinhamento do texto, os valores que podem ser definidos são os seguintes:
- TextBaseline.alphabetic: alinha com a linha de base da letra;
- TextBaseline.ideographic: alinhar com a linha de base de caracteres ideográficos;
Ao usar, quando crossAxisAlignment é definido como linha de base, o valor da propriedade textBaseline deve ser definido.
// 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, sem definir a propriedade textBaseline, definindo TextBaseline.alphabetic e TextBaseline.ideographic, os efeitos de comparação são os seguintes:
Embora os dois sejam diferentes no significado da linha de base correspondente, o teste não encontrou diferença. Continue a prestar atenção à observação no período posterior, e os amigos que sabem podem comentar e apontar.
Linha 和 Coluna
Tanto a linha quanto a coluna herdam Flex, a direção do eixo principal da linha é a direção horizontal, e a direção do eixo principal da coluna é a direção vertical, ou seja, a direção do eixo principal é definida com base no Flex, como segue:
// Row
direction: Axis.horizontal,
/// Column
direction: Axis.vertical,
Se você determinar a direção do eixo principal, você pode usar diretamente Row ou Column, e o uso é o mesmo que Flex.
Expandido 和 Flexível
A propriedade de correção de Flexible é padronizada para FlexFit.loose, enquanto Expanded herda de Flexible, e sua propriedade de correção é especificada como FlexFit.tight. As duas são diferentes porque a propriedade de correção não é usada. Se a propriedade de ajuste de Flexible é definida como FlexFit.tight , depois Flexível e Expandido Equivalentemente, os atributos de ajuste que podem ser definidos são os seguintes:
- apertado: preencher obrigatoriamente o espaço disponível;
- solto: O espaço disponível não é forçado a preencher, o tamanho do próprio widget.
O efeito de comparação é o seguinte:
Expandido pode fazer com que os componentes em Linha, Coluna e Flex preencham o espaço disponível ao longo do eixo principal. Se vários Widgets usarem componentes Expandidos, você pode usar a propriedade Flex expandido para distribuir o espaço do eixo principal proporcionalmente. A propriedade flex é equivalente ao peso das propriedades do Android LinearLayout, conforme a seguir:
// 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),
),
)),
],
));
}
}
O efeito de exibição é o seguinte:
Espaçador
Spacer é usado para ajustar o espaçamento entre Widgets e ocupará todo o espaço restante. Portanto, a configuração de MainAxisAlignment será inválida. A propriedade flex de Spacer é usada para definir o peso de distribuição do espaço restante. O valor padrão é 1, o que significa que todo o espaço restante está ocupado. Mais de um espaçador aloca o espaço restante de acordo com o flex, a referência de código é a seguinte:
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,
),
],
),
));
}
}
O efeito de exibição é o seguinte:
O texto acima aprende principalmente o conteúdo relacionado ao layout Flex no Flutter, e o foco está na compreensão dos conceitos básicos do Flex. Com base nisso, estudei e verifiquei o layout Flex. Para obter mais conteúdo, consulte a conta pública do WeChat .
