Flutter Stack组件

alignment属性

class HomeContext extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Container(
            width: 300,
            height: 300,
            color: Colors.cyan,
          ),
          Text(//如果Text放Container上会被覆盖
            'Hello World',
            style: TextStyle(fontSize: 30, color: Colors.white),
          ),
        ],
      ),
    );
  }
}

给alignment指定参数

class HomeContext extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Stack(
        alignment: Alignment(0,1),//0,0表示居中
        children: <Widget>[
          Container(
            width: 300,
            height: 300,
            color: Colors.cyan,
          ),
          Text(//如果Text放Container上会被覆盖
            'Hello World',
            style: TextStyle(fontSize: 30, color: Colors.white),
          ),
        ],
      ),
    );
  }
}

Stack结合Align使用

class HomeContext extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        width: 300,
        height: 300,
        color: Colors.cyan,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topLeft,
              child: Icon(Icons.account_balance,color: Colors.white,),
            ),
            Align(
              alignment: Alignment.center,
              child: Icon(Icons.home,color: Colors.white,),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Icon(Icons.ac_unit,color: Colors.white,),
            )
          ],
        ),
      ),
    );
  }
}

Stack结合Positioned使用

class HomeContext extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        width: 300,
        height: 300,
        color: Colors.cyan,
        child: Stack(
          children: <Widget>[
            Positioned(//top,bottom left,right,child
              top: 0,
              left: 0,
              child: Icon(Icons.account_balance,color: Colors.white,),
            ),
            Positioned(
              top: 145,
              left: 145,
              child: Icon(Icons.home,color: Colors.white,),
            ),
            Positioned(
              bottom: 0,
              right: 0,
              child: Icon(Icons.ac_unit,color: Colors.white,),
            )
          ],
        ),
      ),
    );
  }
}