Flutter Stack Align Positioned

Flutter Stack 层叠组件

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

参数详解

Stack

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

代码示例

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('我是文本一千一百一十一'),
      ],
    );
  }
}
123456789101112131415161718192021

Align

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

使用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('我是文本一千一百一十一'),
            ),
 
          ],
        ),
      );
  }
}
12345678910111213141516171819202122232425262728293031

Positioned

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

使用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('我是文本一千一百一十一'),
            ),
 
          ],
        ),
      );
  }
}
123456789101112131415161718192021222324252627282930313233343536