flutter 层叠布局stack postitioned

定位布局(层叠布局)stack postitioned

层叠布局和 Web 中的绝对定位很像,子组件可以根据距父容器四个角的位置来确定自身的位置。层叠布局允许子组件按照代码中声明的顺序堆叠起来。Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位。Stack允许子组件堆叠，而Positioned用于根据Stack的四个角来确定子组件的位置

stack

stack允许子组件堆叠,在column或者row组件中元素不会进行覆盖堆叠,但是在srack可以进行
如下面代码

Column(
        children: [
          Container(width: 500,height: 500,
          decoration: BoxDecoration(image: DecorationImage(image: AssetImage("images/bg.png"),fit: BoxFit.cover),
          ),),
          Text("你好flutter",style: TextStyle(color: Colors.cyanAccent,fontSize: 60),)
        ],
      ),
    );

显示的内容为

图片与文字进行分割
当使用stack时可以将文字堆叠在图片上

示例代码

Center(
      child: Stack(
        children: [
          Container(width: 500,height: 500,
          decoration: BoxDecoration(image: DecorationImage(image: AssetImage("images/bg.png"),fit: BoxFit.cover),
          ),),
          Text("你好flutter",style: TextStyle(color: Colors.cyanAccent,fontSize: 60),)
        ],
      ),
    );

Positioned

Positioned与stack相互配合使用，它是Stack布局内进行定位的Widget，可以通过left，right，top，bottom对stack的子组件进行位置定位

代码实例：

Container(
        child: Stack(
          children: [
            Positioned(
              left: 20,top: 40,
                child:
                Container(
                  width: 80,
                  height: 80,
                  color: Colors.blue,
                )
            )
          ],
        ),
    );
  }

Positioned的定位是相对与外层容器，在上述代码中，外部容器是Container，就是整个容器