Flutter-stack層疊樣式

alignment調整佈局

var stack = new Stack(
    alignment: Alignment.center,//元素居中

//alignment: Alignment (1,1),//xy座標，可使用小數點

    children: <Widget>[
      //按順序疊放
      Container(
        height: 300,
        width: 300,
        color: Colors.red,
      ),
      Text('文字')
    ],
  );

多個元素定位

 

 Align

var stack = new Container(
    height: 400,
    width: 300,
    color: Colors.blueAccent,
    child: Stack(
      children: <Widget>[
        Align(
          //alignment:Alignment.topLeft,
          alignment:Alignment(1,2),
          child: Icon(Icons.access_alarm,size: 30,color: Colors.red,),
        ),
        Align(
          alignment:Alignment.center,
          child: Icon(Icons.access_alarm,size: 30,color: Colors.red,),
        ),
        Align(
          alignment:Alignment.bottomLeft,
          child: Icon(Icons.access_alarm,size: 30,color: Colors.red,),
        ),
      ],
    ),
  );

Positioned

var stack = new Container(
    height: 400,
    width: 300,
    color: Colors.blueAccent,
    child: Stack(
      children: <Widget>[
        Positioned(
          top:1,
          left: 1,
          right: 1,
          bottom: 1,
          child: Icon(Icons.access_alarm,size: 30,color: Colors.red,),
        ),
        Positioned(
          top:1,
          left: 1,
          child: Icon(Icons.access_alarm,size: 30,color: Colors.red,),
        ),
        Positioned(
          right: 1,
          bottom: 1,
          child: Icon(Icons.access_alarm,size: 30,color: Colors.red,),
        ),
      ],
    ),
  );