it-swarm.com.de

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

Im folgenden Code funktioniert die Eigenschaft textAlign nicht. Wenn Sie den Wrapper DefaultTextStyle entfernen, der mehrere Ebenen höher liegt, beginnt textAlign zu arbeiten.

Warum und wie kann man sicherstellen, 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 the wild". 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

enter image description here

d.h. der Text ist zentriert, wobei die Ausrichtung des Align -Elements ignoriert wird.

26
Dims

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


textAlign richtet den Text an dem von Text belegten Platz aus, wenn dieser belegte Platz größer als der tatsächliche Inhalt ist.

Die Sache ist, in einem Column nimmt Ihr Text den bloßen minimalen Raum ein. Es ist dann das Column, das seine untergeordneten Elemente mit crossAxisAlignment ausrichtet. Der Standardwert ist center.

Ein einfacher Weg, um ein solches Verhalten zu erkennen, besteht darin, Ihre Texte wie folgt zu verpacken:

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

Welche mit dem Code, den Sie bereitgestellt haben, Folgendes rendern:

enter image description here

Das Problem wird plötzlich offensichtlich: Text nimmt nicht die gesamte Column Breite ein.


Sie haben jetzt einige Lösungen.

Sie können Ihr Text in ein Align einwickeln, um das textAlign -Verhalten nachzuahmen

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

Welches wird das folgende rendern:

enter image description here

oder Sie können Ihr Text zwingen, die Column Breite zu füllen.

Entweder durch Angabe von crossAxisAlignment: CrossAxisAlignment.stretch auf Column oder durch Verwendung von SizedBox mit 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:

enter image description here

In diesem Beispiel hat TextAlign den Text links platziert.

56
Rémi Rousselet

Geben Sie crossAxisAlignment: CrossAxisAlignment.start In Ihre Spalte ein

19
The real me

Die Eigenschaft textAlign funktioniert nur, wenn mehr Platz für den Inhalt von Text vorhanden ist. Unten sind 2 Beispiele aufgeführt, die zeigen, wann textAlign Auswirkungen hat und wann nicht.


Keine Auswirkung

In diesem Beispiel hat dies beispielsweise keine Auswirkungen, da für den Inhalt von Text kein zusätzlicher Speicherplatz vorhanden ist.

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

enter image description here


Hat Auswirkungen

Wenn Sie es in ein Container einwickeln und zusätzliches width bereitstellen, sodass es mehr zusätzlichen Speicherplatz bietet.

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

enter image description here

3
CopsOnRoad