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

120

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:

Geben Sie hier die Bildbeschreibung ein

erwartet:

Geben Sie hier die Bildbeschreibung ein

rafaelcb21
quelle

Antworten:

240

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.

Bildschirmfoto

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,
      ),
    ),
  ),
),
Collin Jackson
quelle
1
Ich habe ein ähnliches Problem in der Spalte. Dieser Ansatz funktioniert bei mir nicht. stackoverflow.com/questions/52206221/…
Michael Tedla
Gibt es eine Möglichkeit, dies im Textfeld zu implementieren?
Mangkool
Wenn Sie möchten, dass auch der Text wrap_content die Eigenschaft fit mit FlexFit.loose,
martinseal1987,
108

Ellipse verwenden

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

Geben Sie hier die Bildbeschreibung ein


Fade verwenden

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

Geben Sie hier die Bildbeschreibung ein


Clip verwenden

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

Geben Sie hier die Bildbeschreibung ein


Hinweis:

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

Expanded(
  child: AboveText(),
)
CopsOnRoad
quelle
Kann ich hinzufügen, wenn Text überläuft, dann fügen Sie eine flache Schaltfläche wie ... mehr Link
mr.hir
@ mr.hir Es tut mir leid, dass ich das nicht verstanden habe.
CopsOnRoad
Dies funktioniert nicht, wenn Sie Text und ein anderes Widget (z. B. Symbol) in einer Zeile zentriert haben.
Lukasz Ciastko
softWrap: falseist genau das, was ich brauchte, danke!
Coldembrace
Hey, was ist, wenn wir zum Beispiel eine neue Seite mit dem überfüllten Text hinzufügen möchten?
Nithin Sai
22

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),
),
Yauhen Sampir
quelle
11
Bitte fügen Sie auch eine Beschreibung dieses Codes bei, um zu erklären, wie er die Frage beantwortet.
JKDEV
14

Sie können es so machen

Expanded(
   child: Text(
   'Text',
   overflow: TextOverflow.ellipsis,
   maxLines: 1
   )
)
Cenk YAGMUR
quelle
8

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,
)
Abdurahman Popal
quelle
Ja, das ist der richtige Weg. Zuerst hat es wirklich funktioniert, die Spalte in das Erweiterte zu wickeln! und um den Text in den untergeordneten Spalten zu verwenden.
ArifMustafa
4

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

Oto-obong Eshiett
quelle
3
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.

chisom onwuegbuzie
quelle
3

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),
                )
            ),
Justin B
quelle
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.

Randal Schwartz
quelle
0

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),
),
Alish Giri
quelle
0

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,),
  ],
),
jbryanh
quelle
0

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:

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

jitsm555
quelle
-3

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.

Bilal BSL
quelle