使用 Flutter 将文本基线与列内的文本对齐

Question

我在对齐小部件时遇到问题。我在这里看到了询问类似事情的问题，但是，none 似乎适用于我的特定任务。我正在尝试创建一个包含一个图标和两个文本小部件的小部件。该图标应该位于第一个文本小部件的中央，另一个文本小部件应该与第一个文本小部件的基线对齐。

我这样做的方法是将图标和第一个文本小部件放在一列中，然后将该列与第二个文本小部件放在一行中。我在行小部件中使用 crossAxisAlignment: CrossAxisAlignment.baseline 和 textBaseline: TextBaseline.ideographic 但由于某种原因，第二个文本与图标对齐。它看起来像这样：

如果我改为使用 crossAxisAlignment: CrossAxisAlignment.end，文本小部件不会正确对齐：

我尝试将文本小部件排成一行并将它们与图标一起放在一列中，但是图标不再位于第一个文本小部件的中心：

这是第一张图片使用的代码，其他图片只是相同代码的重新排列。

return Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.ideographic,
  children: [
    Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Icon(
          widget.icon,
          color: color_text_highlight,
          size: 20,
        ),
        Text(
          widget.data,
          style: TextStyle(
            fontSize: 28,
            fontFamily: 'Quicksand',
            color: color_text_highlight,
          ),
        ),
      ],
    ),

    SizedBox(width: 5),

    Text(
        widget.label,
        style: TextStyle(
          fontSize: 12,
          fontFamily: 'Roboto',
          color: color_text_dark,
        )
    ),
  ],
);

感谢任何帮助！

Answer 1

可能有这样的解决方案，但该解决方案可能会出现问题，因为它取决于字体大小。您将需要相应地更改填充值。

   Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Column(
                children: [
                  Icon(
                    Icons.timer,
                    color: Colors.lightGreen,
                    size: 20,
                  ),
                  Text(
                    "17:59",
                    style: TextStyle(
                      fontSize: 28,
                      fontFamily: 'Quicksand',
                      color: Colors.lightGreen,
                    ),
                  ),
                ],
              ),
              SizedBox(width: 5),
              Padding(
                padding: EdgeInsets.only(bottom: 4),
                child: Text("mm:ss",
                    style: TextStyle(
                      fontSize: 12,
                      fontFamily: 'Roboto',
                      color: Colors.white70,
                    )),
              ),
            ],
          ),
        ],
      )

Google Nexus 9 平板电脑

Google 像素 3a XL

Google 像素 2

Answer 2

Columndefines它自己的基线作为它第一个child*的基线。这就是为什么右边的标签与图标底部对齐的原因：

一个简单的解决方法是将“17:59”设为列的第一个 child（图标现在会在下方），然后使用 VerticalDirection.up 将它们换回来：

Row(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Column(
      mainAxisSize: MainAxisSize.min,
      verticalDirection: VerticalDirection.up, // <-- reverse direction
      children: [
        Text('17:59', style: TextStyle(fontSize: 32)), // <-- first child
        Icon(Icons.timer),
      ],
    ),
    Text('mm:ss'),
  ],
)

* 实际上，第一个 child 本身就有基线 ，无论如何 Icon 确实有它

使用 Flutter 将文本基线与列内的文本对齐

Align text baseline with text inside a column, using Flutter

baseline

dart

flutter

flutter-layout