Flutter控件——布局控件：相对

Posted 2022-06-16 wzj_what_why_how

Align

basic.dart 源码

class Align extends SingleChildRenderObjectWidget 
  const Align(
    Key? key,
    //alignment : 需要一个AlignmentGeometry类型的值，表示子组件在父组件中的起始位置。AlignmentGeometry 是一个抽象类，它有两个常用的子类：Alignment和 FractionalOffset
    this.alignment = Alignment.center, //设置对齐方向

    //widthFactor和heightFactor是用于确定Align 组件本身宽高的属性；它们是两个缩放因子(倍数)，会分别乘以子元素的宽、高，
    //最终的结果就是Align 组件的宽高。如果值为null，则组件的宽高将会占用尽可能多的空间。
    this.widthFactor,
    this.heightFactor,
    Widget? child,
  )

---

Center组件

Center组件定义如下：

class Center extends Align 
  const Center( Key? key, double widthFactor, double heightFactor, Widget? child )
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);

可以看到Center继承自Align，它比Align只少了一个alignment 参数；由于Align的构造函数中alignment 值为Alignment.center，
所以，我们可以认为Center组件其实是对齐方式确定（Alignment.center）了的Align。

---

Alignment

Alignment继承自AlignmentGeometry，表示矩形内的一个点，他有两个属性x、y，分别表示在水平和垂直方向的偏移，Alignment定义如下：

Alignment(this.x, this.y)

• Alignment Widget会以矩形的中心点作为坐标原点，即Alignment(0.0, 0.0) 。
• x、y的值从-1到1分别代表矩形左边到右边的距离和顶部到底边的距离，因此2个水平（或垂直）单位则等于矩形的宽（或高），
• 如Alignment(-1.0, -1.0) 代表矩形的左侧顶点，
• 而Alignment(1.0, 1.0)代表右侧底部终点，
• 而Alignment(1.0, -1.0) 则正是右侧顶点，即Alignment.topRight。
• 为了使用方便，矩形的原点、四个顶点，以及四条边的终点在Alignment类中都已经定义为了静态常量。

Alignment可以通过其坐标转换公式将其坐标转为子元素的具体偏移坐标：

(Alignment.x*childWidth/2+childWidth/2, Alignment.y*childHeight/2+childHeight/2)

其中childWidth为子元素的宽度，childHeight为子元素高度。

---

FractionalOffset

FractionalOffset 继承自 Alignment，它和 Alignment唯一的区别就是坐标原点不同：FractionalOffset 的坐标原点为矩形的左侧顶点，
这和布局系统的一致，所以理解起来会比较容易。FractionalOffset的坐标转换公式为：

实际偏移 = (FractionalOffse.x * childWidth, FractionalOffse.y * childHeight)