Unter welchen Umständen funktioniert die Eigenschaft textAlign in Flutter?

Im folgenden Code textAlignfunktioniert die Eigenschaft nicht. Wenn Sie den DefaultTextStyleWrapper entfernen, der mehrere Ebenen höher liegt, textAlignbeginnt die Arbeit.

Warum und wie kann sichergestellt werden, dass es immer funktioniert?

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

Beide von Remi vorgeschlagenen Ansätze funktionieren offenbar nicht "in freier Wildbahn". Hier ist ein Beispiel, das ich sowohl in Zeilen als auch in Spalten verschachtelt habe. Der erste Ansatz richtet sich nicht aus und der zweite Ansatz führt zum Absturz der Anwendung:

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

Was ich vom Code bekomme, ist

Das heißt, der Text wird zentriert, wobei die Ausrichtung des AlignElements ignoriert wird .

DefaultTextStylehat nichts mit dem Problem zu tun. Beim Entfernen wird einfach der Standardstil verwendet, der weitaus größer ist als der von Ihnen verwendete, sodass das Problem ausgeblendet wird.

textAlignRichtet den Text in dem Bereich aus, der belegt wird, Textwenn dieser belegte Bereich größer als der tatsächliche Inhalt ist.

Die Sache ist, im Innern ein Column, Sie Textbrauchen den Nötigste Raum. Es ist dann das Column, das seine Kinder ausrichtet, wobei crossAxisAlignmentstandardmäßig verwendet wird center.

Eine einfache Möglichkeit, ein solches Verhalten zu erkennen, besteht darin, Ihre Texte wie folgt zu verpacken:

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

Wenn Sie den von Ihnen angegebenen Code verwenden, rendern Sie Folgendes:

Das Problem wird plötzlich offensichtlich: TextNehmen Sie nicht die gesamte ColumnBreite.

Sie haben jetzt einige Lösungen.

Sie können Ihre wickeln Textin ein Alignzu imitieren textAlignVerhalten

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

Welches wird das folgende rendern:

oder Sie können Ihre zwingen Text, die ColumnBreite zu füllen .

Entweder durch Angabe crossAxisAlignment: CrossAxisAlignment.stretchvon Columnoder durch Verwendung SizedBoxmit einem Unendlichen width.

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

was Folgendes ergibt:

In diesem Beispiel wurde TextAlignder Text links platziert.

Geben Sie crossAxisAlignment: CrossAxisAlignment.startin Ihrer Spalte an

textAlignDie Eigenschaft funktioniert nur, wenn mehr Platz für den TextInhalt des Objekts vorhanden ist . Im Folgenden finden Sie zwei Beispiele, die zeigen, wann textAlign Auswirkungen hat und wann nicht.

Keine Auswirkungen

In diesem Beispiel hat dies beispielsweise keine Auswirkungen, da kein zusätzlicher Platz für den Inhalt des Text.

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

Hat Auswirkungen

Wenn Sie es in ein einwickeln Containerund extra bereitstellen width, damit es mehr zusätzlichen Platz hat.

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

Im Colum-Widget wird die Textausrichtung automatisch zentriert. Verwenden Sie crossAxisAlignment: CrossAxisAlignment.startdiese Option, um den Start auszurichten.

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

In alignment: Alignment.centerRightContainer setzen:

Container(
    alignment: Alignment.centerRight,
    child:Text(
       "Hello",
    ),
)

Für maximale Flexibilität arbeite ich normalerweise lieber mit SizedBox wie folgt:

Row(
                                children: <Widget>[
                                  SizedBox(
                                      width: 235,
                                      child: Text('Hey, ')),
                                  SizedBox(
                                      width: 110,
                                      child: Text('how are'),
                                  SizedBox(
                                      width: 10,
                                      child: Text('you?'))
                                ],
                              )

Ich habe in der Vergangenheit Probleme mit der Textausrichtung bei der Verwendung der Ausrichtung festgestellt, während sizebox immer die Arbeit erledigt.

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),
            ),
          ),
        )