7.Flutter学习之Stack层叠组件、Stack与Align Stack 与Positioned实现 RelativeLayout

笔录Flutter（五）布局系列：Stack层叠组件、Stack与Align Stack 与Positioned实现 RelativeLayout
相比学习过Android的同学们应该都清楚什么是RelativeLayout。这里就不进行解释了。直接看内容吧。

Stack(层叠组件)

属性	说明
alignment	配置所有子元素的显示位置
children	子组件

Stack：顾名思义，就是将所有子组件进行层叠。效果如下

void main() => runApp(RelativeLayoutApp());

class RelativeLayoutApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter中RelativeLayout演示'),
        ),
        body: RelativeLayoutWidget(),
      ),
    );
  }
}

class RelativeLayoutWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          width: 300,
          height: 300,
          color: Colors.red,
        ),
        Text(
          '这里是文本11',
          style: TextStyle(
              color: Colors.white
          ),
        ),
        Text('这里是文本22')
      ],
    );
  }
}

可以从图中看出，我们的两个Text组件被叠放在同一个位置。

注意：Stack中alignment表示的是所有子组件的位置。

如果我们需要指定Statck中的alignment的具体位置可以同过Alignment(x,y)来确定位置。其中‘1,1’表示右下角，‘0,0’表示居中，’-1,-1’表示左上角。
这样子可能不太直观，接下来我讲一下Align与Stack的结合使用。可以更加直观的理解。

Align(对齐)

属性	说明
alignment	配置元素的显示位置
child	子组件

Positioned()

属性	说明
top	子元素距离顶部的距离
left	子元素距离左侧的距离
right	子元素距离右侧的距离
bottom	子元素距离底部的距离

接下来对其进行demo演示：

void main() => runApp(RelativeLayoutApp());

class RelativeLayoutApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter中RelativeLayout演示'),
        ),
        body: RelativeLayoutWidget(),
      ),
    );
  }
}

class RelativeLayoutWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        color: Colors.red,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topCenter,
              child: Icon(Icons.account_circle,color: Colors.white,size: 40,),
            ),
          Positioned(
            top: 50,
            left: 50,
            child:Icon(Icons.print,color: Colors.white,size: 40)
          ),
           Icon(Icons.zoom_out_map,color: Colors.white,size: 40,),
          ],
        ),
      ),
    );
  }
}