美文网首页
层叠布局Stack的使用,以及定义组件的两种方式。

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

作者: 不泯iOS | 来源:发表于2019-12-11 19:01 被阅读0次

先上效果图:


效果图

层叠布局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,
    );

具体使用方法举例:


层叠布局

相关文章

网友评论

      本文标题:层叠布局Stack的使用,以及定义组件的两种方式。

      本文链接:https://www.haomeiwen.com/subject/bxjagctx.html