Flutter中Align的使用说明

又失业了,作为一个高龄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))
),效果则如下图

至于Align中的 widthFactor、heightFactor到底在起什么作用,我还没弄清,因为怎么修改它俩的值,也不会影响结果。

相关推荐
耳東陈26 分钟前
【重磅发布】flutter_chen_updater - 版本升级更新
flutter
wordbaby4 小时前
Flutter列表渲染的"诡异"问题:为什么我的数据总是第一个?
前端·flutter
恋猫de小郭4 小时前
谷歌开启 Android 开发者身份验证,明年可能开始禁止“未经验证”应用的侧载,要求所有开发者向谷歌表明身份
android·前端·flutter
苏元20 小时前
Flutter + GetX:Dio 多接口 401 拦截后跳登录,避免重复跳转和 Controller 找不到问题
flutter
Mhua_Z1 天前
使用 flutter_tts 的配置项
flutter
你听得到111 天前
弹窗库1.1.0版本发布!不止于统一,更是全面的体验升级!
android·前端·flutter
RaidenLiu1 天前
Riverpod 3 :掌握异步任务处理与 AsyncNotifier
前端·flutter
无知的前端1 天前
Flutter 模型转JSON跳过零值/null
flutter·json
jiushiapwojdap2 天前
Flutter上手记:为什么我的按钮能同时在iOS和Android上跳舞?[特殊字符][特殊字符]
android·其他·flutter·ios
木子雨廷2 天前
Flutter 局部刷新小组件汇总
前端·flutter