Flutter Alignment FractionalOffset AlignmentDirectional

Flutter 系列文章 总体目录

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

二真机上的效果：

交流

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。

同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。

Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。