Flutter - AlignmentGeometry :Alignment 和 FractionalOffset

news2024/10/7 20:28:09

AlignmentGeometry 是一个抽象类,它有两个常用的子类:Alignment和 FractionalOffset

Alignment
Alignment继承自AlignmentGeometry,表示矩形内的一个点,他有两个属性x、y,分别表示在水平和垂直方向的偏移
在这里插入图片描述
上图中 FlutterLogo 居中显示
产生这个现象的原因是因为 Alignment(0,0)Alignment.center

        Container(
          height: 120.0,
          width: 120.0,
          color: Colors.blue[50],
          child: Align(
            alignment: Alignment(0,0),//FractionalOffset(0.1, 0.1)
            child: FlutterLogo(
              size: 60,
            ),
          ),
        ),Container(
          height: 120.0,
          width: 120.0,
          color: Colors.blue[50],
          child: Align(
            alignment: Alignment.center,//FractionalOffset(0.1, 0.1)
            child: FlutterLogo(
              size: 60,
            ),
          ),
        ),

源码中 Alignment提供了九个常亮参数 分别是 上左 ,上中 ,上右 ,中左 ,…九个
在这里插入图片描述
我们可以从上面发现,x 和 y 值都是从 -1 到 1 以0位中点
除了上面的九种排列方式外,如果我们想子控件在父控件的某个具体位置显示,可能通过计算得出要传的参数

例 : 想放一个控件在中间靠左一点

在这里插入图片描述

// Alignment(-0.7,0)
// -1 是最右边 ,所以-0.7 会稍微靠右  (水平方向)
// 0 居中 (垂直方向)

 		Container(
          height: 120.0,
          width: 120.0,
          color: Colors.blue[50],
          child: Align(
            alignment: Alignment(-0.7,0),//FractionalOffset(0.1, 0.1)
            child: FlutterLogo(
              size: 60,
            ),
          ),
        ),

FractionalOffset

FractionalOffset 继承自 Alignment,它和 Alignment唯一的区别就是坐标原点不同
FractionalOffset的区值是从 0 到 1
例 使用FractionalOffset使 控件居中
在这里插入图片描述

// 居中传入的值为 FractionalOffset(0.5, 0.5)
        Container(
          height: 120.0,
          width: 120.0,
          color: Colors.blue[50],
          child: Align(
            alignment: FractionalOffset(0.5, 0.5),//FractionalOffset(0.1, 0.1)
            child: FlutterLogo(
              size: 60,
            ),
          ),
        ),

在这里插入图片描述
为达到上面这个效果的话 需要传 FractionalOffset(0.15, 0.5)

下面是 FractionalOffset 提供的九个默认方法,和Alignment基本也差不多
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/77075.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

阳光保险港交所上市:年营收1200亿 市值超600亿港元

雷递网 雷建平 12月9日阳光保险集团股份有限公司 (简称:“阳光保险”,06963)今日在港交所上市,发行价为每股5.83港元,募资净额为64.195亿港元。若行使超额配股权,阳光保险可额外再募资9.81亿港元。阳光保险发行价为5.8…

软件测试 -- 进阶 7 软件测试环境构建 与 测试数据准备

工欲善其事,必先利其器。-- 《论语卫灵公》 释译:工匠想要工作做好,一定要先让工具锋利。比喻要做好一件事,准备工作非常重要。 1. 为什么要构建测试环境、准备测试数据 提前准备测试所需资源保证测试有效执行保证测试用序执…

ChatGPT新玩法来了,微信聊天机器人

前言 上一篇文章中说了ChatGPT是什么,然后怎么注册使用。 传送门:花了1块钱体验一把最近很火的ChatGPT 但是实际操作下来还是有不少小伙伴跟我一样遇到各种坑。 没有科学上网工具OpenAI的服务在你的国家无法使用(最多的问题) 注…

自动驾驶之夜间检测调研

1. ExDark 第一个 公开 特定的提供 natural low-light images for object的数据集 7363张 low-light images, 12 classes Low-light image enhancement: IVC database. general image enhancement而非特指low-light. 黑夜是人工合成的,可以找到原图像See-in-the-Dark datase…

如何创建Spring项目以及如何使用?

目录: 1.创建Spring项目 2.将对象存储在Spring中 3.从Spring中取出对象 4.使用对象 5.总结 Spring 就是⼀个包含了众多⼯具⽅法的 IoC 容器,它具备两个最基本的功能: 将对象存储到容器(Spring)中;从容器…

Web大学生网页作业成品——美食餐饮网站设计与实现(HTML+CSS+JavaScript)

👨‍🎓静态网站的编写主要是用HTML DIVCSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的…

java SpringMVC 之 表现层与前端数据传输 SSM整合 异步处理前后台处理联调 拦截器

SSM整合 项目结构配置搭建 pom的依赖&#xff1a; <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>3.8.1</version><scope>test</scope></dependency><de…

如何使用 Python 实现彩票自由(双色球)

