Flutter 基础布局Widgets之Align
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的更多相关文章
- 【Flutter学习】页面布局之基础布局组件
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- Flutter基础系列之入门(一)
1.Flutter是什么? 官方介绍:Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter ...
- Flutter的布局方法
重点是什么? Widgets 是用于构建UI的类. Widgets 用于布局和UI元素. 通过简单的widget来构建复杂的widget Flutter布局机制的核心就是widget.在Flutter ...
- flutter系列之:widgets,构成flutter的基石
目录 简介 StatelessWidget和StatefulWidget StatelessWidget详解 StatefulWidget详解 总结 简介 flutter中所有的组件都是由widget ...
- 【html】【7】基础布局初探
当了解了上面的文章有一定基础后,开始尝试初步基础布局,可能不美观,但是要开始有布局框架思想 基础代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- laravel 5.5 《电商实战 》基础布局
我们需要为我们的项目构建一个基础的页面布局,布局文件统一存放在 resources/views/layouts 文件夹中,布局涉及的文件如下: app.blade.php —— 主要布局文件,项目的所 ...
- 在Orchard CMS Theme 用代码定义布局Widgets
因为公司业务需要,经过本人几个月尝试,使用Orchard CMS 开发一个简单的企业门户(地址是http://www.ubof.cn).在刚开始接触Orchard CMS,对于个性化的网页布局不知道怎 ...
- CSS基础布局
目录 css基础布局 1.布局相关的标签 2.盒子模型 2-1 什么是盒子模型 2-2 块级元素和内联元素(行内元素) 2-3 盒子模型之间的关系 盒子模型相关CSS属性 3.浮动 3-1 什么是浮动 ...
- Android 的UI基础布局的学习
一. 今天学习了Android 的UI基础布局的部分,绝大多数的布局都在Androidstudio的这个界面里,如下: 在左边的框里的palette的内部,包含了的大多数的布局所要用的button按钮 ...
随机推荐
- 搞定SpringBoot多数据源(1):多套源策略
目录 1. 引言 2. 运行环境 3. 多套数据源 3.1 搭建 Spring Boot 工程 3.1.1 初始化 Spring Boot 工程 3.1.2 添加 MyBatis Plus 依赖 3. ...
- cf - 01串的问题
One beautiful July morning a terrible thing happened in Mainframe: a mean virus Megabyte somehow got ...
- 测试工具Fiddler(二)—— 入门使用
Fiddler设置与安装证书 一.Fiddler常见设置 Options位置:Tools->Options 二.移动端连上Fiddler作为代理 注意:因为Charles也是默认8888端口,小 ...
- UAF——use after free
本文系pwn2web原创,转载请说明出处 UAF 漏洞,英文原名use after free,该漏洞简洁的可以概括为 分配一块内存 free该内存但不回收,构成悬垂指针 再次构造分配同样大小的内存,按 ...
- 如何清理 Docker 占用的磁盘空间
Docker 很占用空间,每当我们运行容器.拉取镜像.部署应用.构建自己的镜像时,我们的磁盘空间会被大量占用. 如果你也被这个问题所困扰,咱们就一起看一下 Docker 是如何使用磁盘空间的,以及如何 ...
- 关于Error executing aapt的问题
这两天装了ubuntu 14.0.4系统,在这个系统上装了eclipse的android开发环境.原以为一切顺利,结果开发环境装完导入工程后,工程提示有红叉. R文件不能自动生成,按R文件不能自动生成 ...
- 1. RevitAPI 基础(上)
一 重要的基本设置: 1. 类库:revitAPI.DLL, revitAPIUI.DLL,个人理解前者包括了revit软件所特有的数据类型及软件中存在的全部后台数据,而后者是包含了大量与实现UI交互 ...
- typescript 第一弹
typescript官网: http://typescriptlang.org typescript 在线运行环境: http://www.typescriptlang.org/play/index. ...
- 创建认证提供器 安全性与收尾工作 精通ASP-NET-MVC-5-弗瑞曼
- 填充区域 (Populating an Area) | 使用区域 | 高级路由特性 | 精通ASP-NET-MVC-5-弗瑞曼