Flutter - Einfügen überlauf Auslassungszeichen im text
Ich versuche, um eine Linie in der Mitte-text hat eine maximale Größe, und wenn der text-Inhalt ist zu groß, es passt in der Größe.
Ich das einfügen TextOverflow.ellipsis
Eigenschaft kürzen Sie den text und setzen Sie die dreifach-Punkte ...
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:
InformationsquelleAutor rafaelcb21 | 2017-06-16
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie wickeln Sie Ihre
Container
imFlexible
, lassen Sie IhreRow
wissen, dass es ok ist für dieContainer
werden, die schmaler als Ihre eigene Breite.Erweitert
wird auch funktionieren.InformationsquelleAutor Collin Jackson
Mit Auslassungszeichen
Mit Fade
Mit Clip
kann ich hinzufügen, wenn der text überlauf, dann fügen Sie ein Flachbild-button wie link ...mehr
Ich bin traurig, dass ich nicht bekomme.
InformationsquelleAutor CopsOnRoad
Können Sie diesen code snipped zum anzeigen von text mit Auslassungszeichen
Sie brauchen nicht
maxLines
undsoftWrap
bei der Verwendung von Auslassungszeichen. Schauen Sie sich meine Antwort.InformationsquelleAutor Yauhen Sampir
Ich denke, dass der übergeordnete Container muss eine maxbreite von der richtigen Größe. Es sieht aus wie das Textfeld zu füllen, was Raum ist es, die oben gegeben.
InformationsquelleAutor Randal Schwartz
Verpackung, deren child-Elemente in einer Zeile oder Spalte, bitte wickeln Sie Ihre Spalten oder Zeilen ist die neue, Flexible();
https://github.com/flutter/flutter/issues/4128
InformationsquelleAutor Oto-obong Eshiett
Nur wickeln Sie in einem widget, das können eine bestimmte Breite, damit es funktioniert, oder es übernimmt die Breite des übergeordneten Containers.
InformationsquelleAutor chisom onwuegbuzie
Einen Weg, um fix ein überlauf von einem Text-Widget in eine Zeile, wenn zum Beispiel eine chat-Nachricht kann eine wirklich lange Leitung. Sie können einen Container erstellen und eine BoxConstraint mit maxWidth.
InformationsquelleAutor Justin B