Align的作用是为了设置子child的对齐方式,一般作为其他控件的一个参数。

构造函数

const Align({
Key key,
this.alignment = Alignment.center,
this.widthFactor,
this.heightFactor,
Widget child
})

相关属性如下:

  • alignment 设置对齐方向
  • widthFactor 如果非空,则将其宽度设置为子元素的宽度乘以该因子,可以大于或小于1.0,但必须是正数。
  • heightFactor 如果非空,则将其高度设置为子元素的高度乘以该因子,可以大于或小于1.0,但必须是正数。

代码demo

import 'package:flutter/material.dart';

void main() => runApp(
MaterialApp(
title: '图标按钮组件示例',
home: LayoutDemo(),
),
); class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('图标按钮组件示例'),
),
body: Align(
alignment: Alignment.centerLeft,
widthFactor: 2.0,
heightFactor: 2.0,
//添加图标按钮
child: IconButton(
//图标元素
icon: Icon(Icons.volume_up,size: 48.0,),
//按钮提示
tooltip: '按下操作',
//按下事件响应
onPressed:(){
print('按下操作');
},
),
),
);
}
}

Flutter 基础布局Widgets之Align的更多相关文章

  1. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  2. Flutter基础系列之入门(一)

    1.Flutter是什么? 官方介绍:Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter ...

  3. Flutter的布局方法

    重点是什么? Widgets 是用于构建UI的类. Widgets 用于布局和UI元素. 通过简单的widget来构建复杂的widget Flutter布局机制的核心就是widget.在Flutter ...

  4. flutter系列之:widgets,构成flutter的基石

    目录 简介 StatelessWidget和StatefulWidget StatelessWidget详解 StatefulWidget详解 总结 简介 flutter中所有的组件都是由widget ...

  5. 【html】【7】基础布局初探

    当了解了上面的文章有一定基础后,开始尝试初步基础布局,可能不美观,但是要开始有布局框架思想 基础代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  6. laravel 5.5 《电商实战 》基础布局

    我们需要为我们的项目构建一个基础的页面布局,布局文件统一存放在 resources/views/layouts 文件夹中,布局涉及的文件如下: app.blade.php —— 主要布局文件,项目的所 ...

  7. 在Orchard CMS Theme 用代码定义布局Widgets

    因为公司业务需要,经过本人几个月尝试,使用Orchard CMS 开发一个简单的企业门户(地址是http://www.ubof.cn).在刚开始接触Orchard CMS,对于个性化的网页布局不知道怎 ...

  8. CSS基础布局

    目录 css基础布局 1.布局相关的标签 2.盒子模型 2-1 什么是盒子模型 2-2 块级元素和内联元素(行内元素) 2-3 盒子模型之间的关系 盒子模型相关CSS属性 3.浮动 3-1 什么是浮动 ...

  9. Android 的UI基础布局的学习

    一. 今天学习了Android 的UI基础布局的部分,绝大多数的布局都在Androidstudio的这个界面里,如下: 在左边的框里的palette的内部,包含了的大多数的布局所要用的button按钮 ...

随机推荐

  1. 搞定SpringBoot多数据源(1):多套源策略

    目录 1. 引言 2. 运行环境 3. 多套数据源 3.1 搭建 Spring Boot 工程 3.1.1 初始化 Spring Boot 工程 3.1.2 添加 MyBatis Plus 依赖 3. ...

  2. cf - 01串的问题

    One beautiful July morning a terrible thing happened in Mainframe: a mean virus Megabyte somehow got ...

  3. 测试工具Fiddler(二)—— 入门使用

    Fiddler设置与安装证书 一.Fiddler常见设置 Options位置:Tools->Options 二.移动端连上Fiddler作为代理 注意:因为Charles也是默认8888端口,小 ...

  4. UAF——use after free

    本文系pwn2web原创,转载请说明出处 UAF 漏洞,英文原名use after free,该漏洞简洁的可以概括为 分配一块内存 free该内存但不回收,构成悬垂指针 再次构造分配同样大小的内存,按 ...

  5. 如何清理 Docker 占用的磁盘空间

    Docker 很占用空间,每当我们运行容器.拉取镜像.部署应用.构建自己的镜像时,我们的磁盘空间会被大量占用. 如果你也被这个问题所困扰,咱们就一起看一下 Docker 是如何使用磁盘空间的,以及如何 ...

  6. 关于Error executing aapt的问题

    这两天装了ubuntu 14.0.4系统,在这个系统上装了eclipse的android开发环境.原以为一切顺利,结果开发环境装完导入工程后,工程提示有红叉. R文件不能自动生成,按R文件不能自动生成 ...

  7. 1. RevitAPI 基础(上)

    一 重要的基本设置: 1. 类库:revitAPI.DLL, revitAPIUI.DLL,个人理解前者包括了revit软件所特有的数据类型及软件中存在的全部后台数据,而后者是包含了大量与实现UI交互 ...

  8. typescript 第一弹

    typescript官网: http://typescriptlang.org typescript 在线运行环境: http://www.typescriptlang.org/play/index. ...

  9. 创建认证提供器 安全性与收尾工作 精通ASP-NET-MVC-5-弗瑞曼

  10. 填充区域 (Populating an Area) | 使用区域 | 高级路由特性 | 精通ASP-NET-MVC-5-弗瑞曼