如何在Flutter中实现示例样式的个人资料头像UI布局？

问题说明 #

我需要实现和示例UI一致的个人资料卡片，目前已完成部分布局，但头像样式不符合要求，需要调整成示例中的悬浮圆形头像样式。

当前代码 #

Card(
      child: Stack(
        alignment: Alignment.topCenter,
        children: [
          Container(
            width: double.infinity,
            height: 200.0,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(
                  'https://localwebteam.s3.amazonaws.com/d4536a3a-8703-474c-a3ab-1492dc4ddf2c.jpg',
                ),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 120.0),
            padding: EdgeInsets.all(16.0),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20.0),
                topRight: Radius.circular(20.0),
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  'In the making',
                  style: TextStyle(
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 10.0),
                Text(
                  'sampe test **',
                  style: TextStyle(
                    fontSize: 24.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  'Trainee Software Developer (Flutter)',
                  style: TextStyle(fontSize: 16.0),
                ),
                SizedBox(height: 10.0),
                Container(
                  padding: EdgeInsets.all(8.0),
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Text(
                    '#Flutter',
                    style: TextStyle(
                      fontSize: 16.0,
                      color: Colors.white,
                    ),
                  ),
                ),
                SizedBox(height: 10.0),
                ElevatedButton(
                  onPressed: () {
                    // Add your navigation logic here
                  },
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
                  ),
                  child: Text('View Profile'),
                ),
              ],
            ),
          ),
        ],
      ),
    );

修改后的代码（添加悬浮头像） #

Card(
      child: Stack(
        alignment: Alignment.topCenter,
        children: [
          // 顶部背景图
          Container(
            width: double.infinity,
            height: 200.0,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(
                  'https://localwebteam.s3.amazonaws.com/d4536a3a-8703-474c-a3ab-1492dc4ddf2c.jpg',
                ),
                fit: BoxFit.cover,
              ),
            ),
          ),
          // 悬浮的圆形头像
          CircleAvatar(
            radius: 40.0, // 头像整体大小
            backgroundColor: Colors.white, // 边框颜色
            child: CircleAvatar(
              radius: 38.0, // 头像内容大小（减去边框宽度）
              backgroundImage: NetworkImage('你的头像URL'), // 替换为实际头像地址
              backgroundColor: Colors.grey[200],
            ),
            margin: EdgeInsets.only(top: 160.0), // 调整位置，让头像悬浮在背景图与卡片交界处
          ),
          // 下方白色卡片
          Container(
            margin: EdgeInsets.only(top: 120.0),
            padding: EdgeInsets.fromLTRB(16.0, 56.0, 16.0, 16.0), // 增加顶部padding，避免内容被头像遮挡
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20.0),
                topRight: Radius.circular(20.0),
              ),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  'In the making',
                  style: TextStyle(
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 10.0),
                Text(
                  'sampe test **',
                  style: TextStyle(
                    fontSize: 24.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  'Trainee Software Developer (Flutter)',
                  style: TextStyle(fontSize: 16.0),
                ),
                SizedBox(height: 10.0),
                Container(
                  padding: EdgeInsets.all(8.0),
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Text(
                    '#Flutter',
                    style: TextStyle(
                      fontSize: 16.0,
                      color: Colors.white,
                    ),
                  ),
                ),
                SizedBox(height: 10.0),
                ElevatedButton(
                  onPressed: () {
                    // Add your navigation logic here
                  },
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
                  ),
                  child: Text('View Profile'),
                ),
              ],
            ),
          ),
        ],
      ),
    );

关键调整点 #

• 用双层CircleAvatar实现带白色边框的圆形头像，外层作为边框，内层加载实际头像内容
• 通过margin: EdgeInsets.only(top: 160.0)让头像悬浮在背景图与白色卡片的交界处，一半覆盖背景图，一半覆盖卡片
• 调整白色卡片的顶部padding为56，避免卡片内的文字被头像遮挡（56=原有顶部padding16 + 头像半径40）

内容的提问来源于stack exchange，提问作者Ashen madalagama