Flutter:多行文本小部件上的多余空间

Question

我有一个 Text 小部件，它被带有 BoxConstraints 的 Container 约束，我注意到当文本有多行时，由于溢出而有多余的间距(在右侧)。



减去样式的代码很简单:

Container(
  constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * (2/3)),
  child: Padding(
    padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
    child: Text(
      message
    ),
  ),
)

您可以看到文本右侧的空间。查看叠加层，看起来这是预期的行为，但是有什么方法可以约束 Widget 以去除多余的空间？

Answer 1

您正在寻找属性:textWidthBasis。
设置它TextWidthBasis.longestLine并且文本宽度将根据 longestLine 调整大小因此删除右侧的空格。

Text("Why don't you I set up an appointment and we can discuss this further...",
                  textWidthBasis: TextWidthBasis.longestLine,),

完整代码:

class MultiLinee extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.grey,
          child: Container(
            constraints: BoxConstraints(maxWidth: MediaQuery
                .of(context)
                .size
                .width * (2 / 3)),
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
              child: Container(
                color: Colors.yellow,
                child: Text("Why don't you I set up an appointment and we can discuss this further...",
                  textWidthBasis: TextWidthBasis.longestLine,),
              ),
            ),
          ),
        ),
      ),
    );
  }
}