Flutter UI实现：将按钮放置在两个容器的边缘处

如何实现如上图所示的UI，尤其是将Edit Profile按钮置于两个容器边缘的部分？我尝试使用Stack和Positioned组件但未成功，恳请各位提供实现思路与帮助。

用Stack + Positioned完全可以实现这个效果，大概率是你之前的定位参数或层级逻辑没调整对，下面是具体实现方案：

• 核心布局逻辑：

  1. 最外层用Stack承载三个元素：顶部背景容器、下方白色内容容器、中间的按钮
  2. 顶部容器先占好固定高度的背景区域；下方内容容器通过Positioned的top值向上偏移，留出按钮的位置
  3. 按钮通过Positioned的top参数，让它一半落在顶部容器下方，一半卡在下方内容容器上方，实现跨边缘的效果

• 完整代码示例：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 顶部背景容器
          Container(
            height: 220,
            color: Colors.lightBlue.shade100,
          ),
          // 下方白色内容容器
          Positioned(
            top: 180,
            left: 16,
            right: 16,
            child: Container(
              padding: const EdgeInsets.only(top: 45, left: 16, right: 16, bottom: 20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: const [BoxShadow(color: Colors.black12, blurRadius: 6)],
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Text("John Doe", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600)),
                  SizedBox(height: 8),
                  Text("Flutter Developer | UI/UX Enthusiast", style: TextStyle(color: Colors.grey)),
                  SizedBox(height: 16),
                  Text("About Me", style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
                  SizedBox(height: 8),
                  Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
                ],
              ),
            ),
          ),
          // 跨边缘的Edit Profile按钮
          Positioned(
            top: 160, // 计算逻辑：顶部容器高度(220) - 按钮高度(40)/2 = 200
            left: MediaQuery.of(context).size.width * 0.5 - 85, // 按钮宽度170，取一半偏移实现水平居中
            child: ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                fixedSize: const Size(170, 40),
                backgroundColor: Colors.blue,
                foregroundColor: Colors.white,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
              ),
              child: const Text("Edit Profile"),
            ),
          ),
        ],
      ),
    );
  }
}

• 关键调整点：
  • 下方内容容器的padding.top要大于按钮高度的一半，避免内容被按钮遮挡
  • 按钮的top值计算：顶部容器高度减去按钮高度的一半，确保刚好卡在两个容器的交界处
  • 水平居中可以通过MediaQuery获取屏幕宽度，再减去按钮宽度的一半来实现，适配不同设备

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