многоточие переполнения только для последнего виджета в строке - PullRequest
Новая
       11

многоточие переполнения только для последнего виджета в строке

0 голосов
/ 02 октября 2018

У меня есть строка, содержащая изображения и тексты, все текстовые виджеты должны заполнять все доступные места в строке, кроме последнего.Если последний текст не умещается на экране, его следует закорочить до трех точек (TextOverflow.ellipsis).

У меня есть такое решение: 

List<Widget> widgets = [];

for (var item in listItems) {
   widgets.add(Image.asset("images/image.png", width: 10.0, height: 10.0));
   widgets.add(Flexible(child:Padding(padding: EdgeInsets.only(right: 8.0),child:Text(item.text, style: captionStyle, overflow:TextOverflow.ellipsis))));
}

//then

Expanded(child:new Row(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: widgets
),

)

Но это не дает необходимого эффекта

⁍ - Изображение

|- Сторона строки

( для лучшего понимания )

виджеты размещаются таким образом - |⁍ someTex ... ⁍ someTex ... ⁍ someTex ... |

или |⁍ так ... ⁍ так ... ⁍ так ... ⁍ так ... ⁍ так ... |если в списке много элементов

Мне нужно, чтобы виджеты создавались таким образом - | omesomeText ⁍someTex ⁍someTex ⁍ some ... | только последний виджет должен быть закорочен

Кстати, я не знаю, сколько предметов попадет в цикл.

Может кто-нибудь объяснить, как я могу шортитьтолько последний виджет?

Заранее спасибо!

1 Ответ

0 голосов
/ 02 октября 2018

Очень простой пример, но здесь обрезается только последний текстовый виджет 

    Row(
      children: <Widget>[
        Text("Some Text", overflow:TextOverflow.ellipsis),
        Text("Some Text", overflow:TextOverflow.ellipsis),
        Text("Some Text", overflow:TextOverflow.ellipsis),
        Text("Some Text", overflow:TextOverflow.ellipsis),
        Text("Some Text", overflow:TextOverflow.ellipsis),
        Expanded(child: Text("Some Text", overflow:TextOverflow.ellipsis)),
      ],
    ),

Так что в вашем случае вам нужно обернуть последние дочерние элементы в Expanded следующим образом: 

int count = 1;
for (var item in listItems) {
   widgets.add(Image.asset("images/image.png", width: 10.0, height: 10.0));
   if(count == listItems.length) widgets.add(Expanded(Flexible(child:Padding(padding: EdgeInsets.only(right: 8.0),child:Text(item.text, style: captionStyle, overflow:TextOverflow.ellipsis))));
   else widgets.add(Flexible(child:Padding(padding: EdgeInsets.only(right: 8.0),child:Text(item.text, style: captionStyle, overflow:TextOverflow.ellipsis))));
   count++;
}
...