文本中的空格- Flutter

Question

在flutter中使用Unicode文本时，每个字符中似乎有很多空格，这使得很难对齐。在下面的代码和图片中，我试图让35m坐在十字形箭头上，中间没有空间。我还试图让开始的三颗星的中心与单词starburst垂直对齐，然后中心对齐(35米和箭头)，starburst，这三颗星都垂直对齐。

Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Text(
                  '\u{2605}' * 3,
                  style: TextStyle(
                    fontSize: 18.0,
                  ),
                ),
                Text(
                  'Starburst',
                  style: TextStyle(
                    fontSize: 28.0,
                  ),
                ),
                Column(
                  children: [
                    Text(
                      '35m',
                      style: TextStyle(
                        fontSize: 18.0,
                      ),
                    ),
                    Text(
                      '\u{2194}',
                      style: TextStyle(fontSize: 35.0),
                    ),
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );

​

​

Answer 1

将行crossAxisAlignment属性设置为CrossAxisAlignment.center

Row(
    crossAxisAlignment: CrossAxisAlignment.center
    children: [....

和

将列的mainAxisAlignment属性设置为MainAxisAlignment.center

Column(
    mainAxisAlignment: MainAxisAlignment.center
    children: [...

Answer 2

您可以使用Stack而不是Column，并根据您的UI规范对齐文本：

使用列的输出

​

​

使用堆栈：的输出

​

​

完整代码：

return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  '\u{2605}' * 3,
                  style: TextStyle(
                    fontSize: 18.0,
                  ),
                ),
                Text(
                  'Starburst',
                  style: TextStyle(
                    fontSize: 28.0,
                  ),
                ),
//                 SizedBox(width: 5.0),
                Container(
                  width: 50.0,
                  child: Center(
                    child: Stack(
                      children: [
                        Positioned(
                          top: 4,
                          child: Text(
                            '35m',
                            style: TextStyle(
                              fontSize: 18.0,
                            ),
                          ),
                        ),
                        Text(
                          '\u{2194}',
                          style: TextStyle(fontSize: 40.0),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );

您可能需要对Stack小部件的子项进行一些调整，但我希望这个答案能给出答案。