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

79

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

Geben Sie hier die Bildbeschreibung ein

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

Dims
quelle
Warum verwenden Sie DefaultTextStyle als Container für 2 untergeordnete Textdateien?
Diegoveloper
2
Warum sollte ich nicht?
Dims

Antworten:

162

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:

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

In diesem Beispiel wurde TextAlignder Text links platziert.

Rémi Rousselet
quelle
1
Aber stimmen Sie nicht zu, dass alles, was Sie beschrieben haben, Tricks und Problemumgehungen sind, was ein schlechtes Design der Bibliothek bedeutet?
Dims
3
Dies ist definitiv kein Trick / Workaround. Dies ist die offizielle Lösung. Flutter verwendet ein auf Einschränkungen basierendes Layout, dessen Kern die Komposition ist. Es ist die funktionale Programmierung von Layout. Es ist absolut fantastisch
Rémi Rousselet
1
Im ersten Fall haben Sie zweimal "left" angegeben, im zweiten Fall haben Sie die unendliche Breite angegeben. Dies sind definitiv Tricks, obwohl sie offiziell und funktional sind.
Dims
1
Tut mir leid, dass ich vergessen habe, textAligndas AlignBeispiel zu entfernen . Fest. Und die "unendliche Breite" im Flattern sagt einfach "Ich möchte so viel Platz wie möglich".
Rémi Rousselet
Okay, dann ist der erste Weg besser, obwohl es für mich außerhalb dieses einfachen Beispiels immer noch nicht funktioniert ...
Dims
49

Geben Sie crossAxisAlignment: CrossAxisAlignment.startin Ihrer Spalte an

Das wahre Ich
quelle
1
Sollte das nicht sein ?: crossAxisAlignment: CrossAxisAlignment.start
Keplerian
Das würde nicht funktionieren, da er ein Text-Widget links und eines rechts ausgerichtet hat ...
Hasen
@TSR Dies funktioniert nur, wenn die Spalte bereits ein Element enthält, das die gesamte Breite einnimmt (z. B. a Row würde a funktionieren, oderAlign( ... centerLeft)
TSR
14

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

Geben Sie hier die Bildbeschreibung ein


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

Geben Sie hier die Bildbeschreibung ein

CopsOnRoad
quelle
Sie können es auch mitVery \n Good Morning
CopsOnRoad
7

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(""),
    ]);
Navin Kumar
quelle
3

In alignment: Alignment.centerRightContainer setzen:

Container(
    alignment: Alignment.centerRight,
    child:Text(
       "Hello",
    ),
)
Lay Leangsros
quelle
1

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.

Tommy95
quelle
-1
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),
            ),
          ),
        )
Ufuk Zimmerman
quelle