Flutter如何实现图片Y轴部分超出Container显示且无底部空白

你现有代码的核心问题是Positioned组件只能作为Stack的直接子组件使用，放在Column、Expanded这类容器内不会生效，而且图片放在Container内部参与布局计算，哪怕用transform偏移，原始尺寸还是会撑出底部空白。

按以下步骤修改即可：

• 将需要超出显示的手表图片从Container内部的Column中移出，和带渐变效果的Container平级，作为外层Stack的直接子组件
• 用Positioned的top属性或者transform调整图片的Y轴偏移量，Stack默认不会裁剪超出边界的内容，且图片不会参与Container内部的布局计算，不会产生多余空白

修改后的代码如下：

Column(
  children: [
    Stack(
      clipBehavior: Clip.none, // 明确设置不裁剪超出内容，兼容高版本Flutter
      children: [
        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,
            ),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      margin: const EdgeInsets.only(
                        left: 4.0,
                        top: 9.0,
                      ),
                      child: Image.asset(
                        'assets/images/Group 484.png',
                        width: 39.52,
                        height: 39.51,
                      ),
                    ),
                    Container(
                      transform: Matrix4.translationValues(5.0, 0.0, 0.0),
                      child: IconButton(
                        onPressed: () {
                          setState(() {
                            selected = true;
                          });
                        },
                        icon: CircleAvatar(
                          backgroundImage: const NetworkImage(
                              'https://lh3.googleusercontent.com/zrvgBfLZl94O6yJ_BlEInCIopvsokkrrrpBmVcByKwLSmacEV6B1P-SJA6eKP84ibOjFpA=s26'),
                          child: selected == false
                              ? Image.asset(
                              'assets/images/Icon ionic-ios-heart-empty.png')
                              : Image.asset(
                              'assets/images/Icon ionic-ios-heart.png'),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        // 手表图片移到Stack下，和Container平级
        Positioned(
          left: 0,
          top: 40, // 根据需求调整这个数值，数值越小图片越靠上，超出Container顶部的部分越多
          child: Image.asset(
            'assets/images/watch-gt2-listimage-Matte-Black.png',
            width: 125.0,
          ),
        )
      ],
    ),
  ],
)

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