Dans quelles circonstances la propriété textAlign fonctionne-t-elle dans Flutter ?

Question

Dans le code ci-dessous, textAlign La propriété ne fonctionne pas. Si vous supprimez DefaultTextStyle qui se trouve plusieurs niveaux au-dessus, textAlign se met au travail.

Pourquoi et comment s'assurer qu'il fonctionne toujours ?

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new DefaultTextStyle(style: new TextStyle(fontSize: 10.0), child: new Column(children: <Widget>[
        new Text("Should be left", textAlign: TextAlign.left,),
        new Text("Should be right", textAlign: TextAlign.right,)
      ],))
    );
  }
}

---

Les deux approches, suggérées par Remi, ne fonctionnent apparemment pas "dans la nature". Voici un exemple où j'ai imbriqué les deux dans les lignes et les colonnes. La première approche ne permet pas d'aligner et la seconde fait planter l'application :

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new Directionality(textDirection: TextDirection.ltr, child: new DefaultTextStyle(
            style: new TextStyle(fontSize: 10.0, color: Colors.white),
            child: new Column(children: <Widget>[
              new Row(children: <Widget>[
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  new Align(alignment: Alignment.centerLeft, child: new Text("left")),
                  new Align(alignment: Alignment.centerRight, child: new Text("right")),
                ],)),
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  new Align(alignment: Alignment.centerLeft, child: new Text("left")),
                  new Align(alignment: Alignment.centerRight, child: new Text("right")),
                ],)),
              ],),
              /*new Row(children: <Widget>[
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  new SizedBox(width: double.infinity, child: new Text("left", textAlign: TextAlign.left,)),
                  new SizedBox(width: double.infinity, child: new Text("right", textAlign: TextAlign.right)),
                ],)),
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  new SizedBox(width: double.infinity, child: new Text("left", textAlign: TextAlign.left)),
                  new SizedBox(width: double.infinity, child: new Text("right", textAlign: TextAlign.right)),
                ],)),
              ],)*/]
    )));
  }
}

---

Ce que j'obtiens du code est

c'est-à-dire que le texte est centré, sans tenir compte de l'alignement des éléments suivants Align élément.

Answer 1

DefaultTextStyle n'est pas lié au problème. En le supprimant, vous utilisez simplement le style par défaut, qui est beaucoup plus grand que celui que vous avez utilisé, ce qui masque le problème.

---

textAlign aligne le texte dans l'espace occupé par Text lorsque l'espace occupé est plus grand que le contenu réel.

Le truc, c'est qu'à l'intérieur d'un Column , votre Text prend le strict minimum d'espace. C'est alors le Column qui aligne ses enfants en utilisant crossAxisAlignment qui a pour valeur par défaut center .

Un moyen facile de détecter ce type de comportement est d'envelopper vos textes comme ceci :

Container(
   color: Colors.red,
   child: Text(...)
)

En utilisant le code que vous avez fourni, rendez le suivant :

Le problème devient soudain évident : Text ne prenez pas l'ensemble Column largeur.

---

Vous avez maintenant quelques solutions.

Vous pouvez envelopper votre Text dans un Align pour imiter textAlign comportement

Column(
  children: <Widget>[
    Align(
      alignment: Alignment.centerLeft,
      child: Container(
        color: Colors.red,
        child: Text(
          "Should be left",
        ),
      ),
    ),
  ],
)

Ce qui donne le résultat suivant :

ou vous pouvez forcer votre Text pour remplir le Column largeur.

Soit en spécifiant crossAxisAlignment: CrossAxisAlignment.stretch sur Column ou en utilisant SizedBox avec une infinité width .

Column(
  children: <Widget>[
    SizedBox(
      width: double.infinity,
      child: Container(
        color: Colors.red,
        child: Text(
          "Should be left",
          textAlign: TextAlign.left,
        ),
      ),
    ),
  ],
),

ce qui donne le résultat suivant :

Dans cet exemple, c'est TextAlign qui a placé le texte à gauche.

Answer 2

Précisez crossAxisAlignment: CrossAxisAlignment.start dans votre colonne

Answer 3

Dans le widget Colum, l'alignement du texte sera centré automatiquement, utilisez donc le bouton crossAxisAlignment: CrossAxisAlignment.start pour aligner le départ.

Column( 
    crossAxisAlignment: CrossAxisAlignment.start, 
    children: <Widget>[ 
    Text(""),
    Text(""),
    ]);

Answer 4

textAlign ne fonctionne que lorsqu'il reste de l'espace pour la propriété Text Le contenu de l'article. Voici 2 exemples qui montrent quand textAlign a un impact et quand il n'en a pas.

---

Aucun impact

Par exemple, dans cet exemple, cela n'aura aucun impact car il n'y a pas d'espace supplémentaire pour le contenu de la rubrique Text .

Text(
  "Hello",
  textAlign: TextAlign.end, // no impact
),

---

A un impact

Si vous l'enveloppez dans un Container et fournir des width de sorte qu'il dispose de plus d'espace supplémentaire.

Container(
  width: 200,
  color: Colors.orange,
  child: Text(
    "Hello",
    textAlign: TextAlign.end, // has impact
  ),
)

Answer 5

GestureDetector(
          onTap: () {},
          child: Container(
            padding: EdgeInsets.all(5),
            color: buttonContainerColor,
            margin: EdgeInsets.only(top: 10.0),
            width: double.infinity,
            height: bottomContainerHeight,
            alignment: Alignment.center,
            child: Text(
              "CALCULATE",
              style: TextStyle(fontSize: 25.0, color: Colors.white),
            ),
          ),
        )