Flutter学习笔记10-Align

1. Align

Align组件可以调整子组件的位置，并且可以根据子组件的宽高来确定自身的的宽高，源码如下：

const Align({
  Key key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  Widget child,
})

• alignment
  需要一个AlignmentGeometry类型的值，表示子组件在父组件中的起始位置。AlignmentGeometry 是一个抽象类，它有两个常用的子类：Alignment和FractionalOffset。
• widthFactor heightFactor
  用于确定Align 组件本身宽高的属性；它们是两个缩放因子，会分别乘以子元素的宽、高，最终的结果就是Align 组件的宽高。如果值为null，则组件的宽高将会占用尽可能多的空间。
  代码示例：

class AlignDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 120.0,
        width: 120.0,
        color: Colors.blue[50],
        child: Align(
          alignment: Alignment.topRight,
          child: FlutterLogo(
            size: 60,
          ),
        ),
      ),
    );
  }
}

运行效果图如下：

在上面的代码中，指定了Container的宽、高都为120。如果不指定宽高，可以通过同时指定widthFactor和heightFactor为2也可达到同样的效果，代码如下：

Align(
  widthFactor: 2,
  heightFactor: 2,
  alignment: Alignment.topRight,
  child: FlutterLogo(
    size: 60,
  ),
),

FlutterLogo的宽高为60，则Align的最终宽高都为2*60=120。

1.1. Alignment

Alignment继承自AlignmentGeometry，表示矩形内的一个点，他有两个属性x、y，分别表示在水平和垂直方向的偏移。Alignment会以矩形的中心点作为坐标原点，即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为子元素高度。
Alignment.topRight带入上面的公式，FlutterLogo的实际偏移坐标是（60，0）。

1.2. FractionalOffset

FractionalOffset 继承自 Alignment，它和 Alignment唯一的区别就是坐标原点不同！FractionalOffset 的坐标原点为矩形的左侧顶点，这和布局系统的一致。FractionalOffset的坐标转换公式为：

(FractionalOffse.x * childWidth, FractionalOffse.y * childHeight)

代码示例：

class FractionalOffsetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 120.0,
      width: 120.0,
      color: Colors.blue[50],
      child: Align(
        alignment: FractionalOffset(0.2, 0.6),
        child: FlutterLogo(
          size: 60,
        ),
      ),
    );
  }
}

FractionalOffset(0.2, 0.6)带入坐标转换公式得FlutterLogo实际偏移为（12，36）

2. 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。
代码传送门