Flutter 将文本列与单个文本对齐

Question

我想在 Flutter 中做这个：

我的代码：

Row(
             children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: const [
                Text('Total', style: TextStyle( color: Color(0xFF68B762)),),
                Text('Km', style: TextStyle( color: Color(0xFF68B762)),),
              ],),
              const Text('612', style: TextStyle(fontSize: 30, fontFamily: SecondaryFontMedium, color: Color(0xFF68B762)),),
            ],),

结果：

Answer 1

在“总计”和“公里”之间添加

\n

。像这样使用，

 Row(
      children: [
        Text('Total\nKm', textAlign: TextAlign.end, style: TextStyle(color: Color(0xFF68B762))),
        Text('612',
            style: TextStyle(
                fontSize: 30,
                fontFamily: SecondaryFontMedium,
                color: Color(0xFF68B762))),
      ],
    )

结果：

Answer 2

如果您希望

Total

和

Km

更靠近，您可以尝试在样式中设置高度。例如

Text('Total', style: TextStyle(height: 1, color: Color(0xFF68B762))),
Text('Km', style: TextStyle(height: 1, color: Color(0xFF68B762)),),

结果：

Answer 3

我不知道错误是否是间距，或者左侧的字母没有对齐，但我得到了这样的结果：

          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: 40, // change this
                color: Colors.white,
                child: FittedBox( // this is important
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: const [
                      Text(
                        'Total',
                        style: TextStyle(color: Color(0xFF68B762)),
                      ),
                      Text(
                        'Km',
                        style: TextStyle(color: Color(0xFF68B762)),
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                height: 40, // change this
                color: Colors.white,
                child: const FittedBox( // this is important
                  child: Text(
                    '612',
                    style: TextStyle(
                      height: 1, // this is important
                      fontSize: 45,
                      color: Color(0xFF68B762),
                    ),
                  ),
                ),
              ),
            ],
          )

我所做的是添加两个具有相同大小（例如 40）的 Container，然后使用小部件 FittedBox 使得当您降低容器的高度时，字母会适应并且不会出现问题。 ..

现在，在删除“填充”的第二个字母中，在 TextStyle 中添加了 height : 1，如果您可以阅读更多内容，那就太好了，这样您就不会遇到问题，但基本上它可以与左边的字母对齐。

尝试编辑高度容器，你会看到

Answer 4

试试这个，

return MaterialApp(
  home: Scaffold(
    body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Total\nKm',
            textAlign: TextAlign.right,
            style: TextStyle(color: Color(0xFF68B762)),
          ),
          SizedBox(
            width: 5,
          ),
          Text(
            '612',
            style: TextStyle(
                fontSize: 30,
                // fontFamily: SecondaryFontMedium,
                color: Color(0xFF68B762)),
          ),
        ],
      ),
    ),
  ),
);

快乐编码！

Answer 5

更改字体大小并使行居中对齐可以以任何字体提供您想要的结果

Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Total',
                  style: TextStyle(
                    color: Color(0xFF68B762),
                  ),
                ),
                Text(
                  'Km',
                  style: TextStyle(
                    color: Color(
                      0xFF68B762,
                    ),
                  ),
                ),
              ],
            ),
            Text(
              '612',
              style: TextStyle(
                fontSize: 40,
                color: Color(0xFF68B762),
              ),
            ),
          ],
        ),