Flutter FractionalOffset用法

Align控件可以通过Aligment确定子控件的位置，也可以通过FractionalOffset来设置

Aligment的坐标系原点是在父控件的中间，而FractionalOffset的坐标系是在父控件的左上角

 

先上代码看下效果比较直观

我们创建了一个宽高为300的父容器，在容器中间右边的位置放置一个宽高为100的Flutter的图标

FractionalOffset的两个参数dx和dy是一个倍数而不是距离值。

dx=1表示子控件从父容器的最左边移动到最右边的距离，也就是width=parentWidtth-childWidth，而不是parentWidth

dy=1表示子控件从父容器最顶部移动到最底部的距离，也就是height=parentHeight-childHeight，而不是parentHeight

所以严格来说，坐标原点是在父控件左上角右移childWidth/2和下移childHeight/2的距离

Container(
  width: 300,
  height: 300,
  color: Colors.green[100],
  child: Align(
    alignment: FractionalOffset(1.0, 0.5),
    child: FlutterLogo(size: 100),
  )
)

 

理解了以上坐标的定义，就很容易知道设置子控件不同位置的相应的坐标值：

• FractionalOffset(0.0, 0.0)：顶部左边
• FractionalOffset(0.5, 0.0)：顶部中间
• FractionalOffset(1.0, 0.0)：顶部右边
• FractionalOffset(0.0, 0.5)：中部左边
• FractionalOffset(0.5, 0.5)：中部中间
• FractionalOffset(1.0, 0.5)：中部右边
• FractionalOffset(0.0, 1.0)：底部左边
• FractionalOffset(0.5, 1.0)：底部中间
• FractionalOffset(1.0, 1.0)：底部右边