Flutter中Stack内Image如何设置实现带右上角按钮的详情页样式

在Stack组件中嵌套Image组件，需要在图片右上角放置X形关闭按钮，但当前实现展示效果和预期不符：

• 预期效果：
  
• 实际运行效果：
  

当前实现代码：

list.add(Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Stack(children: [
                Flexible(
                    child:
                        Image.network("${globals.api}/download/$nextPicture")),
                Align(
                  alignment: const Alignment(0.95, -0.95),
                  child: IconButton(
                    icon:
                        const Icon(Icons.cancel, color: Colors.white, size: 25),
                    onPressed: () {
                      deleteSelectedImageRemote(nextPicture);
                    },
                  ),
                )
              ]),
            )
          ]));

现有代码存在两个核心问题：

1. Flexible仅可作为Column、Row等Flex类布局的子组件使用，直接放在Stack下会导致图片布局约束失效，出现尺寸异常、拉伸问题
2. 手动配置Alignment值定位关闭按钮容易出现偏移，且图片未配置和详情页一致的适配、裁剪规则，无法匹配详情页样式

按如下逻辑修改代码即可：

• 移除Stack下错误嵌套的Flexible组件
• 给图片区域添加和详情页一致的圆角裁剪，配置BoxFit.cover保证图片缩放规则和详情页统一
• 用Positioned组件替代手动Alignment实现关闭按钮的右上角定位，精度更高
• 给Stack添加裁剪规则，避免子组件溢出布局范围

修正后代码：

list.add(Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    ClipRRect(
      // 替换为详情页使用的圆角数值即可
      borderRadius: BorderRadius.circular(8),
      child: Stack(
        clipBehavior: Clip.hardEdge,
        children: [
          Image.network(
            "${globals.api}/download/$nextPicture",
            fit: BoxFit.cover,
            // 若需要固定尺寸和详情页完全一致，可补充配置宽高参数
            // width: double.infinity,
            // height: 220,
          ),
          Positioned(
            top: 6,
            right: 6,
            child: IconButton(
              icon: const Icon(Icons.cancel, color: Colors.white, size: 25),
              onPressed: () {
                deleteSelectedImageRemote(nextPicture);
              },
            ),
          )
        ],
      ),
    )
  ],
));

若需要1:1匹配详情页样式，把代码中圆角值、图片宽高、fit参数、按钮边距调整为和详情页完全相同的数值即可。

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