Flattern - Umbrechen Sie den Text mit einem Überlauf, z. B. mit Auslassungspunkten oder Überblendung

Ich versuche, eine Zeile zu erstellen, in der der mittlere Text eine maximale Größe hat. Wenn der Textinhalt zu groß ist, passt er in die Größe.

Ich füge die TextOverflow.ellipsisEigenschaft ein, um den Text zu verkürzen und die Tripelpunkte einzufügen, ...aber es funktioniert nicht.

main.dart

import 'package:flutter/material.dart';

void main() {
runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new Card(
          child: new Container(
            padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
            child: new Row(
              children: <Widget>[
                new Container(
                  padding: new EdgeInsets.only(right: 24.0),
                  child: new CircleAvatar(
                    backgroundColor: new Color(0xFFF5F5F5),
                    radius: 16.0,
                  )
                ),
                new Container(
                  padding: new EdgeInsets.only(right: 13.0),
                  child: new Text(
                    'Text lar...',
                    overflow: TextOverflow.ellipsis,
                    style: new TextStyle(
                      fontSize: 13.0,
                      fontFamily: 'Roboto',
                      color: new Color(0xFF212121),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Container(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Bill  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            '\$ -999.999.999,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF212121)
                            ),
                          ),
                        ],
                      ),
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Limit  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            'R\$ 900.000.000,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                        ],
                      ),
                    ]
                  )
                )
              ],
            ),
          )
        ),
      ]
    )
  );
}

Ergebnis:

erwartet:

Sie sollten Ihre Containerin eine einwickeln Flexible, um Sie Rowwissen zu lassen , dass es in Ordnung ist Container, wenn die schmaler als ihre intrinsische Breite ist. Expandedwird auch funktionieren.

Flexible(
  child: new Container(
    padding: new EdgeInsets.only(right: 13.0),
    child: new Text(
      'Text largeeeeeeeeeeeeeeeeeeeeeee',
      overflow: TextOverflow.ellipsis,
      style: new TextStyle(
        fontSize: 13.0,
        fontFamily: 'Roboto',
        color: new Color(0xFF212121),
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
),

Ellipse verwenden

Text(
  "This is a long text",
  overflow: TextOverflow.ellipsis,
),

Fade verwenden

Text(
  "This is a long text",
  overflow: TextOverflow.fade,
  maxLines: 1,
  softWrap: false,
),

Clip verwenden

Text(
  "This is a long text",
  overflow: TextOverflow.clip,
  maxLines: 1,
  softWrap: false,
),

Hinweis:

Wenn Sie Textin a verwenden Row, können Sie oben wie Textfolgt Expandedeinfügen:

Expanded(
  child: AboveText(),
)

Sie können diesen Code verwenden, um Text mit Auslassungspunkten anzuzeigen

Text(
    "Introduction to Very very very long text",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    softWrap: false,
    style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),

Sie können es so machen

Expanded(
   child: Text(
   'Text',
   overflow: TextOverflow.ellipsis,
   maxLines: 1
   )
)

Wickeln Sie zuerst Ihr Rowoder Columnin ein Flexibleoder ein ExpandedWidget ein

Text(
    'your long text here',
    overflow: TextOverflow.fade,
    maxLines: 1,
    softWrap: false,
    style: Theme.of(context).textTheme.body1,
)

Wenn Sie die untergeordneten Elemente in eine Zeile oder Spalte einschließen, wird die Spalte oder Zeile neu eingefügt. Flexible ();

https://github.com/flutter/flutter/issues/4128

SizedBox(
    width: 200.0,
    child: Text('PRODUCERS CAVITY FIGHTER 50X140g',
                overflow: TextOverflow.ellipsis,
                style: Theme.of(context).textTheme.body2))

Schließen Sie einfach ein Widget an, das eine bestimmte Breite annehmen kann, damit es funktioniert. Andernfalls wird die Breite des übergeordneten Containers angenommen.

Eine Möglichkeit, einen Überlauf eines Text-Widgets innerhalb einer Zeile zu beheben, wenn beispielsweise eine Chat-Nachricht eine wirklich lange Zeile sein kann. Sie können einen Container und eine BoxConstraint mit einer maximalen Breite erstellen.

            Container(
              constraints: BoxConstraints(maxWidth: 200),
                child: Text(
                  (chatName == null) ? " ": chatName,
                  style: TextStyle(
                      fontWeight: FontWeight.w400,
                      color: Colors.black87,
                      fontSize: 17.0),
                )
            ),

Ich denke, dem übergeordneten Container muss eine maximale Breite der richtigen Größe zugewiesen werden. Es sieht so aus, als würde das Textfeld den oben angegebenen Platz ausfüllen.

Abhängig von Ihrer Situation denke ich, dass dies der beste Ansatz ist.

final maxWidth = MediaQuery.of(context).size.width * 0.4;
Container(
        textAlign: TextAlign.center),
        child: Text('This is long text',
        constraints: BoxConstraints(maxWidth: maxWidth),
),

Wenn Sie Text einfach als untergeordnetes Element einer Spalte platzieren, ist dies der einfachste Weg, um Text automatisch umbrechen zu lassen. Vorausgesetzt, Sie haben nichts Komplizierteres vor sich. In diesen Fällen würde ich denken, Sie würden Ihren Container nach Belieben erstellen und eine weitere Spalte und dann Ihren Text einfügen. Das scheint gut zu funktionieren. Container möchten auf die Größe ihres Inhalts verkleinert werden, und dies scheint natürlich im Widerspruch zum Verpacken zu stehen, was mehr Aufwand erfordert.

Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text('This long text will wrap very nicely if there isn't room beyond the column\'s total width and if you have enough vertical space available to wrap into.',
      style: TextStyle(fontSize: 16, color: primaryColor),
      textAlign: TextAlign.center,),
  ],
),

Es gibt viele Antworten, aber Will noch etwas beobachten.

1. Clip

Schneiden Sie den überfüllten Text ab, um den Container zu reparieren.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.clip,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Ausgabe:

2. verblassen

Überblenden Sie den überlaufenden Text transparent.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.fade,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ), 

Ausgabe:

3. Ellipse

Verwenden Sie ein Auslassungszeichen, um anzuzeigen, dass der Text übergelaufen ist.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Ausgabe:

4. sichtbar

Überlaufenden Text außerhalb des Containers rendern.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.visible,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Ausgabe:

Versuchen:

 Expanded(
  child: Container(
      child: Text('OVER FLOW TEST TEXTTTT',
          overflow: TextOverflow.fade)),
),

Dies wird zeigen OVER FLOW. Wenn es einen Überlauf gibt, wird dieser behandelt.