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

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:

spodziewany:

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.

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

Korzystanie z wielokropka

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

Korzystanie z funkcji Fade

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

Korzystanie z Clip

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

Uwaga:

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

Expanded(
  child: AboveText(),
)

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

Możesz to zrobić w ten sposób

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

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

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

Zawijanie, którego elementy podrzędne znajdują się w wierszu lub kolumnie, zawiń kolumnę lub wiersz jest nowe Elastyczne ();

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

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

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.

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

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

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:

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:

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:

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:

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.