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的布局与定位. 一.盒子模型 由图可以看出 盒子 ...
随机推荐
- React 版本16.9.0 中配置路由以及路由传参
我的脚手架版本如下: "dependencies": { "antd": "^3.21.4", "jquery": &q ...
- java join()基本用法与说明解释
join()方法的作用,是等待这个线程结束: 也就是说,t.join()方法阻塞调用此方法的线程(calling thread)进入 TIMED_WAITING 状态,直到线程t完成,此线程再继续: ...
- APISIX系列 | 使用 docker-apisix 安装APISIX服务
官方仓库:https://github.com/iresty/docker-apisix 官方仓库 拉取 git clone git@github.com:iresty/docker-apisix.g ...
- TermKit的新一代Mac终端,在Ubuntu 11.04 轻松安装TermKit
作为开发人员的必备工具,终端程序却一直没有什么大的变化,TermKit旨在改变这一切,作为下一代的命令行/终端程序,TermKit为我们提供了一个图形化的终端/命令行程序,它可以以可视化的方式展示终端 ...
- CentOS7.6 X64搭建mysql服务
1.官方安装文档 http://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ 2.下载 Mysql yum包 http://dev.mysql.co ...
- Linux部署springboot项目,两种方式
部署jar包(官方推荐) 在linux服务器上运行Jar文件时通常的方法是: $ java -jar test.jar 这种方式特点是ssh窗口关闭时,程序中止运行.或者是运行时没法切出去执行其他任务 ...
- Ubuntu下配置Window CIFS共享
转自:https://blog.csdn.net/wanfengzhong/article/details/52550074 1. 准备windows共享文件夹 2. 安装 cifs-utilssud ...
- 定制flask-admin的主页
flask也用了很久了,一般配合flask-admin设置后台. 但是flask-admin设置的都是自己加入的,对某些model进行管理. 下面介绍如何定制flask-admin的首页. 原来我们引 ...
- 大数据 -- zookeeper和kafka集群环境搭建
一 运行环境 从阿里云申请三台云服务器,这里我使用了两个不同的阿里云账号去申请云服务器.我们配置三台主机名分别为zy1,zy2,zy3. 我们通过阿里云可以获取主机的公网ip地址,如下: 通过secu ...
- 量化编程技术—pandas与数据分析
# -*- coding: utf-8 -*- # @Date: 2017-08-26 # @Original: import numpy as np stock_cnt = 200 view_day ...