flutter - 文本中的空格 - Flutter

Question

在 Flutter 中使用 Unicode 文本时，每个字符中似乎都有很多空格，这使得对齐变得困难。在下面的代码和图片中，我试图让 35m 坐在十字箭头上，中间没有空格。我还试图让三颗星在开始时与starburst这个词垂直居中对齐，然后将（35m和箭头）、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),
                    ),
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );

标签： flutterdartflutter-layout

Answer 1

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

使用列输出：

使用堆栈输出：

完整代码：

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稍微调整小部件的孩子，但我希望这个答案能给出这个想法。