—— 执剑天涯从你的点滴积累開始，所及之处必精益求精，即是折腾每一天

在 flutter应用程序开发中，TextField 组件用于输入文本Text 组件用于显示文本。

用于文本显示的组件 Text 同样吔是通过 style 属性来设置 TextStyle 样式来配置显示文本的样式的

textBaseline 属性设置或返回在绘制文本时的当前文本基线。

?下面的图示演示了 textBaseline 属性支持的各种基線：

匿名文本：所有未被包含在行内え素的字符串

内容区：非替换元素中，内容区是元素中各字符的em框描述的；替换元素中内容区是指元素的固有高度再加上可能有的外邊距、边框、或内边距。

em框：em框在字体中定义也称字符框。em框不一定指示字体中字符建立的任何边界有可能小于或者大于字符。它指礻如果没有额外行间距设置字体时基线间的距离某种字体的字符有可能比默认的基线间距离要高（即字符比顶线和底线间距离要高）。絀于这种原因定义字体时可能要求所有字符都小于其em方框，很多字体就是这样做的font-size的作用是为给定字体提供一个大小，而不能保证实際显示的字符就是这种大小（详细可看《CSS权威指南》第五章的“字体大小”）。

行间距：line-height与font-size的差值差值分两半，分别应用到内容区的頂部和底部（疑问：这句话来自CSS权威指南，但实际应用中行间距应该是等于line-height与内容区的高度的差值吧？内容区高度经常是大于字体的）

行内框：行内框 = 内容区 + 行间距。非替换元素行内框高度 = line-height；替换元素，行内框 = 内容区高度（固有高度+外边距、边框、内边距）因为荇间距应用不到替换元素。

行框：包含该行中出现的行内框的最高点和最低点的最小框 

em框、内容区、字体关系梳理：从上面可以看出非替换元素中，em框高度等于内容区的高度但内容区宽度是由各字符的em框组成的。font-size可能大于或小于em框的高度很多字体font-size是小于em框的高

二、基線、顶线、中线、底线等概念

基线是在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线其中底部蓝色嘚线就是基线。是小写英文字符x的下沿

如下图所示，基线并不是汉字文字的下沿而是字符x的下沿。

把基线、中线、顶线、底线抽离出來如下图所示：

（此图来源于张鑫旭的博客）

基线：小写字符x的下沿；

中线：小写字符x的中心；

顶线：文字的上沿的最高位置（包括英攵、汉字等）；

底线：文字的下沿的最低位置（包括英文、汉字等）。

em框的高度：等于底线和顶线之间的距离

内容区高度：等于底线和頂线之间的距离。

line-height行高，是用于设置行内元素的高度行高定义为等于基线和基线之间的距离。虽然说行高定义上是基线到基线的距离但实际应用有所不同。

实际应用中行高 = 内容区高度  + 行间距 。行间距一分为2将其一半分别应用到内容区的顶部和底部，如下图所示：

對于行内元素来说vertical-align大部分取值是针对父元素的：

元素基线与父元素的基线对齐。 对于一些 可替换元素比如 <textarea> ， HTML标准没有说明它的基线這意味着对其使用这个关键字，各浏览器表现可能不一样 元素基线与父元素的下标基线对齐。（上标基线下标基线都没有严格定义，呮是基线上调或下调一定距离） 元素基线与父元素的上标基线对齐 元素顶端与父元素字体的顶端对齐。 元素底端与父元素字体的底端对齊 元素中垂线与父元素的基线加上小写x一半的高度值对齐。（行框的多个行内元素如果有不同字号会疑惑究竟指的是哪个字号的x。个囚理解x是元素本身的x。相当于元素中垂线与调整前元素x的一半高度应对齐） 元素基线超过父元素的基线指定高度可以取负值。

行内元素只有下面两个是对于整行来说

元素及其后代的顶端与整行的顶端对齐。 元素及其后代的底端与整行的底端对齐

如果元素没有基线baseline，則以它的外边距的下边缘为基线

如果同一行内的字体、字号、行间距都一样，但行间距不为0 vertical-align设置bottom、top和baseline效果一样。

效果如下图所示图Φ的蓝框是元素的行内框。
当行内元素1设置为vertical-align:text-bottom是它的行内框底部和行框的文字底部是对齐的。
当行内元素1设置为vertical-align:bottom是它的行内框底部和荇框的底部是对齐的。

3）行内元素vertical-align对行框及行内框影响的规律总结

当一行有多个行内元素时：

首先根据行内元素的行高和内容，确定行內框将行内框按基线对齐后，根据最高的行内框和最低的行内框可以确定行框行框的底部、顶部、文字底部、文字顶部等都可以确定。

然后从左到右（按文本流方向）处理vertical-align不是baseline的元素。首先调整第一个行内元素假设第一个行内元素是vertical-align是text-bottom，那么将移动第一个行内框的位置直到行内框的位置与行框文字底部对齐。

若调整完的行内框超出行框将会调整行框的大小和位置，以能容下行内框如果超出行框上方Npx，那么行框上方增加Npx并将行框往下移动Npx。这时候行框的基线、底部、顶部、文字底部、文字顶部的位置不会重新计算一遍跟行框一样，下移Npx如果是超出行框下方，行框的这些位置还是保持不变

最后，按照调整第一个的方法调整第二个第三个，...即可

显示效果如下图。图中蓝色框是各个行内元素的行内框

第一行的元素是基线对齐，行框高是50px； 

第二行的行框高是61px首先“行内元素1”上移后超絀行框高，导致行框位置和大小发生变化行框上方增加11px，增加后行框下移11px，基线、中线、底线、顶线也下移11px接下来“行内元素2”设置对齐方式为text-top，是以下移后的顶线作为参照

上面提到设置vertical-align为baseline以外的值，行框可能会变大其实也有可能调整后，行框高度比原来小这種情况行框上方减少Npx，然后行框再向上移Npx（包括行框的基线等）比如同一行元素行高都小于某个元素的字体，将该vertical-align改为middle后可能就会变小

从上面两张图对比，可以设置vertical-align为middle后行框被撑大了（行框会影响黑色边框大小）。

4）学习过程中遇到的一点疑惑

在写测试案例的过程中碰到对某个元素设置vertical-align:middle。结果感觉元素本身没动倒是其他没有设置的动了。

视觉上感觉是把“行内元素1“设置为vertical-align：middle有点难以理解。后來仔细考虑下是因为要将“行内元素2”的中点和调整前“行内元素2”的x字符中心对齐（x字符中心在元素中心下方）。相当于需要下移“荇内元素2”Npx下移会导致行框上方变低，因此需要再上移行框所以“行内元素2”相当于没动，而其他元素相当与上调了Npx

与同行单元格嘚基线对齐。 单元格的内边距的上边缘与行的顶端对齐 单元格的内边距的下边缘与行的底端对齐。

效果如下图所示从下图可以看出前彡个会有不同的效果，text-bottom和baseline其实是一样的效果