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. JVM之JVM的体系结构

    一.JDK的组成 JDK:JDK是Java开发工具包,是Sun Microsystems针对Java开发员的产品.JDK中包含JRE(在JDK的安装目录下有一个名为jre的目录,里面有两个文件夹bin ...

  2. 世界500强ING集团顺利的敏捷转型之路

    案例背景 为什么银行要像灰狗一样快? 荷兰国际集团(ING),成立于1991年,主营业务银行与保险业务,在全球45个国家和地区拥有分支机构,总资产887亿欧元(2018),全球53,000多名员工,拥 ...

  3. 79.纯 CSS 创作单元素麦当劳金拱门 Logo(原文)

    1. 效果图: 效果地址:https://codepen.io/flyingliao/pen/JgavjX 原理:m是伪元素::before弄出来的,::after遮挡中间下方一小块. 感想:学到一个 ...

  4. doT的高级用法及loadData的使用

    本文出自APICloud官方论坛, 感谢论坛版主 gp3098的分享. 之前直接把模板写在页面底部的script标签内的,但是现在不同. 使用了doT.js配合api的loadData方法,整个页面就 ...

  5. MySQL UTF-8 常用字符排序规则

    排序规则 解释 utf8_general_ci 不区分大小写 utf8_general_cs 区分大小写 utf8_bin 区分大小写,字符串每个字符串用二进制数据编译存储,且支持存储二进制数据

  6. 线段树 or 并查集 (多一个时间截点)

    There is a company that has N employees(numbered from 1 to N),every employee in the company has a im ...

  7. .net core 2.2 中IHttpClientFactory的使用

    在.net core中使用HttpClient请求api,有很多资源的问题,比如使用using的时候,虽然可以释放资源,但是套接字(socket)也不会立即释放,所以.net core2.1中,新增了 ...

  8. kubernetes concepts (一)

    Concepts The Concepts section helps you learn about the parts of the Kubernetes system and the abstr ...

  9. C入门题目

    37. 反转一个3位整数 反转一个只有3位数的整数. 样例 样例 1: 输入: number = 123 输出: 321 样例 2: 输入: number = 900 输出: 9 注意事项 你可以假设 ...

  10. Linux基础:简介安装、常用命令和JDK、Mysql、Tomcat的安装

    一.Linux的简介 1.Linux的概述 Linux是基于Unix的开源免费的操作系统,由于系统的稳定性和安全性几乎成为程序代码运行的最佳系统环境.Linux是由Linus Torvalds(林纳斯 ...