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

Question

Dans le code ci-dessous, la propriété textAlign ne fonctionne pas. Si vous supprimez DefaultTextStyle wrapper (plusieurs niveaux au-dessus), textAlign commence à fonctionner.

Pourquoi et comment s'assurer que cela 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 Rémi ne fonctionnent apparemment pas "à l'état sauvage". Voici un exemple dans lequel j'ai imbriqué des lignes et des colonnes. La première approche ne s'aligne pas et la seconde approche fait que l'application se bloque:

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 je tire du code est

c'est-à-dire que le texte est centré, ignorant l'alignement de l'élément Align.

Answer 1

DefaultTextStyle n'est pas lié au problème. Le supprimer utilise simplement le style par défaut, qui est beaucoup plus volumineux que celui que vous avez utilisé, ce qui masque le problème.

---

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

La chose est, à l'intérieur d'une Column, votre Text prend le minimum d'espace. C'est alors la Column qui aligne ses enfants à l'aide de crossAxisAlignment dont la valeur par défaut est center.

Un moyen simple d'attraper un tel comportement consiste à envelopper vos textes comme ceci:

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

En utilisant le code que vous avez fourni, rendez ce qui suit:

Le problème devient soudain évident: Text ne prend pas la totalité Column largeur.

---

Vous avez maintenant quelques solutions.

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

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

Ce qui rendra ce qui suit:

ou vous pouvez forcer votre Text à remplir la Column largeur.

Soit en spécifiant crossAxisAlignment: CrossAxisAlignment.stretch sur Column, soit en utilisant SizedBox avec un infini width.

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

ce qui rend ce qui suit:

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

Answer 2

Spécifiez crossAxisAlignment: CrossAxisAlignment.start dans votre colonne

Answer 3

La propriété textAlign ne fonctionne que lorsqu'il reste plus d'espace pour le contenu de Text. Vous trouverez ci-dessous deux exemples montrant quand textAlign a un impact ou non.

---

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 variable Text.

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

---

A un impact

Si vous l’enveloppez dans un Container et fournissez un supplément de width tel qu’il dispose de plus d’espace supplémentaire.

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