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按钮 ...
随机推荐
- dp-最大递增子段和
Nowadays, a kind of chess game called “Super Jumping! Jumping! Jumping!” is very popular in HDU. M ...
- HTTP图解笔记(六)—— 第6章 HTTP首部
前言 为啥第一章直接跳到第六章呢,因为...博主当初看书的时候挑着看..只看了第一章和第六章┗( ▔, ▔ )┛ HTTP图解对于不熟悉HTTP的小伙伴来说是很好的书籍,建议入手! 一. HTTP报文 ...
- 10.方法重写Override
方法重写:Override: 需要有继承关系,子类重写父类的方法! 方法名必须相同 参数列表必须相同 修饰符:范围可以扩大,但不能缩小:public>protected>defalut&g ...
- 开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)
原理:开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目 ...
- Browser Security-css、javascript
层叠样式表(css) 调用方式有三种: 1 用<style> 2 通过<link rel=stylesheet>,或者使用style参数. 3 XML(包括XHTML)可以通过 ...
- 使用Razor表达式 举数组和集合 精通ASP-NET-MVC-5-弗瑞曼
- SpringBoot简单实现登录功能
登陆 开发期间模板引擎页面修改以后,要实时生效 1).禁用模板引擎的缓存 # 禁用缓存 spring.thymeleaf.cache=false 2).页面修改完成以后ctrl+f9:重新编译: 登陆 ...
- 超越队西柚考勤系统——beta冲刺1
这个作业属于哪个课程 http://edu.cnblogs.com/campus/xnsy/GeographicInformationScience 这个作业的要求在哪里 https://www.cn ...
- 异想家Win10常用的软件推荐
本文总结一下自己日常使用Win10中涉及到的好用小软件,那些装机必备的软件在这里就不一一列出了.我重点想推荐一些自己觉得好用,符合自己偏好,但又不是每个人都知道的小工具: Rolan:一款类似于Win ...
- [HNOI2008]明明的烦恼(prufer序列,高精度,质因数分解)
prufer序列 定义 Prufer数列是无根树的一种数列.在组合数学中,Prufer数列由有一个对于顶点标过号的树转化来的数列,点数为n的树转化来的Prufer数列长度为n-2. 描述 eg 将 ...