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.ellipsis
Eigenschaft 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:
erwartet:
flutter
dart
flutter-layout
rafaelcb21
quelle
quelle
Ellipse verwenden
Fade verwenden
Clip verwenden
Hinweis:
Wenn Sie
Text
in a verwendenRow
, können Sie oben wieText
folgtExpanded
einfügen:quelle
softWrap: false
ist genau das, was ich brauchte, danke!Sie können diesen Code verwenden, um Text mit Auslassungspunkten anzuzeigen
quelle
Sie können es so machen
quelle
Wickeln Sie zuerst Ihr
Row
oderColumn
in einFlexible
oder einExpanded
Widget einquelle
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
quelle
Schließen Sie einfach ein Widget an, das eine bestimmte Breite annehmen kann, damit es funktioniert. Andernfalls wird die Breite des übergeordneten Containers angenommen.
quelle
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.
quelle
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.
quelle
Abhängig von Ihrer Situation denke ich, dass dies der beste Ansatz ist.
quelle
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.
quelle
Es gibt viele Antworten, aber Will noch etwas beobachten.
1. Clip
Schneiden Sie den überfüllten Text ab, um den Container zu reparieren.
Ausgabe:
2. verblassen
Überblenden Sie den überlaufenden Text transparent.
Ausgabe:
3. Ellipse
Verwenden Sie ein Auslassungszeichen, um anzuzeigen, dass der Text übergelaufen ist.
Ausgabe:
4. sichtbar
Überlaufenden Text außerhalb des Containers rendern.
Ausgabe:
quelle
Versuchen:
Dies wird zeigen
OVER FLOW
. Wenn es einen Überlauf gibt, wird dieser behandelt.quelle