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

方法一

使用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,
                  ),
                ),
              ],
            )
          ],
        ),
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容