Flutter页面布局之Stack层叠组件

Stack表示堆的意思，我们可以使用Stack或者结合Align或Positond实现定位布局

Stack常用属性：

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

结合Positioned组件来控制每个子元素的显示位置

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

结合Align组件来控制每个子元素的显示位置

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

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Stack"),),
        body: HomeContent(),
      ),
    );
  }
}


class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 600,
        color: Colors.lightBlue,
        child: Stack(
          children: <Widget>[
            Positioned(
              child: Icon(Icons.mail,color: Colors.yellow,size: 100,),
              left: 10,
            ),
            Positioned(
              child: Text("Email",),
              left: 42,
              top: 60,
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Icon(Icons.camera_alt,color: Colors.green,size: 100,),
            ),
            Positioned(
              child: Icon(Icons.phone,color: Colors.white,size: 100,),
              right: 10,
            ),
          ],
        ),
      ),

    );
  }
}