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

【问题标题】：Flutter: Excess space on multiline Text widgetsFlutter：多行文本小部件上的多余空间
【发布时间】：2020-10-09 02:23:03
【问题描述】：

我有一个文本小部件，它被带有 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 以移除多余的空间？

【问题讨论】：

标签： flutter text containers constraints spacing

【解决方案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,),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：