Flutter中如何在自定义Container上方叠加另一个自定义Container？

需求是制作一个作为GridView子组件的自定义卡片，要求带图片的容器叠加在包含文本列和图标的容器上方，现有代码未达到预期效果，以下是问题分析和修复后的代码：

原问题代码 #

自定义卡片组件 #

import 'package:flutter/material.dart';

class WordCustomCard extends StatelessWidget {
  const WordCustomCard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        Card(
          child: Container(
            margin: EdgeInsets.all(5),
            padding: EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'text1',
                ),
                Text(
                  'text2',
                ),
                Icon(
                  Icons.arrow_circle_up_outlined,
                  size: 30,
                )
              ],
            ),
          ),
        ),
        Card(
            child: Image(
          image: AssetImage('assets/images/alg.png'),
          width: 30,
          height: 30,
        )),
      ],
    );
  }
}

使用卡片的页面代码 #

import 'package:flutter/material.dart';
import 'package:lahgat/components/word_custom_card.dart';

class HomeTap extends StatefulWidget {
  HomeTap({Key? key}) : super(key: key);

  @override
  State<HomeTap> createState() => _HomeTapState();
}

class _HomeTapState extends State<HomeTap> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF7F8FA),
      body: Padding(
        padding: const EdgeInsets.all(9.0),
        child: SafeArea(
          child: Column(
            children: [
              Container(
                height: 150,
                width: double.infinity,
                color: Colors.red,
                child: Row(
                  children: [
                    Text('data'),
                    Text('data'),
                  ],
                ),
              ),
              Expanded(
                child: GridView.builder(
                  padding: EdgeInsets.all(10),
                  itemCount: 9,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                  ),
                  itemBuilder: (context, index) {
                    return const WordCustomCard();
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

问题分析 #

1. 图片外层嵌套的Card自带默认边距和阴影，导致叠加效果生硬，无法实现"悬浮在主卡片上方"的视觉效果
2. Stack默认裁剪超出范围的内容，图片无法显示在主卡片的外部区域
3. 主卡片的padding未预留图片位置，文本内容会被图片遮挡
4. GridView未设置卡片间距和宽高比，布局拥挤且卡片比例不协调

修复后的代码 #

修改后的自定义卡片组件 #

import 'package:flutter/material.dart';

class WordCustomCard extends StatelessWidget {
  const WordCustomCard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topCenter,
      // 允许子组件超出Stack范围显示
      clipBehavior: Clip.none,
      children: [
        Card(
          elevation: 2,
          child: Padding(
            // 顶部预留图片位置，避免文本被遮挡
            padding: const EdgeInsets.only(top: 20, left: 10, right: 10, bottom: 12),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              // 限制Column高度为内容所需最小高度
              mainAxisSize: MainAxisSize.min,
              children: const [
                Text('text1', style: TextStyle(fontSize: 16)),
                SizedBox(height: 6),
                Text('text2', style: TextStyle(fontSize: 14, color: Colors.grey)),
                SizedBox(height: 10),
                Icon(
                  Icons.arrow_circle_up_outlined,
                  size: 30,
                  color: Colors.blueAccent,
                )
              ],
            ),
          ),
        ),
        // 用Positioned控制图片位置，移除多余的Card
        Positioned(
          // 向上偏移，让图片一半悬浮在主卡片外
          top: -15,
          child: Container(
            padding: const EdgeInsets.all(2),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(15),
              // 模拟卡片阴影效果
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.3),
                  blurRadius: 4,
                  offset: const Offset(0, 2),
                )
              ],
            ),
            child: Image(
              image: const AssetImage('assets/images/alg.png'),
              width: 30,
              height: 30,
            ),
          ),
        ),
      ],
    );
  }
}

修改后的GridView配置 #

在HomeTap的GridView.builder中更新gridDelegate，增加间距和宽高比：

gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 3,
  // 横向卡片间距
  crossAxisSpacing: 12,
  // 纵向卡片间距（适配图片偏移）
  mainAxisSpacing: 24,
  // 调整卡片宽高比，让布局更协调
  childAspectRatio: 0.8,
),

修复说明 #

• 给Stack添加clipBehavior: Clip.none，允许图片显示在主卡片外部
• 移除图片外层的Card，改用Container自定义阴影和圆角，实现更自然的悬浮效果
• 使用Positioned控制图片向上偏移，实现叠加在主卡片顶部的视觉
• 主卡片顶部预留padding，避免文本被图片遮挡
• GridView设置合理的间距和宽高比，解决布局拥挤问题

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