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

Question

我有一个文本小部件，它被带有 BoxConstraints 的容器约束，我注意到当文本有多行时，由于溢出会出现多余的间距（右侧）。

减去样式的代码很简单：

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

可以看到正文右边的space。查看叠加层，看起来这是预期的行为，但是有什么方法可以约束 Widget 删除多余的 space?

Answer 1

您正在寻找属性：textWidthBasis。将其设置为 TextWidthBasis.longestLine，文本宽度将根据 longestLine 调整大小，因此删除右侧的空白 space。

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

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

Flutter: Excess space on multiline Text widgets

containers

text

constraints

spacing

flutter