[Flutter] Stack Layout
Normally if you place three the same size icons in a stack, they will stands on top of each other, then we can use 'Align' and 'Position' to positioning them:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SizedBox.expand(
child: Stack(
children: <Widget>[
Icon(
Icons.camera,
size: 100,
color: Colors.red,
),
Align(
alignment: Alignment.center,
child: Icon(
Icons.camera,
size: 100,
color: Colors.blue,
)),
Positioned(
bottom: 20,
child: Icon(
Icons.camera,
size: 100,
color: Colors.green,
))
],
),
),
),
);
}
}

[Flutter] Stack Layout的更多相关文章
- flutter系列之:flutter中常用的Stack layout详解
[toc] 简介 对于现代APP的应用来说,为了更加美观,通常会需要用到不同图像的堆叠效果,比如在一个APP用户背景头像上面添加一个按钮,表示可以修改用户信息等. 要实现这样的效果,我们需要在一个Im ...
- flutter stack
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp(home: new MyApp())); } clas ...
- Flutter——Stack组件(层叠组件)、Align组件、Positioned组件
Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局. Stack组件 常用于两个子元素. Stack ...
- flutter stack嵌套,appbar透明,Container设置背景图片并且图片在appbar之下
stack嵌套 一般情况下 stack是无法嵌套,出现stack嵌套,布局就会出乱 解决方式:就是第二个stack需要确定宽高 appbar透明 AppBar( backgroundColor: Co ...
- Flutter Stack布局中定位的方式
前言 想要记录一下Stack布局中,定位的两种方式 代码 //……省略无关代码…… child: new Column( children: <Widget>[ new SizedBox( ...
- flutter系列之:UI layout简介
目录 简介 flutter中layout的分类 常用layout举例 总结 简介 对于一个前端框架来说,除了各个组件之外,最重要的就是将这些组件进行连接的布局了.布局的英文名叫做layout,就是用来 ...
- Flutter学习笔记(二)
*.assets 当引用图片的时候,需要在pubspec.yaml的文件中的flutter下添加assets,类似于下面的样子: image.png 这里需要注意的是文件里的assets只要一个缩进即 ...
- 栈帧示意图:stack pointer、frame pointer
更多参考:http://www.embeddedrelated.com/usenet/embedded/show/31646-1.php 一: The calling convention descr ...
- Call stack Structure
The stack frame at the top of the stack is for the currently executing routine. Th ...
随机推荐
- Go语言学习笔记(6)——指针
指 针 指针: 存储另一个变量的内存地址的变量: Go语言的取地址符号也是& 1. 声明指针: var needle_name *type var b int = 10 var a *int ...
- egret 微信小游戏 错误
1,使用jszip错误 (1) t.createElementNS is not a function 修改:webapp-adapter.js,增加一个方法 createElementNS: f ...
- 货币转换B
描述 人民币和美元是世界上通用的两种货币之一,写一个程序进行货币间币值转换,其中: ...
- vue-cli3 使用雪碧图
//vue.config.js const path = require("path"); const SpritesmithPlugin = require("webp ...
- AngularJS入门教程之与服务器(Ajax)交互操作示例
AngularJS从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一 ...
- APP漏洞之WebView File域同源策略绕过漏洞
i春秋作家:MAX丶 基本知识Android架构 Kernel内核层 漏洞危害极大,通用性强 驱动由于多而杂,也可能存在不少漏洞 Libaries系统运行库层 系统中间件形式提供的运行库 包括libc ...
- linux串口命令
proc # cat /proc/tty/driver/serial serinfo:1.0 driver revision: 0: uart:16550A port:000003F8 irq:4 t ...
- leetcode-8.atoi · string *
题面 原题挺长的,还是英文,就不抄了,
- ASE19团队项目beta阶段Backend组 scrum5 记录
本次会议于12月11日,19:30在微软北京西二号楼sky garden召开,持续10分钟. 与会人员:Zhikai Chen, Lihao Ran, Xin Kang 请假人员:Hao Wang 每 ...
- XML文件解析之JDOM解析
1.JDOM介绍 JDOM的官方网站是http://www.jdom.org/,JDOM解析用到的jar包可以在http://www.jdom.org/dist/binary/中下载,最新的JDOM2 ...