1. //……省略无关代码……
  2.  
  3. child: new Column(
  4. children: <Widget>[
  5. new SizedBox(height: 20.0),
  6. new Stack(
  7. alignment: const FractionalOffset(0.9, 0.1),//方法一
  8. children: <Widget>[
  9. new Image(
  10. image: new AssetImage("assets/images/illustration_11.jpg"),
  11. width: 300.0,
  12. height: 200.0,
  13. fit: BoxFit.cover,
  14. ),
  15. new Opacity(
  16. opacity: 0.8,
  17. child: new Image(
  18. image: new AssetImage("assets/images/illustration_12.jpg"),
  19. width: 200.0,
  20. height: 150.0,
  21. fit: BoxFit.cover,
  22. ),
  23. ),
  24. new GestureDetector(
  25. onTap: () {
  26. Fluttertoast.showToast(msg: "分享一下咯");
  27. },
  28. child: new Icon(Icons.share, color: Colors.white),
  29. ),
  30. ],
  31. ),
  32. new SizedBox(height: 20.0),
  33. new Stack(
  34. children: <Widget>[
  35. new Image(
  36. image: new AssetImage("assets/images/illustration_11.jpg"),
  37. width: 300.0,
  38. height: 200.0,
  39. fit: BoxFit.cover,
  40. ),
  41. new Positioned(//方法二
  42. right: 15.0,
  43. top: 15.0,
  44. child: new Icon(
  45. Icons.share,
  46. color: Colors.white,
  47. ),
  48. ),
  49. ],
  50. )
  51. ],
  52. ),
  53.  
  54. //……省略无关代码……

  

方法一

使用alignment配合FractionalOffset:对于FractionalOffset的参数,我是这么理解的:相当于比例,第一个代表横向的权重,第二个代表竖向的权重,横0.9代表在横向十分之九的位置,竖0.1代表在竖向十分之一的位置

方法二

使用定位组件Positioned,其中的top、right、buttom、left,直接代表,距离该方向的距离

Stack布局中定位的方式的更多相关文章

  1. Flutter Stack布局中定位的方式

    前言 想要记录一下Stack布局中,定位的两种方式 代码 //……省略无关代码…… child: new Column( children: <Widget>[ new SizedBox( ...

  2. CSS布局中的问题解决方式

    1.解决搜索框和按钮不对齐的方法 vertical-align属性只有两个元素设置为display:inline-block才有效 2.盒子莫名的分行现象 问题描述:比如父盒子宽度为960px,两个左 ...

  3. IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世

    https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...

  4. Android中得到布局文件对象有三种方式

    Android中得到布局文件对象有三种方式 第一种,通过Activity对象 View view = Activity对象.getLayoutInflater().inflater(R.layout. ...

  5. flex布局中flex-grow与flex-shrink的计算方式

    CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...

  6. 定位布局中关于z-index的一些问题

    定位布局中关于z-index的一些问题 使不同父元素的子元素不会被其他父元素遮盖 背景 两父元素相互遮盖(或部分遮盖) html如下 <div class="main"> ...

  7. 在网页布局中合理使用inline formating context(IFC)

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  8. 奇妙的CSS之布局与定位

    前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...

  9. css+div网页设计(二)--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

随机推荐

  1. Google BERT应用之《红楼梦》对话人物提取

    Google BERT应用之<红楼梦>对话人物提取 https://www.jiqizhixin.com/articles/2019-01-24-19

  2. 《Go语言实战》读书笔记

    <Go语言实战>中文版pdf 百度网盘: https://pan.baidu.com/s/1kr-gMzaPAn8BFZG0P24Oiw 提取码: r6rt 书籍源码:https://gi ...

  3. 010 vue使用render方法渲染组件

    1.普通的组件渲染方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. [转]import xxx from 和 import {xxx} from的区别

    原文地址:https://www.cnblogs.com/Abner5/p/7256043.html 1.vue import FunName from ‘../xxx’ 1.js export de ...

  5. electron-vue在使用element-ui时部分组件无法显示问题

    原文连接: https://juejin.im/post/5d132629e51d45772a49ad71 问题描述 在使用electron开发桌面系统时,遇到部分element-ui组件在页面中无法 ...

  6. Qt编写安防视频监控系统16-设备播放

    一.前言 设备播放模块是后面增加的,核心就是通过组合rtsp视频流地址来播放实时视频和历史视频,目前市面上很多厂家比如排第一的海康都是支持直接rtsp通过NVR来播放某个通道视频流和回放某个通道的视频 ...

  7. java继承实现的基本原理

    方法调用的过程 寻找要执行的实例方法的时候,是从对象的实际类型信息开始查找的,找不到的时候,再查找父类类型信息. 动态绑定,而动态绑定实现的机制就是根据对象的实际类型查找要执行的方法,子类型中找不到的 ...

  8. 分割nginx日志

    #!/bin/bash #此脚本用于自动分割Nginx的日志,包括access.log和error.log #每天00:00执行此脚本 将前一天的access.log重命名为access-xxxx-x ...

  9. Component 'TABCTL32.OCX'错误

    1.Component 'TABCTL32.OCX'错误的处理方法 错误:Component 'TABCTL32.OCX' or one of its dependencies not correct ...

  10. django缓存相关

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_39726347/articl ...