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.ellipsis
wł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:
flutter
dart
flutter-layout
rafaelcb21
źródło
źródło
Korzystanie z wielokropka
Korzystanie z funkcji Fade
Korzystanie z Clip
Uwaga:
Jeśli używasz
Text
wnętrza aRow
, możesz umieścić powyżej wText
środkuExpanded
:źródło
softWrap: false
jest dokładnie tym, czego potrzebowałem, dzięki!Możesz użyć tego kodu uciętego, aby wyświetlić tekst z wielokropkiem
źródło
Możesz to zrobić w ten sposób
źródło
najpierw zawiń swój
Row
lubColumn
w widżetFlexible
lub,Expanded
a następnieźródło
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.
źródło
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
źródło
Po prostu zawiń widżet, który może przyjąć określoną szerokość, aby działał, lub przyjmie szerokość kontenera nadrzędnego.
źródło
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.
źródło
W zależności od twojej sytuacji myślę, że jest to najlepsze podejście poniżej.
źródło
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.
źródło
Jest wiele odpowiedzi, ale trochę więcej to zauważy.
1. klip
Przytnij przepełniony tekst, aby naprawić jego kontener.
Wynik:
2. blaknięcie
Zanikaj przepełniony tekst do przezroczystości.
Wynik:
3. ellipsis
Użyj wielokropka, aby wskazać, że tekst się przepełnił.
Wynik:
4. widoczne
Renderuj przepełniony tekst poza jego kontenerem.
Wynik:
źródło
Próbować:
To pokaże
OVER FLOW
. Jeśli wystąpi przepełnienie, zostanie rozwiązany.źródło