Question

我有一个包含图像和文本的行，所有文本小部件都应填充该行中除最后一个以外的所有可用空间。如果最后一个文本不适合屏幕，则应将其缩写为三个点（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 ... |

或| ⁍so ...⁍so ...⁍so ...⁍so ...⁍so ... |如果列表中有很多物品

我需要小部件以这种方式构建- |⁍someText⁍someTex⁍someTex⁍一些... | 仅应缩短最后一个小部件

顺便说一句，我不知道会有多少个项目进入循环。

有人可以解释我只能做空最后一个小部件吗？

谢谢！

Answer 1

非常简单的示例，但是这里仅剪切了最后一个文本小部件

    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++;
}

仅对行中的最后一个小部件溢出省略号

1 个答案: