美文网首页
Flutter 基础控件之Stack 层叠布局

Flutter 基础控件之Stack 层叠布局

作者: 繁华乱世沧桑了谁的容颜 | 来源:发表于2020-08-25 18:23 被阅读0次
//  CircleAvatar 头像 alignment和Positioned 不可同时使    用  Positioned(相当于绝对定位 主要应用于多个控件叠加的时候)
  class MyStackWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
    child: Column(
  children: <Widget>[
    Stack(
      // alignment: const FractionalOffset(0.5, 1),
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage(
              'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1671247724,3484152546&fm=26&gp=0.jpg'),
          radius: 100.0,
        ),
        Positioned(
          top: 160,
          left: 70,
          child: Container(
            decoration: new BoxDecoration(
              color: Colors.pink,
            ),
            padding: EdgeInsets.all(10.0),
            child: Text('漂亮MM'),
          ),
        ),
        Positioned(
          top: 10,
          left: 160,
          child: Text(
            'VIP',
            style: TextStyle(
              color: Colors.blue,
              fontSize: 25,
            ),
          ),
        ),
      ],
    ),
  ],
));
}
}
效果图

代码内部有解释

相关文章

网友评论

      本文标题:Flutter 基础控件之Stack 层叠布局

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