Flutter Stack 组件

369 阅读1分钟

Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child:  Container(
            height: 500,
            width: 500,
            color: Colors.blue,
            child: Stack(
              // alignment: Alignment.center,
              children: <Widget>[
                Align(
                  alignment: Alignment(3, -0.6),
                  child: Icon(Icons.home, size: 40, color: Colors.white),
                ),
                Align(
                  alignment: Alignment.center,
                  child: Icon(Icons.search, size: 30, color: Colors.white),
                ),
                Align(
                  alignment: Alignment.bottomRight,
                  child: Icon(Icons.settings_applications, size: 30, color: Colors.white),
                )
              ],
            ),
      ),
    );
  }
}