Explication détaillée de la disposition flex de la série Flutter

PS: Il est facile de vouloir faire une chose, mais il est très difficile de vraiment faire une chose.

La même série d'articles est la suivante:

• Explication détaillée de l'utilisation du Navigator de la série Flutter
• Explication détaillée de la disposition flex de la série Flutter
• Explication détaillée du chargement d'image dans la série Flutter
• Cycle de vie des widgets de la série Flutter
• Flutter série d'articles sur le développement mixte sur Android
• Explication détaillée de l'utilisation du Platform Channel de la série Flutter

Flutter est un framework d'interface utilisateur multiplateforme lancé par Google, qui peut rapidement créer des applications de haute qualité sur Android et IOS. Sa principale caractéristique est que Flutter possède des capacités de développement rapide, des interfaces utilisateur expressives et flexibles et de bonnes performances natives. Cet article présente principalement la disposition Flex dans Flutter, comme suit:

1. Bases de Flex
2. Flex paramètres communs
3. Ligne 和 Colonne
4. Développé 和 Flexible
5. Espacer
6. Pour résumer

Bases de Flex

La méthode de mise en page Flex a été largement utilisée dans le développement de programmes frontaux et de petits programmes. Si vous avez déjà appris la mise en page Flex, elle est similaire dans Flutter. Le diagramme schématique de Flexible Box est le suivant:

Pour l'introduction de cette image, veuillez consulter l'article précédent:

Explication détaillée du conteneur flex de l'applet WeChat

Flex Widget peut définir la direction de l'axe principal. Si vous connaissez la direction de l'axe principal, vous pouvez directement utiliser Row ou Column. Flex Widget ne peut pas faire défiler. Si le défilement est impliqué, vous pouvez essayer d'utiliser ListView. Si le contenu de Flex Widget dépasse son largeur et hauteur, un avertissement jaune et noir s'affichera. Bandes, le message d'erreur qui apparaît dans le sens horizontal à titre d'exemple est le suivant:

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.

L'affichage d'erreur est le suivant:

Flex paramètres communs

Les propriétés communes de Flex sont les suivantes:

1. direction
2. mainAxisAlignment
3. mainAxisSize
4. crossAxisAlignment
5. Direction verticale
6. textBaseline

1 direction

Définissez la direction de l'axe principal, les valeurs réglables sont Axis.horizontal et Axis.vertical, et l'axe transversal est perpendiculaire à la direction de l'axe principal.

2. mainAxisAlignment ：

Définissez la disposition des widgets enfants le long de l'axe principal. La valeur par défaut est MainAxisAlignment.start. Les méthodes de configuration sont les suivantes:

• MainAxisAlignment.start: alignement à gauche, valeur par défaut;
• MainAxisAlignment.end: alignement à droite;
• MainAxisAlignment.center: alignement central;
• MainAxisAlignment.spaceBetween: justifié aux deux extrémités;
• MainAxisAlignment.spaceAround: l'espacement des deux côtés de chaque widget est égal et l'espacement à partir du bord de l'écran correspond à la moitié de l'espacement entre les autres widgets;
• MainAxisAlignment.spaceEvently: les widgets sont répartis uniformément et l'intervalle à partir du bord de l'écran est égal à l'intervalle entre les autres widgets.

L'effet de comparaison est le suivant:

3. mainAxisSize

Définissez la taille de l'axe principal, la valeur par défaut est MainAxisSize.max, les valeurs qui peuvent être définies sont les suivantes:

• MainAxisSize.max: La taille de l'axe principal est la taille du conteneur parent;
• MainAxisSize.min: La taille de l'axe principal est la somme de la taille de son Widget.

L'effet de comparaison est le suivant:

Définissez mainAxisAlignment sur spaceBetween. Si mainAxisSize est défini sur max, toute la largeur de la ligne sera disposée dans spaceBetween. Si mainAxisSize est définie sur min, elle sera disposée dans spaceBetween dans la somme des trois largeurs de conteneur.

4. crossAxisAlignment

Définissez la disposition des widgets enfants le long de l'axe transversal. La valeur par défaut est CrossAxisAlignment.center et les paramètres sont les suivants:

