如何将省略号添加到行小部件中两个文本小部件之间的文本小部件

Question

我需要创建一个类似于下图的 UI。为连续第三个文本提供 space 的第二个文本。

例外UI

但是第二个文本没有缩小，而第三个文本小部件缩小了

现在UI

我使用 expanded 来包装第三个 Text 小部件。没用。

Row(children: [
  Container(color:Colors.lightBlue, child:Text('1one'),),
  Container(
    color:Colors.lightGreen,
    child:Text(
      '2Two2Two2Two2dbTwo2Two2Two2Two2Two2Two2Two2Two2Two2Two2Two2Two2', 
      overflow: TextOverflow.ellipsis)),
  Expanded(
    child:Container(
      color:Colors.orange, 
      child: Text('Three3Three3Three3Three3Three3Three3Three3Three3Three3Three')
    )
  )
])

Dart pad

Answer 1

用 Expanded 包装第二个小部件，而不是包装第三个小部件。

原因

Expanded 小部件在可用的剩余空间内渲染子项 space,

在上述要求中，第二个文本需要呈现在左侧 space 而不是第三个，因此第二个文本必须被 Expanded 而不是第三个包裹。

Answer 2

你可以使用 expanded 和 flex 值来分配整个 space

Row(
            children: [
              Expanded(
                flex: 1,
                child: Container(
                  color: Colors.lightBlue,
                  child: Text('1one'),
                ),
              ),
              Expanded(
                flex: 2,
                child: Container(
                  color: Colors.lightGreen,
                  child: Text(
                      '2Two2Two2Two2dbTwo2Two2Two2Two2Two2Two2Two2Two2Two2Two2Two2Two2',
                      overflow: TextOverflow.ellipsis),
                ),
              ),
              Expanded(
                flex: 3,
                child: Container(
                  color: Colors.orange,
                  child: Text(
                    'Three3Three3Three3Three3Three3Three3Three3Three3Three3Three',
                    maxLines: 1,
                  ),
                ),
              )
            ],
          ),

结果

如何将省略号添加到行小部件中两个文本小部件之间的文本小部件

How to add ellipsis to a text widget in between two text widget in a row widget

flutter

refresh

bloc