固定底部 布局_Google Flutter 布局（四）-Baseline IntrinsicWidth详解

1.1 简介

Baseline这个控件，做过移动端开发的都会了解过，一般文字排版的时候，可能会用到它。它的作用很简单，根据child的baseline，来调整child的位置。例如两个字号不一样的文字，希望底部在一条水平线上，就可以使用这个控件，是一个非常基础的控件。

关于字符的Baseline，可以看下下面这张图，这具体就涉及到了字体排版，感兴趣的同学可以自行了解。

1.2 布局行为

Baseline控件布局行为分为两种情况：

• 如果child有baseline，则根据child的baseline属性，调整child的位置；
• 如果child没有baseline，则根据child的bottom，来调整child的位置。

1.3 继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Baseline

1.4 示例代码

new Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ new Baseline( baseline: 50.0, baselineType: TextBaseline.alphabetic, child: new Text( 'TjTjTj', style: new TextStyle( fontSize: 20.0, textBaseline: TextBaseline.alphabetic, ), ), ), new Baseline( baseline: 50.0, baselineType: TextBaseline.alphabetic, child: new Container( width: 30.0, height: 30.0, color: Colors.red, ), ), new Baseline( baseline: 50.0, baselineType: TextBaseline.alphabetic, child: new Text( 'RyRyRy', style: new TextStyle( fontSize: 35.0, textBaseline: TextBaseline.alphabetic, ), ), ), ],)

上述运行结果是左右两个文本跟中间的Container底部在一个水平线上，这也印证了Baseline的布局行为。

1.5 源码解析

const Baseline({ Key key, @required this.baseline, @required this.baselineType, Widget child})

1.5.1 属性解析

baseline：baseline数值，必须要有，从顶部算。

baselineTy