• CrossAxisAlignment.start: aligner avec la position de départ de l'axe transversal;
• CrossAxisAlignment.end: aligner avec la position finale de l'axe transversal;
• CrossAxisAlignment.center: alignement central;
• CrossAxisAlignment.stretch: remplit tout l'axe transversal;
• CrossAxisAlignment.baseline: Aligne en fonction de la ligne de base de la première ligne de texte.

L'effet de comparaison est le suivant:

5. verticalDirection

Définissez l'ordre de disposition des widgets enfants dans le sens vertical, la valeur par défaut est VerticalDirection.down, la méthode de paramétrage est la suivante:

• VerticalDirection.down: commence en haut, fin en bas;
• VerticalDirection.up: le début est en bas et la fin est en haut.

L'effet de comparaison est le suivant:

Faites attention à CrossAxisAlignment.end du paramètre d'axe transversal et aux changements de direction verticale sur cette base.

6. textBaseline

Définissez le type de ligne de base pour l'alignement du texte, les valeurs qui peuvent être définies sont les suivantes:

• TextBaseline.alphabetic: aligné sur la ligne de base des lettres;
• TextBaseline.ideographic: aligner avec la ligne de base des caractères idéographiques;

Lors de l'utilisation, lorsque crossAxisAlignment est défini sur baseline, la valeur de la propriété textBaseline doit être définie. L'utilisation est la suivante:

// 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,),),
                ],
              ))
        ],
      ),
    );
  }
}

Respectivement sans définir la propriété textBaseline, en définissant TextBaseline.alphabetic et TextBaseline.ideographic, les effets de comparaison sont les suivants:

Bien que les deux soient différents dans la signification de la ligne de base correspondante, le test n'a pas trouvé de différence. Continuez à faire attention à l'observation dans la période ultérieure, et les amis qui savent peuvent commenter et signaler.

Ligne 和 Colonne

Row et Column héritent de Flex, la direction de l'axe principal de Row est la direction horizontale et la direction de l'axe principal de Column est la direction verticale, c'est-à-dire que la direction de l'axe principal est définie sur la base de Flex, comme suit:

// Row
direction: Axis.horizontal,
/// Column
direction: Axis.vertical,

Si vous déterminez la direction de l'axe principal, vous pouvez directement utiliser Row ou Column, et l'utilisation est la même que Flex.

Développé 和 Flexible

La propriété de correction de Flexible est par défaut FlexFit.loose, tandis que Expanded hérite de Flexible et sa propriété de correction est spécifiée comme FlexFit.tight. Les deux sont différentes car la propriété de correction n'est pas utilisée. Si la propriété fit de Flexible est définie sur FlexFit.tight , puis Flexible et développé de manière équivalente, les attributs d'ajustement qui peuvent être définis sont les suivants:

• serré: remplir obligatoirement l'espace disponible;
• loose: L'espace disponible n'est pas obligé de se remplir, la taille du widget lui-même.

L'effet de comparaison est le suivant:

Expanded peut faire en sorte que les composants de Row, Column et Flex remplissent l'espace disponible le long de l'axe principal. Si plusieurs widgets utilisent des composants Expanded, vous pouvez utiliser la propriété Expanded flex pour répartir proportionnellement l'espace de l'axe principal. La propriété flex équivaut à la propriété poids des propriétés Android LinearLayout, comme suit:

// 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),
                  ),
                )),
          ],
        ));
  }
}

L'effet d'affichage est le suivant:

Entretoise

Spacer est utilisé pour ajuster l'espacement entre les widgets et occupera tout l'espace restant. Par conséquent, le paramètre MainAxisAlignment ne sera pas valide. La propriété flex de Spacer est utilisée pour définir le poids de distribution de l'espace restant. La valeur par défaut est 1, ce qui signifie que tout l'espace restant est occupé. Plus d'un Spacer alloue l'espace restant en fonction de flex, la référence de code est la suivante:

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,
              ),
            ],
          ),
        ));
  }
}

L'effet d'affichage est le suivant:

Ce qui précède apprend principalement la Flex layout contenu connexe Flutter, et l'accent est mis sur la compréhension des concepts de base de Flex. Sur cette base, je l' ai étudié et vérifié la mise en page Flex. Pour plus de contenu, voir le public WeChat compte .