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

问题描述 投票:1回答:2

我有一个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 
flutter flutter-layout
2个回答
2
投票

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

屏幕截图:

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here


代码:

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

0
投票

尝试这种方式

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

输出

当长文本时

enter image description here

使用短文本

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.