By Ne0 — Dec 6, 2018

Flutter Alignment FractionalOffset AlignmentDirectional

文章目录

1、Alignment

 const Alignment(this.x, this.y)
    : assert(x != null),
      assert(y != null);

参数x：-1：最左边 1:最右边 0：中间
参数y：-1：最上边 1:最下边 0：中间

比如：Alignment(0,0)代表控件的中心
坐标系如下图：

Container(
          width: 300,
          height: 100,
          color: Color(0xFFFF0000),
          alignment: Alignment(1,0),
          child: Text('Alignment(1,0)',
          textDirection: TextDirection.rtl,),
        )

效果：

Alignment定义了我们常用的位置：

2、FractionalOffset

FractionalOffset继承Alignment，他们2个区别就是坐标系不一样，Alignment的原点是中心，而FractionalOffset原点是左上角。

Container(
          width: 300,
          height: 100,
          color: Color(0xFFFF0000),
          alignment: FractionalOffset(0,0),
          child: Text('FractionalOffset(0,0)',
          textDirection: TextDirection.rtl,),
        ),

效果：

FractionalOffset定义了我们常用的位置：

3、AlignmentDirectional

AlignmentDirectional 的坐标系和Alignment比较像，原点在中心，不过AlignmentDirectional的起始位置和书写（TextDirection）方向有关

demo：

Container(
      width: 300,
      height: 100,
      color: Color.fromARGB(255, 66, 165, 245),
      child: new Text(
        "Flutter Cheatsheet",
        textDirection: TextDirection.ltr,
        style: TextStyle(

        ),
      ),
      alignment: AlignmentDirectional.topStart,
    );

二真机上的效果：