Im folgenden Code textAlign
funktioniert die Eigenschaft nicht. Wenn Sie den DefaultTextStyle
Wrapper entfernen, der mehrere Ebenen höher liegt, textAlign
beginnt 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 Align
Elements ignoriert wird .
flutter
text-alignment
Dims
quelle
quelle
Antworten:
DefaultTextStyle
hat 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.textAlign
Richtet den Text in dem Bereich aus, der belegt wird,Text
wenn dieser belegte Bereich größer als der tatsächliche Inhalt ist.Die Sache ist, im Innern ein
Column
, SieText
brauchen den Nötigste Raum. Es ist dann dasColumn
, das seine Kinder ausrichtet, wobeicrossAxisAlignment
standardmäßig verwendet wirdcenter
.Eine einfache Möglichkeit, ein solches Verhalten zu erkennen, besteht darin, Ihre Texte wie folgt zu verpacken:
Wenn Sie den von Ihnen angegebenen Code verwenden, rendern Sie Folgendes:
Das Problem wird plötzlich offensichtlich:
Text
Nehmen Sie nicht die gesamteColumn
Breite.Sie haben jetzt einige Lösungen.
Sie können Ihre wickeln
Text
in einAlign
zu imitierentextAlign
VerhaltenColumn( 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
, dieColumn
Breite zu füllen .Entweder durch Angabe
crossAxisAlignment: CrossAxisAlignment.stretch
vonColumn
oder durch VerwendungSizedBox
mit einem Unendlichenwidth
.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
TextAlign
der Text links platziert.quelle
textAlign
dasAlign
Beispiel zu entfernen . Fest. Und die "unendliche Breite" im Flattern sagt einfach "Ich möchte so viel Platz wie möglich".Geben Sie
crossAxisAlignment: CrossAxisAlignment.start
in Ihrer Spalte anquelle
Row
würde a funktionieren, oderAlign( ... centerLeft)
textAlign
Die Eigenschaft funktioniert nur, wenn mehr Platz für denText
Inhalt 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
Container
und extra bereitstellenwidth
, damit es mehr zusätzlichen Platz hat.Container( width: 200, color: Colors.orange, child: Text( "Hello", textAlign: TextAlign.end, // has impact ), )
quelle
Very \n Good Morning
Im Colum-Widget wird die Textausrichtung automatisch zentriert. Verwenden Sie
crossAxisAlignment: CrossAxisAlignment.start
diese Option, um den Start auszurichten.Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text(""), Text(""), ]);
quelle
In
alignment: Alignment.centerRight
Container setzen:Container( alignment: Alignment.centerRight, child:Text( "Hello", ), )
quelle
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.
quelle
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), ), ), )
quelle