一、层叠布局Stack的使用

水平布局和垂直布局确实很好用，但是有一种情况是无法完成的，比如放入一个图片，图片上再写一些字或者放入容器。这时就可以考虑使用Stack层叠布局。

/**

* 层叠布局

*/

class StackWidget extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Stack(

alignment: FractionalOffset(0.9, 0.5),

children: [

Image.network(

"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569660771470&di=8d3c09e5830a1a5667b25385bdaacf20&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b44b5d511452a8012187f4acf159.jpg%401280w_1l_2o_100sh.jpg"),

Container(

child: Text("坐北朝南吃西瓜皮朝东甩", style: TextStyle(fontSize: 20.0)),

width: 20.0,

)

],

);

}

}

实现效果：

层叠布局的alignment属性

alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。它有两个值X轴距离和Y轴距离，值是从0到1的，都是从上层容器的左上角开始算起的。

如果是超过两个组件的层叠该如何进行定位？那就要使用层叠定位组件Positioned组件了。

Positioned组件的属性

bottom: 距离层叠组件下边的距离

left：距离层叠组件左边的距离

top：距离层叠组件上边的距离

right：距离层叠组件右边的距离

width: 层叠定位组件的宽度

height: 层叠定位组件的高度

/**

* 层叠布局-层叠定位组件

*/

class StackPositionedWidget extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Stack(

children: [

Image.network(

"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569660771470&di=8d3c09e5830a1a5667b25385bdaacf20&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b44b5d511452a8012187f4acf159.jpg%401280w_1l_2o_100sh.jpg"),

Positioned(

top: 10.0,

left: 115.0,

child: Container(

child: Text("我命由我不由天", style: TextStyle(fontSize: 30.0,color: Colors.red)),

)),

Positioned(

top: 50.0,

right: 20.0,

child: Container(

child: Text("坐北朝南吃西瓜皮朝东甩", style: TextStyle(fontSize: 20.0)),

width: 20.0,

)),

Positioned(

top: 50.0,

left: 20.0,

child: Container(

child: Text("思前想后读左传页往右翻", style: TextStyle(fontSize: 20.0)),

width: 20.0,

))

],

);

}

}

实现效果：