Stack布局中定位的方式
//……省略无关代码…… child: new Column(
children: <Widget>[
new SizedBox(height: 20.0),
new Stack(
alignment: const FractionalOffset(0.9, 0.1),//方法一
children: <Widget>[
new Image(
image: new AssetImage("assets/images/illustration_11.jpg"),
width: 300.0,
height: 200.0,
fit: BoxFit.cover,
),
new Opacity(
opacity: 0.8,
child: new Image(
image: new AssetImage("assets/images/illustration_12.jpg"),
width: 200.0,
height: 150.0,
fit: BoxFit.cover,
),
),
new GestureDetector(
onTap: () {
Fluttertoast.showToast(msg: "分享一下咯");
},
child: new Icon(Icons.share, color: Colors.white),
),
],
),
new SizedBox(height: 20.0),
new Stack(
children: <Widget>[
new Image(
image: new AssetImage("assets/images/illustration_11.jpg"),
width: 300.0,
height: 200.0,
fit: BoxFit.cover,
),
new Positioned(//方法二
right: 15.0,
top: 15.0,
child: new Icon(
Icons.share,
color: Colors.white,
),
),
],
)
],
), //……省略无关代码……
方法一
使用alignment配合FractionalOffset:对于FractionalOffset的参数,我是这么理解的:相当于比例,第一个代表横向的权重,第二个代表竖向的权重,横0.9代表在横向十分之九的位置,竖0.1代表在竖向十分之一的位置
方法二
使用定位组件Positioned,其中的top、right、buttom、left,直接代表,距离该方向的距离
Stack布局中定位的方式的更多相关文章
- Flutter Stack布局中定位的方式
前言 想要记录一下Stack布局中,定位的两种方式 代码 //……省略无关代码…… child: new Column( children: <Widget>[ new SizedBox( ...
- CSS布局中的问题解决方式
1.解决搜索框和按钮不对齐的方法 vertical-align属性只有两个元素设置为display:inline-block才有效 2.盒子莫名的分行现象 问题描述:比如父盒子宽度为960px,两个左 ...
- IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世
https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...
- Android中得到布局文件对象有三种方式
Android中得到布局文件对象有三种方式 第一种,通过Activity对象 View view = Activity对象.getLayoutInflater().inflater(R.layout. ...
- flex布局中flex-grow与flex-shrink的计算方式
CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...
- 定位布局中关于z-index的一些问题
定位布局中关于z-index的一些问题 使不同父元素的子元素不会被其他父元素遮盖 背景 两父元素相互遮盖(或部分遮盖) html如下 <div class="main"> ...
- 在网页布局中合理使用inline formating context(IFC)
引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
- css+div网页设计(二)--布局与定位
在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...
随机推荐
- Mac OSX下增加TCP连接数
查看 max files: $ sysctl -a | grep files kern.maxfiles = 12288 kern.maxfilesperproc = 10240 修改: $ sudo ...
- git推送本地分支到远程仓库并在远程仓库创建新分支
$ git push <远程主机名> <本地分支名>:<远程分支名> git push master test:test #master 为设置的远程仓库别名,第一 ...
- Linux(环境篇):系统搭建本地FTP后,无法登录(331 Please specify the password.)问题解决
首先 Linux 搭建ftp,开放21端口.(省略...) 你可能会遇到以下问题:错误 SELinux is disabled 解决: setenforce: SELinux is disabled ...
- Netty - PooledByteBufAllocator
堆外内存, 就是非JVM管理的,由os管理的内存,等同于c语言里面的mallco分配的内存 故堆外内存的好处, 1. 不会有GC回收,缓解gc压力 2. 避免一次copy,发生到socket buff ...
- numpy的文件存储.npy .npz 文件详解
Numpy能够读写磁盘上的文本数据或二进制数据. 将数组以二进制格式保存到磁盘 np.load和np.save是读写磁盘数组数据的两个主要函数,默认情况下,数组是以未压缩的原始二进制格式保存在扩展名为 ...
- Ubuntu 16.04.4 LTS下安装OpenSSL
1.下载openssl,本次下载的版本是openssl-1.1.0l.tar.gz : 地址 https://www.openssl.org/source/openssl-1.1.0l.tar.gz ...
- java面试题实战三
华为优招面试经验. 1.笔试(这部分按照华为以前的风格不会为难人的,认真做AC一道题就可以进面试了,我编程能力一般吧,做了一道半而已,-_-||!) 2.测评(性格测试,不要太偏激就行了) 3.面试分 ...
- 【python库】tqdm介绍及常用方法
前言 Tqdm 是一个快速,可扩展的Python进度条,可以在 Python 长循环中添加一个进度提示信息,用户只需要封装任意的迭代器 tqdm(iterator).具体使用可以查看官网. 操作 fr ...
- Jenkins - 分布式构建
1 - 简介 Jenkins支持分布式多节点(Master-Slave)运行模式. 将安装Jenkins的主机作为Master节点,然后通过界面配置(或远端启动服务)来添加Slave节点. 在这种部署 ...
- 使用清华源进行pip install
pypi 镜像使用帮助 pypi 镜像每 5 分钟同步一次. 临时使用 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple some-pac ...