当前位置：首页 > article >正文

Flutter中Align的使用说明

article 2025/3/24 5:38:53

又失业了，作为一个高龄Android程序员今年找工作真难呀。现在Flutter是必需技能了，所以最近在自学。所用书籍叫《Flutter实战》，如下

如今已看了100多页，发现这本书写得……有点赶吧，好几处讲得不清不楚，而关于Align的讲解更是误人，里面的讲解是错误的，于是去网上搜Align的资料，发现也都是抄来抄去，也都讲错了，直到遇到一篇 https://juejin.cn/post/7080793945466208269 才终于有了点头绪，但是这篇文章讲得好像也有点不对，但是给了我一个关键点。

先列出示例代码

Scaffold(
  appBar: AppBar(title: Text("小书房"),),
  body: Center(
    child: Container(color: Colors.yellow,width: 120,height: 120,
      child:
         Align(widthFactor: 2,heightFactor: 2,alignment:Alignment(1,1),
         child:FlutterLogo(size: 60))
    ),
  ),
);

该段代码效果图如下

即一个父容器 Container，宽120 高 120，里面一个Align，Align里又有一个 60* 60 的图标。

为什么图标会正好在Container的右下角呢？因为Alignment(1,1)。这个又是什么意思？

先说Align构建的坐标系：Align将父容器（此处的父容器就是 Container）的中心点作为坐标系原点，向右为X正轴，向下为Y正轴；Alignment()的两个参数的单位其实是 Container 的宽、高的一半，即（1,1）表示的坐标点就是从原点 X轴正向挪动 1 个单位（此处就是Container 宽度的一半即60），Y轴正向挪动一个单位（同理，Y坐标也是60），也就是图中黄色区域（即Container）的右下角顶点。

FlutterLogo为何正好处于Container右下角区域呢？且正好占据Container的四分之一。

看官方解释

The alignment property describes a point in the child's coordinate system and a different point in the coordinate system of this widget. The Align widget positions the child such that both points are lined up on top of each other.

即 使用Align(x,y) 计算出父容器（此处即指Container）和子组件（此处即指FlutterLogo）的目标点，然后让这两个点重合，以此确定子组件在父容器的位置。还是以上述的代码为例，可知Container的目标点坐标为（60,60），同理（子组件的原点也在中心），子组件的目标点为（30,30），恰好它俩的目标点都是各自右下角的顶点，让这俩点重合，所以最终就导致FlutterLogo正好处于Container的右下角的四分之一区域。

alignment:Alignment(1,2)效果如下图

child: Container(color: Colors.yellow,width: 180,height: 180,
  child:
    Align(widthFactor: 2,heightFactor: 2,alignment:Alignment(1,2),child: FlutterLogo(size: 60))
),效果则如下图