flutter之Stack层叠布局-头像

最新推荐文章于 2025-07-26 10:28:48 发布

畅想未来~cc

最新推荐文章于 2025-07-26 10:28:48 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： flutter

本文链接：https://blog.youkuaiyun.com/qq_34497319/article/details/99672374

Flutter的Stack布局适用于复杂布局，如在图片上添加文字。alignment属性用于控制层叠位置，从容器左上角开始计算。CircleAvatar常用于创建头像，通过radius调整大小。Positioned组件提供bottom、left、top、right、width和height属性，精确控制子元素的位置。示例代码展示了如何使用这些特性实现特定布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平布局和垂直布局确实很好用，但是有一种情况是无法完成的，比如放入一个图片，图片上再写一些字或者放入容器，这时候Row和Column就力不从心了。Flutter为这种情况准备了Stack层叠布局，效果和代码如下: flutter之Stack层叠布局-头像

层叠布局的 alignment 属性
alignment属性是控制层叠的位置的，建议在两个内容进行层叠时使用。它有两个值X轴距离和Y轴距离，值是从0到1的，都是从上层容器的左上角开始算起的

CircleAvatar组件的使用 CircleAvatar这个经常用来作头像的，组件里边有个radius的值可以设置图片的弧度

import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    var stack = new Stack(
      alignment: const FractionalOffset(0.5,0.89),
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage('http://b-ssl.duitang.com/uploads/item/201805/13/20180513224039_tgfwu.png'),
          radius: 100.0,
        ),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.pinkAccent,
          ),
          padding: EdgeInsets.fromLTRB(20.0, 5.0, 20.0,5.0),
          child: new Text('小熊'),
        )
      ],
    );
    return MaterialApp(
      title:'ListView Widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('Stack层叠布局'),
        ),
        body: Center(child: stack),
      ),
    );
  }
}

Stack的Positioned属性
在这里插入图片描述

Positioned组件的属性

bottom: 距离层叠组件下边的距离
left：距离层叠组件左边的距离
top：距离层叠组件上边的距离
right：距离层叠组件右边的距离
width: 层叠定位组件的宽度
height: 层叠定位组件的高度

具体代码如下:

import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    var stack = new Stack(
      alignment: const FractionalOffset(0.5,0.89),
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage('http://b-ssl.duitang.com/uploads/item/201805/13/20180513224039_tgfwu.png'),
          radius: 100.0,
        ),
        new Positioned(
          top: 10.0,
          left: 10.0,
          child: new Text('小熊'),
        ),
        new Positioned(
          bottom: 10.0,
          right: 10.0,
          height: 50.0,
          width: 50.0,
          child: new Text('小熊'),
        )
      ],
    );
    return MaterialApp(
      title:'ListView Widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('Stack层叠布局'),
        ),
        body: Center(child: stack),
      ),
    );
  }
}