Flutter从入门到跑路 ------ Stack层叠组件、Stack&Align、Stack&Positoned定位布局（五）

Stack组件

与Align和Positiond实现定位布局

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

class StackDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("stack"),
      ),
      body: Stack(
        children: [
          Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
          Container(
            width: 90,
            height: 90,
            color: Colors.blue,
          ),
        ],
      ),
    );
  }
}

Stack组件中结合Position组件可以控制每个子元素显示位置

class PositionDemos extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Postion"),
      ),
      body: Stack(
        children: [
          Positioned(
            top: 100.0,
            child: Container(
              color: Colors.blue,
              child: Text("第一个组件"),
            ),
          ),
          Positioned(
            top: 200,
            right: 100,
            child: Container(
              color: Colors.yellow,
              child: Text("第二个组件"),
            ),
          ),
          ),
        ],
      ),
    );
  }
}