美文网首页
【Flutter】Stack绝对定位和相对定位的简单使用

【Flutter】Stack绝对定位和相对定位的简单使用

作者: 坐了整个春夏秋冬 | 来源:发表于2022-08-25 00:17 被阅读0次
方法一

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

方法二

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

Demo
       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 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,
                  ),
                ),
              ],
            )
          ],
        ),

相关文章

  • 【Flutter】Stack绝对定位和相对定位的简单使用

    方法一 使用alignment配合FractionalOffset:对于FractionalOffset的参数,相...

  • 层叠布局

    Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位。Stack允许子组件堆叠,而Po...

  • 定位层

    一,定位层 概念 css属性 特点 二,绝对定位和相对定位 绝对定位和相对定位的区别

  • 相对定位和绝对定位的使用

    组来了一个新人小弟,CSS的问题都是比较常见的基础问题,解决并回答的过程中,就当巩固了 绝对定位和相对定位的使用规...

  • 微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径

    微信小程序 - 相对定位和绝对定位 相对定位relative,绝对定位absolute 相对定位:元素是相对自身进...

  • 相对定位和绝对定位结合使用

    1.相对布局不会脱离标准流,会继续在标准流中占有一部分的空间,不利于布局的界面 绝对定位的元素会以body作为参考...

  • 19. 定位

    相对定位 绝对定位和固定定位:

  • 微信小程序——UI精讲

    相对定位和绝对定位 相对定位的元素是相对自身进行定位,参照物是自己。 绝对定位的元素是相对离它最近的一个已定位的父...

  • 绝对定位

    相对定位和绝对定位的区别 相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,...

  • WXApp入门篇 : flex 布局

    相对定位和绝对定位 相对定位的元素是相对自身进行定位,参照物是自己绝对定位的元素使相对离他最近的一个已定位的父级元...

网友评论

      本文标题:【Flutter】Stack绝对定位和相对定位的简单使用

      本文链接:https://www.haomeiwen.com/subject/xxlagrtx.html