flutter组件之Stack

stack组件可以实现定位问题，如果您想以简单的方式重叠多个子级，例如具有一些文本和图像，并用渐变和一个附加在底部的按钮覆盖，则该类很有用。

// SizedBox组件能强制子控件具有特定宽度、高度或两者都有,使子控件设置的宽高失效
// width: 100.0,//宽度
// height: 100.0,//高度
// child:  Container(
//   width: 200.0,
//   height: 200.0,
//   color: Color(0xffff0000),
// ),
SizedBox(
  width: 250,
  height: 250,
  child: new Stack(
    children: <Widget>[
      //定位组件
      //left: 20.0
      //top: 10.0
      //right: 10.0
      //bottom: 10.0
      //width: 10.0
      //height: 20.0
      //child: new Text()
      Positioned(
        top: 100.0,
        child: Container(
          color: Colors.blue,
          child: Text("第一个组件"),
        ),
      ),
      Positioned(
        top: 200,
        right: 100,
        child: Container(
          color: Colors.yellow,
          child: Text("第二个组件"),
        ),
      ),
      Positioned(
        left: 100.0,
        child: Container(
          color: Colors.red,
          child: Text("第三个组件"),
        ),
      ),
      new Container(
        width: 250,
        height: 250,
        color: Colors.white,
      ),
      new Container(
        padding: EdgeInsets.all(5.0),
        //对齐方式
        alignment: Alignment.bottomCenter,
        decoration: BoxDecoration(
          //渐变色
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: <Color>[
              Colors.black.withAlpha(0),
              Colors.black12,
              Colors.black45
            ],
          ),
        ),
        child: new Text(
          "Foreground Text",
          style: TextStyle(color: Colors.white, fontSize: 20.0),
        ),
      ),
    ],
  ),
)