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

Question

我在对齐小部件时遇到问题。我在这里看到过询问类似问题的问题，但是这些问题似乎都不适合我的特定任务。我正在尝试创建一个包含一个图标和两个文本小部件的小部件。该图标应该位于第一个文本窗口小部件的中心，而另一个文本窗口小部件应与第一个文本小窗口的基线对齐。

我执行此操作的方法是将图标和第一个文本小部件放在一列中，然后将该列与第二个文本小部件一起放在一行中。我在行小部件中使用了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 Pixel 3a XL


Google Pixel 2