返回

横空出世！Flutter Widget 之Baseline横扫“中线”愁绪

前端

为何我们还需要 Baseline？

在Flutter中，部件垂直位置时候其顶部开始的位置和其高度的函数，其顶部开始的第一部分几乎和总是你想要的，但如果不是这样呢？如果你在一个尺寸框内有一段文字，你需要将其底部对齐一个已知的位置，怎么办呢？你是否必须重新发明轮子？当然不是，这里正是Baseline闪耀的时刻。

原理大揭秘：Flutter Widget 之 Baseline 详解

Baseline Widget 通过将子项的小部件底部与基准线对齐来工作。基准线是相对于父部件的一个水平线。Baseline Widget 的基准线由其父部件的字体度量决定。例如，如果父部件是一个 Text Widget，那么基准线就是文本的基线。

何时需要这个 Baseline Widget？

使用Baseline Widget 的最常见情况之一是在文本和其他小部件之间创建对齐。例如，如果你有一个标题和小段落，你可以使用Baseline Widget 来确保标题和小段落底部对齐。

Baseline Widget 也可以用于在容器内垂直对齐小部件。例如，如果你有一个容器和小部件，你可以使用Baseline Widget 来确保小部件底部与容器底部对齐。

如何使用 Flutter Widget 之 Baseline？

使用Baseline Widget 非常简单。你只需将子部件包装在Baseline Widget 中，然后指定基准线相对于父部件的位置。基准线的位置可以使用百分比或像素值来指定。

例如，以下代码将创建一个 Baseline Widget，将子部件底部与父部件底部对齐：

Baseline(
  child: Text('Baseline Widget'),
  baseline: 1.0,
);

以上示例在编写时假设父级部件拥有 textStyle 属性，这样Baseline Widget 就可以利用这些信息来确定基线的位置。

更进一步：Baseline Widget 的进阶用法

Baseline Widget 还可以与其他小部件结合使用以创建更复杂的对齐。例如，你可以使用Baseline Widget 和 Row Widget来创建水平和垂直对齐的文本。

以下代码将创建一个 Row Widget，其中文本居中对齐，并且文本的底部与容器底部对齐：

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Text('Baseline Widget'),
    Text('is awesome'),
  ],
);

结束语

Baseline Widget 是一个非常有用的工具，可用于在 Flutter 中创建对齐良好的布局。它易于使用，并且可以与其他小部件结合使用以创建更复杂的对齐。