- Я пытаюсь создать вид списка, который содержит 10 данных, в каждом элементе есть четыре виджета, который заключает в строку.
- Сначала я вставил виджет кругового изображения, затем я добавил расширенный виджет, чтобы разделить текстовые виджеты поровну.
- Почти, я достиг, но я нашел трудности в многоточии текста.
Код
class EmailPage extends StatefulWidget {
@override
_EmailPageState createState() => _EmailPageState();
}
class _EmailPageState extends State<EmailPage> {
GlobalKey _keyRed = GlobalKey();
var name = "Adellena Jacksonnnnnnnnnnnnnnnnnnnnnnnnnnnn";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: greenColor,
title: const Text('Inbox'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.edit),
onPressed: () => Navigator.of(context).pop(null),
),
],
),
body: SizedBox(
width: MediaQuery.of(context).size.width,
child: ListView.builder(
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
SizedBox(
width: 30,
height: 30,
child: CircleAvatar(
backgroundColor: Colors.brown.shade800),
),
Expanded(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 4,
child: Container(
child: new Text(
name,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(fontSize: 14),
),
),
),
new Expanded(
flex: 3,
child: new Text(
"&14215",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 12),
),
),
new Expanded(
flex: 3,
child: new Text(
"1000 min ago",
textAlign: TextAlign.end,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 14),
),
),
],
),
),
],
),
);
}),
));
}
}
Снимок экрана 1
Когда мы удаляем
overflow: TextOverflow.ellipsisв текстовом виджете, это выглядит так [Скриншот 2]
Снимок экрана 2
На изображении выше я не получил полный текст "AdellenaJacksonnnnnnnnnn ", но расширен, ограничить виджет сколько изгиб может быть показано в нем. Проблема в том, что многоточие не работает как Ожидается,
Примечание. Когда я удаляю пробел в строке var name = "AdellenaJacksonnnnnnnnn";, подобный этому многоточию, работает нормально
3 ответа
Вы можете использовать этот глупый хак, разделив имя на, вы можете изменить и использовать его, если вы установите максимальную длину для имени.
Я обрезал имя, чтобы оно не выглядело так, будто оно переполнено, ладят с пользовательским интерфейсом, предположим, что maxlength нет
Flexible(
child: Text(
tempname[0],
overflow: TextOverflow.clip,
maxLines: 1,
),
),
Фамилия установлена многоточием, чтобы дать хит, имя переполняется
Flexible(
child: Text(
tempname[0],
overflow: TextOverflow.ellipsis,
),
),
ListView.builder(
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
var tempname = name.split(' ');
return Padding(
padding: const EdgeInsets.all(10.0),
child: new Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
SizedBox(
width: 30,
height: 30,
child: CircleAvatar(
backgroundColor: Colors.brown.shade800),
),
Expanded(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 4,
// width: 100,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Text(
tempname[0],
overflow: TextOverflow.clip,
maxLines: 1,
),
),
Text(' '),
Flexible(
child: Text(
tempname[1],
overflow: TextOverflow.ellipsis,
),
)
],
),
),
new Expanded(
flex: 3,
child: new Text(
"&14215",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 12),
),
),
new Expanded(
flex: 3,
child: new Text(
"1000 min ago",
textAlign: TextAlign.end,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 14),
),
),
],
),
),
],
),
);
}),
Name = 'Adellenaddddddddddddd Jacksoonnnnnnnnnn'; 
Name = 'Nadeem Jacksoonnnnnnnnnn';
Попробуйте с гибким вместо расширенного, потому что. Официальная документация
Использование виджета «Гибкие» дает дочернему элементу строки, столбца или Flex возможность расширения, чтобы заполнить доступное пространство на главной оси (например, по горизонтали для строки или по вертикали для столбца), но, в отличие от расширенного, гибкий не потребуйте, чтобы ребенок заполнил доступное место.
Попробуйте ввести фамилию отдельно, как этот Джексон НН НН ННН ННН, который будет работать лучше
En Español