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的布局与定位. 一.盒子模型 由图可以看出 盒子 ...
随机推荐
- 冰多多团队-第七次scrum例会
冰多多团队-第七次Scrum会议 工作情况 团队成员 已完成任务 待完成任务 zpj 接入IAT模块 debug, IAT 牛雅哲 调研科大讯飞SDK中其他模块,寻找符合我们的需求的部分,将接口更换成 ...
- uniapp - 更改项目生成模板、页面
每次生成项目目录都需要删除一些再添加太麻烦了,就想着能不能修改一下模板 - 当然自定义模板也能实现 好了,被我找到了. 修改以后源文件名称和格式覆盖回去即可,重新启动hbuilderx 这里可以修改e ...
- TortoiseGit用户名密码的更换方法介绍
http://www.downza.cn/xy/53171.html 有时候因实际需求要更换TortoiseGit用户名密码,怎么办呢?下文就是TortoiseGit用户名密码的更换方法介绍,一起看看 ...
- linux压缩 zip和unzip
.把/home目录下面的mydata目录压缩为mydata.zip zip -r mydata.zip mydata #压缩mydata目录 .把/home目录下面的mydata.zip解压到myda ...
- linux环境下安装python 3
说明: 在linux环境下,都默认安装python 2的环境,由于python3在python2的基础上升级较大,所以安装python 3环境用于使用最新的python 3的语法. 安装过程: 1.下 ...
- 执行redis命令redis-trib.rb查看集群信息报错cannot load such file -- redis (LoadError)
问题描述: 在执行redis-trib.rb命令查看集群状态的时候,报错: [aiprd@hadoop1 ~]$ redis-trib.rb check Traceback (most recent ...
- [转]Mathjax语法总结
链接地址:https://blog.csdn.net/ajacker/article/details/80301378
- sql-server-dmv-starter-pack
SELECT wait_type , ) AS [wait_time_s] FROM sys.dm_os_wait_stats DOWS WHERE wait_type NOT IN ( 'SLEEP ...
- Android Studio 开发
Android studio安装与配置 (收藏) https://www.cnblogs.com/gufengchen/p/10991886.html ------------------------ ...
- hive 集群搭建
软件环境:centos7 + hadoop2.7.6 1.hive 下载 apache-hive-2.1.0-bin.tar.gz 2.copy apache-hive-2.1.0-bin.tar. ...