Flutterd对齐与相对定位组件Align

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

alignment :

需要一个AlignmentGeometry类型的值，表示子组件在父组件中的起始位置。AlignmentGeometry 是一个抽象类，它有两个常用的子类：Alignment和 FractionalOffset

widthFactor和heightFactor

用于确定Align 组件本身宽高的属性；它们是两个缩放因子，会分别乘以子元素的宽、高，最终的结果就是Align 组件的宽高。如果值为null，则组件的宽高将会占用尽可能多的空间。

*** Alignment

Alignment继承自AlignmentGeometry，表示矩形内的一个点，他有两个属性x、y，分别表示在水平和垂直方向的偏移
Alignment Widget会以矩形的中心点作为坐标原点，即Alignment(0.0, 0.0) 。x、y的值从-1到1分别代表矩形左边到右边的距离和顶部到底边的距离，
转换公式
(Alignment.xchildWidth/2+childWidth/2, Alignment.ychildHeight/2+childHeight/2)

*** FractionalOffset

FractionalOffset 继承自 Alignment，它和 Alignment唯一的区别就是坐标原点不同！FractionalOffset 的坐标原点为矩形的左侧顶点，
实际偏移 = (FractionalOffse.x * childWidth, FractionalOffse.y * childHeight)

示例

import 'package:flutter/material.dart';

class StudyAlign extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Align"),
      ),
      body: Column(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
            width: 120,
            height: 120,
            color: Colors.yellowAccent,
            child: Align(
              alignment: Alignment.bottomRight,
              child: Image.asset("images/tree.jpg",width: 60,fit: BoxFit.cover,height: 60,),
            ),

          ),
          Container(
            margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
            color: Colors.yellowAccent,
            child: Align(
              widthFactor: 2,
              heightFactor: 2,
              alignment: Alignment(2,0), //中心为0,0 左上为-1，-1 右上为1，-1 左下为-1,1 右下为1,1
              child: Image.asset("images/tree.jpg",width: 60,fit: BoxFit.cover,height: 60,),
            ),

          ),

          Container(
            margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
            color: Colors.yellowAccent,
            child: Align(
              widthFactor: 2,
              heightFactor: 2,
              alignment: FractionalOffset(0.5,2),//左上为0,0   0.5即x轴偏移父布局宽度的1/4， 2即y轴偏移父布局的整个高度
              child: Image.asset("images/tree.jpg",width: 60,fit: BoxFit.cover,height: 60,),
            ),

          ),

          Center(),

        ],
      ),

    );
  }
}

效果：

Align和Stack对比

Align和Stack/Positioned都可以用于指定子元素相对于父元素的偏移,主要区别为:

1，定位参考系统不同；Stack/Positioned定位的的参考系可以是父容器矩形的四个顶点；而Align则需要先通过alignment 参数来确定坐标原点，不同的alignment会对应不同原点，最终的偏移是需要通过alignment的转换公式来计算出。
2，Stack可以有多个子元素，并且子元素可以堆叠，而Align只能有一个子元素，不存在堆叠。

Center组件

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