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

【问题标题】：How to add ellipsis to a text widget in between two text widget in a row widget如何将省略号添加到行小部件中两个文本小部件之间的文本小部件
【发布时间】：2021-04-01 21:35:56
【问题描述】：

我需要创建一个类似于下图的 UI。要缩小的第二个文本为连续第三个文本留出空间。

例外的用户界面

但第二个文本不会缩小，而第三个文本小部件会缩小

当前用户界面

我使用扩展来包装第三个 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

【问题讨论】：

尝试在所有文本小部件上将 maxLines 设置为 1

标签： flutter refresh bloc

【解决方案1】：

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

原因

Expanded 小部件在剩余的可用空间内渲染子级，

在上述要求中，第二个文本需要在剩余空间中呈现，而不是第三个，因此第二个文本必须用Expanded 包裹，而不是第三个。

【讨论】：

工作超酷。添加了带有解释的编辑。介意接受吗？
完成！伟大的编辑。让答案更有帮助。

【解决方案2】：

您可以使用扩展和弹性值来分配整个空间

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,
                  ),
                ),
              )
            ],
          ),

结果

【讨论】：

当我们将一行分隔为具有成比例大小的子级的小部件时，您的建议很棒。但这不是我的情况。