flutter - 将文本包装在一行中，如果有可用空间，则用分隔符填充它

Question

我有一个Row，其中包含一个 Text 和一个扩展Divider. 通常文本很短，所以分隔线占用了很多宽度。

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

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

我怎样才能实现这种行为（破折号应该是分隔线）：

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

Loooooooooooooong Text ---

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

标签： flutterflutter-layout

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