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

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

1. Baseline

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

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: <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的布局行为。

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,
      ),
    ),
  )

运行效果如下所示

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包裹着，可以看到，第一三个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,),
      ],
    ),
  ),
)

分别对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

原文地址：https://www.cnblogs.com/holy-loki/p/9735056.html

时间： 2024-11-08 21:33:46

Flutter 布局（四）- Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth详解的相关文章

【译】UNIVERSAL IMAGE LOADER. PART 3（四个DisplayImage重载方法详解）

在之前的文章,我们重点讲了Android-Universal-Image-Loader的三个主要组件,现在我们终于可以开始使用它了. Android-Universal-Image-Loader有四个重载方法 void displayImage(String url, ImageView view) void displayImage(String url, ImageView view, DisplayImageOptions options) void displayImage(String

【C语言天天练（十四）】const关键字详解

const是一个C语言的关键字,它限定一个变量不允许被改变.使用const在一定程度上可以提高程序的安全性和可靠性,另外,了解const的作用,在看别人的代码时,对理解对方的程序有一定帮助. 1.const可以理解成是"只读变量"的限定词,从这里可以看出,const修饰的是变量,跟常量是不同的,常量是被编译器放在内存中的只读区域,当然也就不能够去修改它.而"只读变量"则是在内存中开辟一个地方来存放它的值,只不过这个值由编译器限定不允许被修改.const就是用来限定一

Spring AOP四种实现方式Demo详解与相关知识探究

一.前言 在网络上看到一篇博客Spring实现AOP的4种方式,博主写的很通俗易懂,但排版实在抓狂,对于我这么一个对排版.代码格式有强迫症的人来说,实在是不能忍受~~~~(>_<)~~~~. 我亲手实现了一遍,重新整理,加上了一些不易关注到的细节.漏掉的知识,以及自己对AOP的一些理解,写成这篇博客. 二.AOP相关概念 (1)AOP是什么?AOP与拦截器的区别? 太抽象的不说,如果你知道Struts2的拦截器,拦截器就是应用的AOP的思想,它用于拦截Action以进行一些预处理或结果处理.而

Spring系列（四）：Spring AOP详解

一.AOP是什么 AOP(面向切面编程),可以说是一种编程思想,其中的Spring AOP和AspectJ都是现实了这种编程思想.相对OOP(面向过程编程)来说,提供了另外一种编程方式,对于OOP过程中产生的横切性问题,这些横切性与业务无关,可以通过预编译方式和运行期动态代理来实现.比如可以应用在:日志记录.性能监控.事务管理等. 二.AOP的基本概念 Aspect(切面):通常来说是一个类,里面定义了切点和通知,Spring AOP中可以用@AspectJ来标注这个类是切面: Join poi

第四天-secureCRT-ssh客户端使用详解

详细出处参考详解: http://www.cr173.com/html/24759_1.html http://jingyan.baidu.com/article/ff41162581e24a12e48237d1.html http://www.tuicool.com/articles/qmieay SecureCRT是最常用的终端仿真程序,简单的说就是Windows下登录UNIX或Liunx服务器主机的软件,本文主要介绍SecureCRT的使用方法和技巧 VanDyke CRT 和 VanDy

ASP.NET Eval四种绑定方式 及详解

1.1.x中的数据绑定语法 <asp:Literal id="litEval2" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "userName")%>' /> 2. 2.x简化Eval数据绑定语法 <asp:Literal id="litEval1" runat="server" Text='<

数据库四种事务隔离级别详解

四种数据库隔离级别如下所示: 1.READ-UNCOMMITTED(读取未提交内容) 由于在该隔离级别下即使事务未提交所做的修改也会对其他事务产生影响.所以该级别会出现数据脏读的发生.脏读:一个事务读取了另一个未提交的并行事务写的数据. 举例:老板给员工发工资,老板开启事务,然后想员工的账户转钱10000元.此时员工开启事务,查看账户余额发现多了10000元,然后提交事务.但是老板发现转多了,于是修改为转5000元,然后提交事务.最终员工账户多5000元而不是10000元,所以之前员工看到的10

TCP四次挥手断开连接详解

TCP四次挥手. 数据传输结束后,通信的双方都可释放连接.现在A和B都处于ESTABLISHED状态.A的应用程序先向TCP发出连接释放报文段,主动关闭TCP连接.A把连接释放报文段的首部FIN置为1,序号seq=u,它等于前面已传送过的数据的最后一个字节的序号加1.这时A进入FIN-WAIT-1状态,等待B的确认. B收到连接释放报文段后即发出确认,确认号是ack=u+1,而这个报文段自己的序号是v,等于B前面已传送过的数据的最后一个字节的序号加1.然后B就进入CLOSE-WAIT状态.TCP

python四种数据结构以及list详解

四种数据结构: list 使用[]表示,线性的数据结构,适合查找数据,不适合增删数据  链表: 适合增删数据,不适合查找数据  queue:队列:(先进先出或后进先出) 不允许队列在中间进行变化.  stack:栈 后进先出(落盘子) 列表表示l1 = []l2 = [1,2,'abc']l3 = list()l4 = list(range(5))可以嵌套l5 = [1,'ab',[bool,str]]l5[0] :打印出1,正数进行正索引,负数进行负索引l5[-1] :打印出[bool,str