如何垂直对齐 Flutter Text Widget？答案

【问题标题】：How can I align the Flutter Text Widget Vetically?如何垂直对齐 Flutter Text Widget？
【发布时间】：2021-08-02 00:25:43
【问题描述】：

我正在尝试垂直对齐这些文本小部件，以便它们在两行之间完全居中。然而，flutter 认为文本小部件的大小与文本后面的红色矩形一样大（文本的背景颜色仅用于说明目的），因为有下降线。但是，这会导致文本看起来有点偏离中心。有没有办法使用基线而不是 decender 来对齐文本？

【问题讨论】：

最好的做法是用Center 小部件包装Text 小部件。
你能分享你用来创建这个特定布局的代码吗？这将有助于复制确切的设计并找出正确的解决方案...我觉得可以通过扩展然后将其子项对齐到中心来解决此问题，但需要查看代码以确定。
同意@Sidak，如果你给我们你的代码并修复它，这个问题会更容易回答

标签： flutter flutter-layout flutter-widget flutter-text

【解决方案1】：

使用文本高度（行高）

Text('Hey There', 
  style: TextStyle(height: 5, fontSize: 10),
)

【讨论】：

【解决方案2】：

您可以尝试使用 Align 小部件，只需使用 Align 包装您的文本并提供您的对齐方式

【讨论】：

【解决方案3】：

将它包裹在一个中心小部件中

Center(
    child: Text(
      "PAYMENT",
      style: TextStyle(
        backgroundColor: Colors.blue,
        fontSize: 20,
      ),
      textAlign: TextAlign.center,
    ),
)

飞镖盘：

https://dartpad.dev/flutter?null_safety=true&id=3b0bf085892c1867012f5dd00713ccf7

【讨论】：

【解决方案4】：

我认为您正在寻找的是在 Column 小部件中使用“CrossAxisAlignment”属性。

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Delivery'),
    Text('Payment'),
    Text('Total'),
  ],
)

【讨论】：