福彩双色球也是购买次数最多的彩种之一&#xff0c;相比大乐透&#xff0c;双色球更容易中小奖 下面将介绍 Python 实习双色球彩票自由的流程 1. 随机一注 福彩双色球一注同样包含 7 个数字&#xff0c;包含 6 个红球和 1 个篮球 其中 红球是从 1 - 33 中选择 6 个不同的数…

【Keras+计算机视觉+Tensorflow】生成对抗神经网络中DCGAN、CycleGAN网络的讲解(图文解释 超详细)

觉得有帮助麻烦点赞关注收藏~~~ 一、生成对抗网络简介 生成对抗网络(GANs&#xff0c;Generative Adversarial Nets),由Ian Goodfellow在2014年提出的,是当今计算机科学中最有趣的概念之一。GAN最早提出是为了弥补真实数据的不足&#xff0c;生成高质量的人工数据。GAN的主要思…

数据宝藏“淘金热”,腾讯云大数据愿做“卖铲人”

‍‍数据智能产业创新服务媒体——聚焦数智 改变商业大数据产业作为数字化时代的基础设施之一&#xff0c;正在成为新时代经济发展的重要动能之一。11月30日&#xff0c;在2022腾讯全球数字生态大会大数据专场上&#xff0c;腾讯云大数据重磅发布了两款具有高频应用场景的产品…

晶品特装科创板上市:市值68亿 主打地面无人装备研发与产销

雷递网 雷建平 12月9日北京晶品特装科技股份有限公司&#xff08;简称&#xff1a;“晶品特装”&#xff0c;证券代码&#xff1a;688084&#xff09;昨日在科创板上市。晶品特装本次发行1900万股&#xff0c;发行价为60.98元&#xff0c;募资总额11.59亿元。晶品特装昨日收盘价…

R语言从经济时间序列中用HP滤波器,小波滤波和经验模态分解等提取周期性成分分析

经济时间序列的分析通常需要提取其周期性成分。最近我们被客户要求撰写关于经济时间序列的研究报告&#xff0c;包括一些图形和统计输出。这篇文章介绍了一些方法&#xff0c;可用于将时间序列分解为它们的不同部分。它基于《宏观经济学手册》中Stock和Watson&#xff08;1999&…

TypeScript和JavaScript的区别,全面解读超详细(二)

了解基础篇&#xff1a;请跳转 3.4.3 TS的编译 点击跳转 TypeScript和JavaScript的区别,全面解读超详细 我们知道.js的文件可以直接在浏览器中运行的&#xff0c;而.ts或者.tsx却不行&#xff0c;所以我们在运行TS项目时需要编译成浏览器引擎可以识别的JS语言。同时为了提高编…

体验最近火爆的ChatGPT

体验最近火爆的ChatGPT演示前言体验1. 回答问题2. 写方案、写作3. 写代码4. 各种古怪刁钻问题回答国内用户如何注册ChatGPT账号并在线体验如果不能在官网体验&#xff0c;可以在我的网站上体验演示 体验最近火爆的ChatGPT 前言 前几天OpenAI公布了ChatGPT算是火爆朋友圈&…

基于Java+Swing+mysql图书管理系统

基于JavaSwingmysql图书管理系统一、系统介绍二、功能展示1.用户登陆2.系统主页3.图书查询4.图书添加5.图书修改6.图书删除7.办理借书8.办理还书9.历史查询10.用户查询、删除&#xff08;管理员&#xff09;三、数据库四、其它1.其他系统实现一、系统介绍 该系统实现了 用户: …

基于多目标灰狼算法的冷热电联供型微网低碳经济调度附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

天翼物联获2022年移动物联网“先进企业”

近日&#xff0c;由工信部指导、中国信通院等单位主办的“首届移动物联网大会”在无锡圆满落幕。天翼物联获2022年移动物联网“先进企业”奖。 今年&#xff0c;我国移动物联网终端用户16.98亿户&#xff0c;超越移动电话16.78亿用户数&#xff0c;正式进入“物超人”时代&…

C++-变量

目录定义变量使用变量全局变量与局部变量作用域和生存期存储类typedefconst符号常量C11的变量初始化列表定义变量 1、存储类 类型名 变量名<初值表达式> 2、存储类 auto,register,static,extern 3、类型名 数据类型&#xff0c;自己定义的或系统存在的 4、变量名 用户自…

[carla] carla-ros-bridge 修改信号灯行为。

本教程适用于采用编译下载安装方式安装carla-ros-bridge 的用户。 1.修改信号灯 1.1 修改原理 我们要通过API过滤出所有绿灯的actor信息&#xff0c;然后修改他们的状态为常绿。 查阅API网站可知traffic_light具有set_state&#xff08;self,state&#xff09;方法 https:/…

说一说刚拿下BIRTV推荐的中国8K摄像机新品

“从边缘走向中心&#xff0c;从跟随逐渐引领&#xff0c;变化已经在发生。” —————————————————————————————————————————— 2022年发生了很多事情&#xff0c;但有一件事&#xff0c;无可比拟&#xff0c;那就是冬奥。 2022北京…