Flutter Stack布局中定位的方式

Stella981
• 阅读 718

前言

想要记录一下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,直接代表,距离该方向的距离

效果

Flutter Stack布局中定位的方式

点赞
收藏
评论区
推荐文章
九路 九路
3年前
干货 | CSS中的四种定位有什么区别?
我们都知道,前端开发里面的CSS中常用的定位方式有普通定位,相对定位,绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
浩浩 浩浩
3年前
【Flutter实战】层叠布局(Stack、Positioned)
4.5层叠布局Stack、Positioned层叠布局和Web中的绝对定位、Android中的Frame布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置。绝对定位允许子组件堆叠起来(按照代码中声明的顺序)。Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位。Stack允许子组件堆叠,而Pos
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Stella981 Stella981
3年前
Flutter学习之重叠布局
1.两个元素的重叠布局可以使用stack组件import'package:flutter/material.dart';voidmain(){runApp(MyApp());}classMyAppextendsStatelessWidget{
Wesley13 Wesley13
3年前
CSS定位和滚动条
0805自我总结一.绝对定位position:absolute;/绝对定位:1、定位属性值:absolute2、在页面中不再占位(浮起来了),就无法继承父级的宽度(必须自己自定义宽度)3、一旦定位后,定位的布局方位top、bottom、left、right都能参与布局
Wesley13 Wesley13
3年前
HTML CSS布局定位
HTMLCSS布局定位我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容。网页布局的好与坏,直接决定了网页最终的展示效果。PC端常见的网页布局形式有两列布局、三列布局等。在CSS中,我们通常使用浮动(float)、定位(position)、显示模式(display)相关属性结合使用,以达到预期效果
Stella981 Stella981
3年前
RobotFramework自动化测试之元素定位
前言:最近在做基于RF框架的Web自动化测试,其中涉及到元素的定位,主要用到id、name、xpath、css四中定位方法,尤其后面的两种方法特别有效,可以解决大部分的定位问题。
Wesley13 Wesley13
3年前
CSS内容布局
网页是由不同内容块构成的:标题、段落、链接、列表、图片、视频,等等。1.定位定位并不适合总体布局,因为它会把元素拉出页面的正常流。元素的初始定位方式为静态定位(static),即块级元素垂直堆叠。把元素设置为相对定位(relative),然后可以相对于其原始位置控制该元素的偏移量,同时又不影响其周围的元
Wesley13 Wesley13
3年前
MySQL 清空表(truncate)与删除表中数据(delete) 详解
删除表信息的方式有两种:truncatetabletable\_name;delete\fromtable\_name;注:truncate操作中的table可以省略,delete操作中的\可以省略truncate、delete清空表数据的区别:1truncate是整体删除(速度较快),delete是逐条删