Flutter - Zawijaj tekst przy przepełnieniu, na przykład wstaw wielokropek lub zanikanie

123

Próbuję utworzyć linię, w której środkowy tekst ma maksymalny rozmiar, a jeśli zawartość tekstu jest zbyt duża, mieści się w rozmiarze.

Wstawiam TextOverflow.ellipsiswłaściwość, aby skrócić tekst i wstawić potrójne punkty, ...ale to nie działa.

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)
                            ),
                          ),
                        ],
                      ),
                    ]
                  )
                )
              ],
            ),
          )
        ),
      ]
    )
  );
}

wynik:

wprowadź opis obrazu tutaj

spodziewany:

wprowadź opis obrazu tutaj

rafaelcb21
źródło

Odpowiedzi:

251

Powinieneś owinąć się Containerw, Flexibleaby dać Rowznać, że jest w porządku, Containeraby był węższy niż jego wewnętrzna szerokość. Expandedrównież zadziała.

zrzut ekranu

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
źródło
2
Mam podobny problem na kolumnie. To podejście nie działa dla mnie. stackoverflow.com/questions/52206221/…
Michael Tedla
czy jest jakiś sposób, żebyśmy mogli to zaimplementować w Textfield?
mangkool
jeśli chcesz, aby również zawierał tekst wrap_content, określ właściwość fit za pomocą FlexFit.loose,
martinseal1987
110

Korzystanie z wielokropka

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

wprowadź opis obrazu tutaj


Korzystanie z funkcji Fade

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

wprowadź opis obrazu tutaj


Korzystanie z Clip

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

wprowadź opis obrazu tutaj


Uwaga:

Jeśli używasz Textwnętrza a Row, możesz umieścić powyżej w Textśrodku Expanded:

Expanded(
  child: AboveText(),
)
CopsOnRoad
źródło
czy mogę dodać, gdy przepełnia tekst, a następnie dodać płaski przycisk, taki jak ... więcej link
mr.hir
@ mr.hir Przepraszam, że nie rozumiem.
CopsOnRoad
To nie działa, jeśli tekst i inny widżet (np. Ikona) są wyśrodkowane w wierszu.
Łukasz Ciastko
softWrap: falsejest dokładnie tym, czego potrzebowałem, dzięki!
coldembrace
Hej, a co jeśli chcemy dodać np. Nową stronę z przepełnionym tekstem?
Nithin Sai
22

Możesz użyć tego kodu uciętego, aby wyświetlić tekst z wielokropkiem

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
źródło
11
Dołącz również opis tego kodu, aby wyjaśnić, w jaki sposób odpowiada na pytanie.
jkdev
14

Możesz to zrobić w ten sposób

Expanded(
   child: Text(
   'Text',
   overflow: TextOverflow.ellipsis,
   maxLines: 1
   )
)
Cenk YAGMUR
źródło
8

najpierw zawiń swój Rowlub Columnw widżet Flexiblelub, Expandeda następnie

Text(
    'your long text here',
    overflow: TextOverflow.fade,
    maxLines: 1,
    softWrap: false,
    style: Theme.of(context).textTheme.body1,
)
Abdurahman Popal
źródło
Tak, to jest właściwy sposób, najpierw zawinięcie kolumny w Expanded naprawdę zadziałało! i użyć Text w elementach podrzędnych Column.
ArifMustafa
5

Jednym ze sposobów naprawienia przepełnienia widżetu tekstowego w wierszu, jeśli na przykład wiadomość na czacie może być jedną naprawdę długą linią. Możesz utworzyć Container i BoxConstraint z wartością maxWidth.

            Container(
              constraints: BoxConstraints(maxWidth: 200),
                child: Text(
                  (chatName == null) ? " ": chatName,
                  style: TextStyle(
                      fontWeight: FontWeight.w400,
                      color: Colors.black87,
                      fontSize: 17.0),
                )
            ),
Justin B.
źródło
to działało dla mnie dzięki
aida
3
SizedBox(
    width: 200.0,
    child: Text('PRODUCERS CAVITY FIGHTER 50X140g',
                overflow: TextOverflow.ellipsis,
                style: Theme.of(context).textTheme.body2))

Po prostu zawiń widżet, który może przyjąć określoną szerokość, aby działał, lub przyjmie szerokość kontenera nadrzędnego.

chisom onwuegbuzie
źródło
0

Myślę, że kontenerowi nadrzędnemu należy nadać maksymalną szerokość odpowiedniego rozmiaru. Wygląda na to, że pole tekstowe wypełni dowolną przestrzeń podaną powyżej.

Randal Schwartz
źródło
0

W zależności od twojej sytuacji myślę, że jest to najlepsze podejście poniżej.

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
źródło
0

Jeśli po prostu umieścisz tekst jako element podrzędny (-y) kolumny, jest to najłatwiejszy sposób na automatyczne zawijanie tekstu. Zakładając, że nie dzieje się nic bardziej skomplikowanego. W takich przypadkach myślę, że utworzysz kontener o wymiarach według własnego uznania i umieścisz w nim kolejną kolumnę, a następnie tekst. To wydaje się dobrze działać. Pojemniki chcą się skurczyć do rozmiaru swojej zawartości, a to wydaje się naturalnie kolidować z opakowaniem, które wymaga więcej wysiłku.

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
źródło
0

Jest wiele odpowiedzi, ale trochę więcej to zauważy.

1. klip

Przytnij przepełniony tekst, aby naprawić jego kontener.

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

Wynik:

wprowadź opis obrazu tutaj

2. blaknięcie

Zanikaj przepełniony tekst do przezroczystości.

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

Wynik:

wprowadź opis obrazu tutaj

3. ellipsis

Użyj wielokropka, aby wskazać, że tekst się przepełnił.

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

Wynik:

wprowadź opis obrazu tutaj

4. widoczne

Renderuj przepełniony tekst poza jego kontenerem.

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

Wynik:

wprowadź opis obrazu tutaj

jitsm555
źródło
-3

Próbować:

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

To pokaże OVER FLOW. Jeśli wystąpi przepełnienie, zostanie rozwiązany.

Bilal BSL
źródło