Я пытаюсь создать строку, в которой центральный текст имеет максимальный размер, и если текстовое содержимое слишком велико, оно соответствует размеру.
Я вставляю TextOverflow.ellipsis
свойство для сокращения текста и вставки тройных точек, ...
но оно не работает.
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)
),
),
],
),
]
)
)
],
),
)
),
]
)
);
}
результат:
ожидается:
flutter
dart
flutter-layout
rafaelcb21
источник
источник
Использование многоточия
Использование Fade
Использование клипа
Примечание:
Если вы используете
Text
внутри aRow
, вы можете поместить вышеText
внутри,Expanded
например:источник
softWrap: false
именно то, что мне нужно, спасибо!Вы можете использовать этот фрагмент кода для отображения текста с многоточием
источник
Вы можете сделать это так
источник
сначала оберните
Row
илиColumn
в виджетFlexible
или,Expanded
затемисточник
Один из способов исправить переполнение текстового виджета внутри строки, если, например, сообщение чата может быть одной действительно длинной строкой. Вы можете создать Контейнер и BoxConstraint с maxWidth в нем.
источник
Перенос, чьи дочерние элементы находятся в строке или столбце, пожалуйста, переносите столбец или строку в новый гибкий ();
https://github.com/flutter/flutter/issues/4128
источник
Просто оберните его внутрь виджета, который может принимать определенную ширину для работы, или он будет принимать ширину родительского контейнера.
источник
Я думаю, что родительскому контейнеру нужно дать maxWidth правильного размера. Похоже, текстовое поле заполнит все пространство, указанное выше.
источник
В зависимости от вашей ситуации, я думаю, что это лучший подход, представленный ниже.
источник
Если вы просто поместите текст как дочерний (рен) столбца, это самый простой способ автоматического переноса текста. Если у вас нет ничего более сложного. В таких случаях я бы подумал, что вы создадите свой контейнер, размер которого вы считаете нужным, и поместите внутрь еще один столбец, а затем свой текст. Кажется, это хорошо работает. Контейнеры хотят сжиматься до размеров своего содержимого, и это, кажется, естественным образом конфликтует с упаковкой, которая требует больших усилий.
источник
Есть много ответов, но будет еще несколько замечаний.
1. клип
Обрежьте переполненный текст, чтобы исправить его контейнер.
Вывод:
2. исчезнуть
Сделайте переполненный текст прозрачным.
Вывод:
3. эллипсис
Используйте многоточие, чтобы указать, что текст вышел за пределы.
Вывод:
4. видимый
Рендеринг переполненного текста за пределами его контейнера.
Вывод:
источник
Пытаться:
Это покажет
OVER FLOW
. Если произойдет переполнение, это будет обработано.источник