时间戳

首页 > 解决方案 > 使用 Flutter 将文本基线与列内的文本对齐

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

问题描述

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

我这样做的方法是将图标和第一个文本小部件放在一列中，然后将该列与第二个文本小部件一起放在一行中。我在行小部件中使用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,
        )
    ),
  ],
);

任何帮助表示赞赏！

标签： flutterdartflutter-layoutbaseline

解决方案

Column 将自己的基线定义为其第一个孩子的基线*。这就是为什么右侧的标签与图标底部对齐的原因：

示例截图

一个简单的解决方法是使“17:59”成为 Column 的第一个子项（图标现在会在下方），然后使用 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'),
  ],
)

* 实际上，第一个拥有基线的孩子，无论如何Icon都有它

推荐阅读