Flutter Stack 层叠组件

在介绍Stack 层叠组件时，顺便带上Align和Positioned，以及组合使用

参数详解

Stack

属性	说明
alignment	布局定位  默认 AlignmentDirectional.topStart 我们也可以直接传入参数，自定义位置（值在1与-1之间），如：alignment: Alignment(0.5,0.5),
textDirection	正反排序 TextDirection.ltr TextDirection.rtl
fit	默认StackFit.loose
overflow	默认Overflow.clip
children	子元素

 Align

属性	说明
alignment	布局定位
widthFactor	如果为非null，则将其高度设置为子高度乘以此系数。必须为正数
heightFactor	如果为非null，则将其宽度设置为子宽度乘以此系数。必须为正数
child	子元素

 Positioned

属性	说明
left	左边距
top	上边距
right	右边距
bottom	下边距
width	子元素宽
height	子元素高
child	子元素

 代码示例

Stack 层叠组件顾名思义，层叠在一起，默认左上角堆叠。

 只使用Stack 层叠组件

//只用Stack 层叠组件，alignment属性是统一控制子组件（子组件多了没办法分开的）
class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Container(
          width: 300,
          height: 300,
          color: Colors.red,
        ),
        Text('我是文本一'),
        Text('我是文本一十一'),
        Text('我是文本一百一十一'),
        Text('我是文本一千一百一十一'),
      ],
    );
  }
}

 使用Stack与Align 实现定位布局

class MyBodyB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 300,
        height: 300,
        color: Colors.red,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment(-1,-1),
              child: Text('我是文本一'),
            ),
            Align(
              alignment: Alignment(-0.7,-0.8),
              child: Text('我是文本一十一'),
            ),
            Align(
              alignment: Alignment(-0.5,-0.6),
              child: Text('我是文本一百一十一'),
            ),
            Align(
              alignment: Alignment(-0.3,-0.4),
              child: Text('我是文本一千一百一十一'),
            ),

          ],
        ),
      );
  }
}

使用Stack与Positioned实现定位布局

class MyBodyC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 300,
        height: 300,
        color: Colors.red,
        child: Stack(
          children: <Widget>[
            Positioned(
              child: Text('我是文本一'),
            ),

            Positioned(
              left: 100,
              top: 30,
              child: Text('我是文本一十一'),
            ),

            Positioned(
              left: 150,
              top: 50,
              child: Text('我是文本一百一十一'),
            ),

            Positioned(
              left: 10,
              bottom: 10,
              child: Text('我是文本一千一百一十一'),
            ),

          ],
        ),
      );
  }
}

 效果图

只使用Stack 层叠组件

使用Stack与Align 实现定位布局

使用Stack与Positioned实现定位布局