[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 ...
随机推荐
- VC++单文档程序固定菜单栏和工具栏
MainFrm.cpp框架类下,找到OnCreate方法 m_wndMenuBar.EnableDocking(CBRS_ALIGN_ANY); m_wndToolBar.EnableDocking( ...
- Asp.net core 学习笔记 2.2 migration to 3.0
Ef core 3.0 一些要注意的改变 refer : https://docs.microsoft.com/en-us/ef/core/what-is-new/ef-core-3.0/breaki ...
- 轻松搭建CAS 5.x系列(7)-在CAS Server使用第三方帐号做认证
概述说明 CAS除了使用自身数据库配置的帐号体系外,也可以使用第三方帐号来做认证. 比如实现如下类似的红色标注部分的登录效果: CAS自带了Facebook.GitHub.WordPress和CAS的 ...
- [前端]多线程在前端的应用——Javascript的线程
JavaScript 是单线程.异步.非阻塞.解释型脚本语言.JavaScript 的设计就是为了处理浏览器网页的交互(DOM操作的处理.UI动画等),决定了它是一门单线程语言.如果有多个线程,它们同 ...
- ES 6 日期util.js =>
微信小程序demo const formatTime = date => { const year = date.getFullYear() const month = date.getMont ...
- [Lua性能] 小试验一例
local s1 = os.clock() local list1 = {} , do list1[#list1 + ] = end local e1 = os.clock() print(" ...
- 原生js上传图片遇到的坑(axios封装)
后台给我写了一个上传图片的接口,自己用form表单测试成功 接口可以正常跳转 测试的代码: <!doctype html> <html lang="en"> ...
- css的导入与基础选择器
css是什么 css也是一门标记语言,主要用作修改控制html的样式 css书写的位置(导入) css是用来控制页面标签的样式,但是可以根据实际情况书写在不同的位置, 放在不同位置有不同的专业叫法,可 ...
- python matplotlib动态绘图
matplotlib animation的官方文档: http://matplotlib.org/api/animation_api.html 接下来完成一个实时获取cpu数值,并绘图的功能. 1.动 ...
- Cryptography -- 密码学
Introduction to Cryptography Cryptography enables you to store sensitive information or transmit it ...