Flutter 基础控件之Stack 层叠布局

//  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,
            ),
          ),
        ),
      ],
    ),
  ],
));
}
}
效果图

代码内部有解释

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容