Flutter中如何让Stack内溢出Container的图片可见？

问题出在Stack默认会裁剪超出自身边界的子组件，你的CircleAvatar通过Positioned(top: -20)向上偏移后，超出了Stack的顶部范围，所以被裁剪消失了。

只需要给Stack添加clipBehavior: Clip.none属性，允许子组件溢出显示即可：

Stack(
  alignment: Alignment.topCenter,
  // 添加这一行，允许溢出内容显示
  clipBehavior: Clip.none,
  children: [
    Container(
      height: screenWidth / 1.25,
      width: screenWidth / 1.4,
      decoration: BoxDecoration(
        color: kAppBarColor,
        borderRadius: BorderRadius.circular(12.0),
      ),
      child: Column(
        children: [
          const SizedBox(height: 45.0),
          Text(
            'Joey',
            style: kTitleTextStyle.copyWith(
              fontSize: 22.0,
              fontWeight: FontWeight.w500,
            ),
          ),
          const SizedBox(height: 3.0),
          Text(
            'WhatsApp contact',
            style: kSubTitleTextStyle.copyWith(fontSize: 12.0),
          ),
          const SizedBox(height: 10.0),
          SizedBox(
            height: 210.0,
            width: 210.0,
            child: Image.asset(
              'images/qr_whatsapp.jpg',
              scale: 1.2,
            ),
          ),
          const SizedBox(height: 5.0),
        ],
      ),
    ),
    const Positioned(
      top: -20,
      child: CircleAvatar(
        radius: 25.0,
        backgroundImage: AssetImage('images/p1.jpg'),
      ),
    )
  ],
),

补充说明：如果Stack的父组件也设置了裁剪属性，需要同步调整父组件的clipBehavior为允许溢出，但大部分情况下仅修改Stack的该属性就能解决问题。

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