Flutter使用Stack与Positioned实现图片溢出容器时内容被裁剪如何解决？

问题描述 #

在Flutter开发中尝试使用Stack和Positioned组件，让图片从容器顶部略微溢出容器外部，但超出容器的图片部分被裁剪消失，无法正常显示。

• 当前实际效果：
  
• 预期实现效果：
  

现有代码问题分析 #

• Positioned 组件使用逻辑错误，该组件只能作为 Stack 的直接子节点生效，现有代码中将 Positioned 放在了渐变容器的 child 属性中，定位规则不会按照Stack的边界计算。
• Stack 的 clipBehavior 属性配置为 Clip.hardEdge，该配置会裁剪所有超出Stack边界的内容，自然无法显示溢出的图片部分。
• 现有代码给 Positioned 设置的 top:75.0 是相对于父容器顶部向下偏移75，图片只能在容器内部展示，要实现从顶部溢出需要设置为负数偏移。

修复后代码 #

Column(
  children: [
    Stack(
      fit: StackFit.loose,
      // 关闭裁剪，允许内容溢出显示
      clipBehavior: Clip.none,
      children: [
        // 渐变容器作为Stack的第一个子节点
        Container(
          height: 151.0,
          width: 122.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8.0),
            gradient: const LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Color(0xffFFF0E5),
                Color(0xffdeddc2),
                Color(0xffa9ceb1),
                Color(0xff68bdb9),
                Color(0xff30a6ca)
              ],
            ),
            boxShadow: const [
              BoxShadow(
                color: Color.fromARGB(255, 234, 246, 250),
                spreadRadius: 8,
                blurRadius: 7,
                offset: Offset(0, 6),
              ),
            ],
            border: Border.all(
              width: 4,
              color: Colors.yellow,
            ),
          ),
        ),
        // Positioned改成Stack的直接子节点，调整top值实现顶部溢出
        Positioned(
          // 可根据实际效果调整数值，负数代表向上偏移超出容器顶部
          top: -30.0,
          child: Image.asset(
            'assets/images/watch-gt2-listimage-Matte-Black.png',
            height: 120.0,
            width: 125.0,
          ),
        ),
      ],
    ),
  ],
)

效果说明 #

修改后Stack不会裁剪溢出内容，同时Positioned按照Stack边界定位，设置负的top值即可实现图片从容器顶部溢出的预期效果，可根据实际设计需要调整top属性的数值控制溢出高度。

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