Flutter 布局（四）- Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth详解

时间  2019-11-17
标签 flutter 布局 baseline fractionallysizedbox intrinsicheight intrinsicwidth 详解 繁體版
原文   原文链接

本文主要介绍Flutter布局中的Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth四种控件，详细介绍了其布局行为以及使用场景，并对源码进行了分析。html

1. Baseline

A widget that positions its child according to the child's baseline.git

1.1 简介

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

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

Baseline

1.2 布局行为

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

  • 若是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: <Widget>[
    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的布局行为。ide

Baseline样例

1.5 源码解析

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

1.5.1 属性解析

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

baselineType：bseline类型，也是必需要有的，目前有两种类型：布局

  • alphabetic：对齐字符底部的水平线；
  • ideographic：对齐表意字符的水平线。

1.5.2 源码

咱们来看看源码中具体计算尺寸的这段代码学习

child.layout(constraints.loosen(), parentUsesSize: true);
final double childBaseline = child.getDistanceToBaseline(baselineType);
final double actualBaseline = baseline;
final double top = actualBaseline - childBaseline;
final BoxParentData childParentData = child.parentData;
childParentData.offset = new Offset(0.0, top);
final Size childSize = child.size;
size = constraints.constrain(new Size(childSize.width, top + childSize.height));
复制代码

getDistanceToBaseline这个函数是获取baseline数值的，存在的话，就取这个值，不存在的话，则取其高度。字体

总体的计算过程：

  1. 获取child的 baseline 值；
  2. 计算出top值，其为 baseline - childBaseline，这个值有可能为负数；
  3. 计算出Baseline控件尺寸，宽度为child的，高度则为 top + childSize.height。

1.6 使用场景

跟字符对齐相关的会用到，其余场景暂时没有想到。

2. FractionallySizedBox

A widget that sizes its child to a fraction of the total available space

2.1 简介

FractionallySizedBox控件会根据现有空间，来调整child的尺寸，因此说child就算设置了具体的尺寸数值，也不起做用。

2.2 布局行为

FractionallySizedBox的布局行为主要跟它的宽高因子两个参数有关，当参数为null或者有具体数值的时候，布局表现不同。固然，还有一个辅助参数alignment，做为对齐方式进行布局。

  • 当设置了具体的宽高因子，具体的宽高则根据现有空间宽高 * 因子，有可能会超出父控件的范围，当宽高因子大于1的时候；
  • 当没有设置宽高因子，则填满可用区域；

2.3 继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > FractionallySizedBox
复制代码

2.4 示例代码

new Container(
    color: Colors.blue,
    height: 150.0,
    width: 150.0,
    padding: const EdgeInsets.all(10.0),
    child: new FractionallySizedBox(
      alignment: Alignment.topLeft,
      widthFactor: 1.5,
      heightFactor: 0.5,
      child: new Container(
        color: Colors.red,
      ),
    ),
  )
复制代码

运行效果以下所示

FractionallySizedBox例子

2.5 源码解析

const FractionallySizedBox({
  Key key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  Widget child,
})
复制代码

2.5.1 属性解析

alignment：对齐方式，不能为null。

widthFactor：宽度因子，跟以前介绍的控件相似，宽度乘以这个值，就是最后的宽度。

heightFactor：高度因子，用做计算最后实际高度的。

其中widthFactor和heightFactor都有一个规则

  • 若是不为null，那么实际的最大宽高度则为child的宽高乘以这个因子；
  • 若是为null，那么child的宽高则会尽可能充满整个区域。

2.5.2 源码

FractionallySizedBox内部具体渲染是由RenderFractionallySizedOverflowBox来实现的，经过命名就能够看出，这个控件可能会Overflow。

咱们直接看实际计算尺寸的代码

double minWidth = constraints.minWidth;
double maxWidth = constraints.maxWidth;
if (_widthFactor != null) {
  final double width = maxWidth * _widthFactor;
  minWidth = width;
  maxWidth = width;
}
double minHeight = constraints.minHeight;
double maxHeight = constraints.maxHeight;
if (_heightFactor != null) {
  final double height = maxHeight * _heightFactor;
  minHeight = height;
  maxHeight = height;
}
复制代码

源代码中，根据宽高因子是否存在，来进行相对应的尺寸计算。这个过程很是简单，再也不赘述。

2.6 使用场景

当须要在一个区域里面取百分比尺寸的时候，可使用这个，比方说，高度40%宽度70%的区域。固然，AspectRatio也能够达到近似的效果。

3. IntrinsicHeight

A widget that sizes its child to the child's intrinsic height.

3.1 简介

IntrinsicHeight的做用是调整child到固定的高度。这个控件笔者也是看了好久，不知道它的做用是什么，官方说这个颇有用，可是应该尽可能少用，由于其效率问题。

3.2 布局行为

这个控件的做用，是将可能高度不受限制的child，调整到一个合适而且合理的尺寸。

3.3 继承关系

Object > Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > IntrinsicHeight
复制代码

3.4 示例代码

new IntrinsicHeight(
  child: new Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      new Container(color: Colors.blue, width: 100.0),
      new Container(color: Colors.red, width: 50.0,height: 50.0,),
      new Container(color: Colors.yellow, width: 150.0),
    ],
  ),
);
复制代码

