层叠布局Stack的使用，以及定义组件的两种方式。

先上效果图：

效果图

层叠布局Stack的使用

用法很简单就是在Stack的children属性里面放需要叠加的widget

定义的第一种方式

class MyStack extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(//使用Stack将图片和文字叠加在一起
      children: <Widget>[
        Container(
          child: CircleAvatar(
            backgroundImage: NetworkImage('https://upload.jianshu.io/users/upload_avatars/3106272/cb141b3e-f89d-4dda-bdb9-89209ccec536.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96'),
            radius: 10.0,
          ),
          width: 200,
          height: 200,
        ),
        Text(
          'wsdfvdf',
          style: TextStyle(
            backgroundColor: Colors.deepPurpleAccent,
            color: Colors.white,
            fontSize: 15.0
          ),
        ),
      ],
      alignment: Alignment.center,
    );
  }
}

定义的第二种方式

上面那种是通过class来定义，还有一种是可以通过var来定义：

var stack = new Stack(
      children: <Widget>[
        Container(
          child: CircleAvatar(
            backgroundImage: NetworkImage('https://upload.jianshu.io/users/upload_avatars/3106272/cb141b3e-f89d-4dda-bdb9-89209ccec536.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96'),
            radius: 10.0,
          ),
          width: 200,
          height: 200,
        ),
        Text(
          'wsdfvdf',
          style: TextStyle(
              backgroundColor: Colors.deepPurpleAccent,
              color: Colors.white,
              fontSize: 15.0
          ),
        ),
      ],
      alignment: Alignment.center,
    );

具体使用方法举例：

层叠布局