Flutter页面布局：Stack层叠组件 Stack与Align Stack与Positioned实现定位布局

Flutter Stack 组件

Stack 表示堆的意思，我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实

现页面的定位布局。

其简单应用：

将小组件可以显示在大组件任何位置

简单演示：

return Stack(
      children: [
        Container(
          width: 300,
          height: 500,
          color: Colors.green,
        ),
        Text('hello111'),
        Text('hello222'),
      ],
    );

可以看到，两个文本堆叠在了一起。

常用属性：alignment，用来配置所有子元素的显示位置（控制整个stack中的元素的方位）：

return Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 300,
            height: 500,
            color: Colors.green,
          ),
          Text(
            'hello111',
            style: TextStyle(fontSize: 50),
          ),
          Text(
            'hello222',
            style: TextStyle(fontSize: 50),
          ),
        ],
      ),
    );

注意，如果代码中Container在后面，Text在前，那么有色的Container会遮盖住文本

我们也可以自己指定方位，不使用自带的属性。

class Alignment extends AlignmentGeometry {
/// Creates an alignment.
///
/// The [x] and [y] arguments must not be null.
const Alignment(this.x, this.y);

示例的代码告诉我们，要指定方位需要给出x和y的值

Stack与Align

Align也有一个alignment属性可以使用，用法与stack中一致

当容器中有多个不同的组件时，我们可以通过Align或者Positioned来实现定位布局

当Stack与Align Stack结合使用时，我们通常是将stack包裹在Container中

示例：

 return Center(
      child: Container(
        width: 300,
        height: 500,
        color: Colors.green,
        child: Stack(
          alignment: Alignment.center,
          children: [
            Align(
              alignment: Alignment.bottomLeft,
              child: Icon(Icons.home,size: 40,color: Colors.white,),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Icon(Icons.search,size: 30,color: Colors.red,),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Icon(Icons.send,size: 60,color: Colors.orange,),
            ),
          ],
        ),
      ),
    );

Stack与Positioned

用法和Align相似：

            Positioned(
              left: 30,
              child: Icon(Icons.home,size: 40,color: Colors.white,),
            ),
            Positioned(
              bottom: 0,
              left: 100,
              child: Icon(Icons.search,size: 30,color: Colors.red,),
            ),
            Positioned(
              right: 0,
              child: Icon(Icons.send,size: 60,color: Colors.orange,),
            ),