IntrinsicHeight例子

当没有IntrinsicHeight包裹着，能够看到，第一三个Container高度是不受限制的，当外层套一个IntrinsicHeight，第一三个Container高度就调整到第二个同样的高度。

3.5 源码解析

构造函数以下：

const IntrinsicHeight({ Key key, Widget child })
复制代码

3.5.1 属性解析

除了child，没有提供额外的属性。

3.5.2 源码

当child不为null的时候，具体的布局代码以下：

BoxConstraints childConstraints = constraints;
if (!childConstraints.hasTightHeight) {
  final double height = child.getMaxIntrinsicHeight(childConstraints.maxWidth);
  assert(height.isFinite);
  childConstraints = childConstraints.tighten(height: height);
}
child.layout(childConstraints, parentUsesSize: true);
size = child.size;
复制代码

首先会检测是否只有一个高度值知足约束条件，若是不是的话，则返回一个最小的高度。而后调整尺寸。

3.6 使用场景

说老实话，不知道在什么场景使用，能够替代的控件也有的。谷歌说颇有用，效率会有问题，建议通常的就别用了。

4. IntrinsicWidth

A widget that sizes its child to the child's intrinsic width.

4.1 简介

IntrinsicWidth从描述看，跟IntrinsicHeight相似，一个是调整高度，一个是调整宽度。一样是会存在效率问题，能别使用就尽可能别使用。

4.2 布局行为

IntrinsicWidth不一样于IntrinsicHeight，它包含了额外的两个参数，stepHeight以及stepWidth。而IntrinsicWidth的布局行为跟这两个参数相关。

  • 当stepWidth不是null的时候，child的宽度将会是stepWidth的倍数，当stepWidth值比child最小宽度小的时候，这个值不起做用；
  • 当stepWidth为null的时候，child的宽度是child的最小宽度；
  • 当stepHeight不为null的时候，效果跟stepWidth相同；
  • 当stepHeight为null的时候，高度取最大高度。

4.3 继承关系

Diagnosticable > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > IntrinsicWidth
复制代码

4.4 示例代码

new Container(
  color: Colors.green,
  padding: const EdgeInsets.all(5.0),
  child: new IntrinsicWidth(
    stepHeight: 450.0,
    stepWidth: 300.0,
    child: new Column(
      children: <Widget>[
        new Container(color: Colors.blue, height: 100.0),
        new Container(color: Colors.red, width: 150.0, height: 100.0),
        new Container(color: Colors.yellow, height: 150.0,),
      ],
    ),
  ),
)
复制代码

IntrinsicWidth例子

分别对stepWidth以及stepHeight设置不一样的值，能够看到不一样的效果，当step值比最小宽高小的时候，这个值实际上是不起做用的。感兴趣的同窗能够本身试试。

4.5 源码解析

构造函数

const IntrinsicWidth({ Key key, this.stepWidth, this.stepHeight, Widget child })
复制代码

4.5.1 属性解析

stepWidth：能够为null，效果参看上面所说的布局行为。

stepHeight：能够为null，效果参看上面所说的布局行为。

4.5.2 源码

咱们先来看看布局代码中_applyStep函数

static double _applyStep(double input, double step) {
assert(input.isFinite);
if (step == null)
  return input;
return (input / step).ceil() * step;
}
复制代码

若是存在step数值的话，则会是step的倍数，若是step为null，则返回原始的尺寸。

接下来咱们看看child不为null时候的布局代码

BoxConstraints childConstraints = constraints;
if (!childConstraints.hasTightWidth) {
  final double width = child.getMaxIntrinsicWidth(childConstraints.maxHeight);
  assert(width.isFinite);
  childConstraints = childConstraints.tighten(width: _applyStep(width, _stepWidth));
}
if (_stepHeight != null) {
  final double height = child.getMaxIntrinsicHeight(childConstraints.maxWidth);
  assert(height.isFinite);
  childConstraints = childConstraints.tighten(height: _applyStep(height, _stepHeight));
}
child.layout(childConstraints, parentUsesSize: true);
size = child.size;
复制代码

宽度方面的布局跟IntrinsicHeight高度部分类似，只是多了一个step的额外数值。整体的布局表现跟上面分析的布局行为一致，根据step值是不是null来进行判断，可是注意其对待高度与宽度的表现略有差别。

4.6 使用场景

这个控件，说老实话，笔者仍是不知道该在什么场景下使用，可能会有些特殊的场景。可是从IntrinsicWidth与IntrinsicHeight布局差别看，Flutter基础控件封的确实很随性，一些无关紧要甚至是重复的控件，我以为精简精简挺好的，哈哈。

5. 后话

笔者建了一个Flutter学习相关的项目，Github地址，里面包含了笔者写的关于Flutter学习相关的一些文章，会按期更新，也会上传一些学习Demo，欢迎你们关注。

6. 参考

  1. Baseline class
  2. 基线
  3. FractionallySizedBox class
  4. IntrinsicHeight class
  5. IntrinsicWidth class
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程