Flutter组件重叠实现及卡片间距调整技术求助

问题分析 #

你当前的写法里，Stack的高度仅由_MainCard决定，_PlanCard被Positioned固定在top:190的位置，不仅适配性差，还会导致_PlanCard下半部分超出Stack范围被裁剪，同时和下方_RecommendedCard的间距靠固定SizedBox控制，没法精准缩小。

修正代码 #

直接替换你的ProfilePage代码：

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

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: Sizes.p12),
        child: Column(
          children: [
            // 调整Stack允许子组件超出范围，用bottom实现重叠
            Stack(
              clipBehavior: Clip.none, // 关键：允许组件超出Stack显示，不然重叠部分会被裁掉
              alignment: Alignment.topCenter,
              children: [
                const _MainCard(),
                // 用bottom负值让PlanCard向上重叠在MainCard底部，数值是重叠高度
                Positioned(
                  bottom: -40, // 这里的数值控制重叠程度，越大重叠越多
                  left: 0,
                  right: 0,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.p12),
                    child: _PlanCard(),
                  ),
                ),
              ],
            ),
            // 用基础间距缩小和PlanCard的距离，可按需调整
            const SizedBox(height: 20),
            const _RecommendedCard(),
          ],
        ),
      ),
    );
  }
}

核心调整点 #

• clipBehavior: Clip.none：默认Stack会裁剪超出自身范围的子组件，开启这个属性才能让重叠部分正常显示。
• Positioned用bottom而非top：相对于_MainCard的底部向上偏移，适配不同屏幕尺寸，不用写死固定top值。
• 精准控制间距：去掉原来固定的100高度SizedBox，通过调整Stack下方的SizedBox高度，或者给_RecommendedCard加margin: const EdgeInsets.only(top: -20)来进一步缩小间距。

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