将文本排成一行，如果有空格，请用分隔符填充它

Question

我有一个Row，其中包含一个文本和一个扩展的Divider。通常情况下，文本确实很短，所以分隔符占用了很多宽度。

Row (
  children: <Widget>[
    Text('some text'),
    Expanded(
      child: Divider()
    )
  ]
)

但是有时文本会变长，因此它需要的宽度比宽度大。在这种情况下，它应该换行到第二行。我也尝试将Text包装到Expanded中，但是在这种情况下，无论文本多长，分隔线都会占用一半的空间。

如何实现此行为（破折号应为分隔线）：

Short Text ---------------

Loooooooooooooong Text ---

Tooooooooooooooooooo -----  // <- Divider should be vertically centered
Long Text 

Answer 1

使用BoxConstraints，用分隔线替换Container，您会发现它也垂直对齐。

屏幕截图：

---

代码：

@override
Widget build(BuildContext context) {
  final text = 'Tooooooooooooooooooooooooooooooooooooooooooooooooo Long Text  ';
  final screenWidth = MediaQuery.of(context).size.width;
  final minDividerWidth = 30.0;
  final dividerHeight = 30.0;

  return Scaffold(
    body: Center(
      child: Row(
        children: <Widget>[
          ConstrainedBox(
            constraints: BoxConstraints(maxWidth: screenWidth - minDividerWidth),
            child: Text(text),
          ),
          Expanded(
            child: Container(
              height: dividerHeight,
              color: Colors.red,
            ),
          ),
        ],
      ),
    ),
  );
}

Answer 2

尝试这种方式

Container(
              child: Row(
            children: <Widget>[
              Flexible(child: new Text("A  text")),
              SizedBox(
                width: 20,
              ),
              Text('some text'),
            ],
          )),

输出

当长文本时

使用短文本