Flutter纯新手如何实现指定界面布局？尝试用Stack实现失败

你要做的这个悬浮卡片布局用Stack完全可以实现，你之前没成功大概率是漏了关键配置，下面给你新手也能直接复用的最简实现方案：

核心逻辑是上层卡片偏移悬浮在底部内容和头部背景的交界处，用以下代码替换flutter create生成的lib/main.dart内容可以直接运行看效果：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            // 头部背景区域
            SizedBox(
              height: 200,
              child: Stack(
                clipBehavior: Clip.none, // 关键配置：允许Stack内组件超出自身范围显示
                children: [
                  // 底层头部背景，可替换为你的图片
                  Container(
                    width: double.infinity,
                    color: Colors.blue,
                  ),
                  // 悬浮卡片
                  Positioned(
                    left: 16,
                    right: 16,
                    bottom: -30, // 控制卡片向下探出的高度，可自行调整
                    child: Card(
                      elevation: 4,
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                      child: const Padding(
                        padding: EdgeInsets.all(16),
                        child: Row(
                          children: [
                            CircleAvatar(radius: 30, backgroundColor: Colors.grey),
                            SizedBox(width: 16),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text('用户名', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                                Text('个人简介内容', style: TextStyle(color: Colors.grey)),
                              ],
                            )
                          ],
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
            // 下方页面内容区域
            Expanded(
              child: Padding(
                // 顶部padding和卡片探出高度一致，避免内容被卡片遮挡
                padding: const EdgeInsets.only(top: 30, left: 16, right: 16),
                child: ListView(
                  children: const [
                    ListTile(title: Text('页面内容项1')),
                    ListTile(title: Text('页面内容项2')),
                    ListTile(title: Text('页面内容项3')),
                  ],
                ),
              )
            )
          ],
        ),
      ),
    );
  }
}

如果需要页面整体滚动的效果，把外层Column换成CustomScrollView、头部改用SliverAppBar实现即可，核心逻辑不变。

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