为何使用Positioned组件时我的图标一半消失？

问题原因 #

你的代码里Stack组件没有明确的尺寸约束，它的高度完全由子组件Image的实际高度决定。当Positioned的top值加上CircleAvatar的高度超过Stack的高度时，图标就会被裁剪，出现只显示一半的情况。

修复方案 #

给Stack添加明确的尺寸约束，同时让Image适配Stack的尺寸，以下两种方案可选：

方案一：给Stack设置固定尺寸

Card(
  child: Container(
    height: 250,
    width: 200,
    child: Column(
      children: [
        SizedBox(
          height: 150, // 根据需求调整高度
          width: 200,
          child: Stack(
            children: [
              Image.network(
                user!.photoUrl,
                fit: BoxFit.cover,
                width: double.infinity,
                height: double.infinity,
              ),
              Positioned(
                child: CircleAvatar(child: Icon(Icons.add)),
                left: 40,
                top: 100,
              )
            ],
          ),
        )
      ],
    ),
  ),
)

方案二：让Stack占满Column的可用空间

如果希望Stack自动填充Column的剩余空间，用Expanded包裹：

Card(
  child: Container(
    height: 250,
    width: 200,
    child: Column(
      children: [
        Expanded(
          child: Stack(
            children: [
              Image.network(
                user!.photoUrl,
                fit: BoxFit.cover,
                width: double.infinity,
                height: double.infinity,
              ),
              Positioned(
                child: CircleAvatar(child: Icon(Icons.add)),
                left: 40,
                top: 100,
              )
            ],
          ),
        )
      ],
    ),
  ),
)

关键注意点 #

• 必须给Stack添加尺寸约束，这样Positioned的定位才有明确的参考范围。
• 给Image设置fit: BoxFit.cover可以让图片适配Stack的尺寸，避免因图片本身尺寸过小导致Stack高度不足。

内容的提问来源于stack exchange，提问作者Eain Hmun Khin