• Я пытаюсь создать вид списка, который содержит 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

enter image description here

Когда мы удаляем overflow: TextOverflow.ellipsis в текстовом виджете, это выглядит так [Скриншот 2]

Снимок экрана 2

enter image description here

На изображении выше я не получил полный текст "AdellenaJacksonnnnnnnnnn ", но расширен, ограничить виджет сколько изгиб может быть показано в нем. Проблема в том, что многоточие не работает как Ожидается,

Примечание. Когда я удаляю пробел в строке var name = "AdellenaJacksonnnnnnnnn";, подобный этому многоточию, работает нормально

8
Ko Vartthan 2 Май 2019 в 12:16

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';

enter image description here

2
Nadeem Siddique 10 Май 2019 в 05:09

Попробуйте с гибким вместо расширенного, потому что. Официальная документация

Использование виджета «Гибкие» дает дочернему элементу строки, столбца или Flex возможность расширения, чтобы заполнить доступное пространство на главной оси (например, по горизонтали для строки или по вертикали для столбца), но, в отличие от расширенного, гибкий не потребуйте, чтобы ребенок заполнил доступное место.

1
Jalil 2 Май 2019 в 13:15

Попробуйте ввести фамилию отдельно, как этот Джексон НН НН ННН ННН, который будет работать лучше

1
Murat Aslan 2 Май 2019 в 13:00