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到底在起什么作用,我还没弄清,因为怎么修改它俩的值,也不会影响结果。

相关推荐
zeqinjie3 小时前
Flutter 使用 AI Cursor 快速完成一个图表封装【提效】
前端·flutter
叽哥3 小时前
dart学习第 23 节: 单元测试入门 —— 保证代码质量
flutter·dart
一念之间lq4 小时前
学习Flutter-Flutter项目如何运行
flutter
叽哥4 小时前
dart学习第 22 节:性能优化基础 —— 从代码层面提速
flutter·dart
牛巴粉带走10 小时前
Flutter 构建失败:watchOS Target 类型无法识别的解决记录
flutter·ios·apple watch
tbit11 小时前
Flutter Provider 用法总结(更新中...)
android·flutter
TralyFang11 小时前
Flutter listview的复用与原生有什么区别
flutter
无知的前端12 小时前
一文读懂 - Flutter (Dart) 对象内存分配深度解析
flutter·性能优化
来来走走1 天前
Flutter开发 MaterrialApp基本属性介绍
android·flutter
叽哥1 天前
dart学习第 20 节:错误处理与日志 —— 让程序更健壮
flutter·dart