SwiftUI实现Facebook首页：如何修复故事视图图片的多余尖角？

你的问题出在图片未按圆角剪裁：当前代码里的.clipped()是按矩形边界剪裁图片，而外层的RoundedRectangle只是绘制了圆角边框，导致图片超出圆角的部分露出来形成尖角。

解决方法 #

将.clipped()替换为.clipShape(RoundedRectangle(cornerRadius: 16))或者直接使用.cornerRadius(16)，让图片按圆角形状剪裁，就能和边框匹配。

修改后的完整代码

ZStack{
    Color(.secondarySystemGroupedBackground)
    ScrollView(.vertical){
        VStack{
            ScrollView(.horizontal,showsIndicators: false){
                HStack(spacing:3){
                    ForEach(stoires,id:\.self) { name in
                        Image(name)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 140,height: 199,alignment: .center)
                            .background(Color.red)
                            .clipShape(RoundedRectangle(cornerRadius: 16)) // 替换原.clipped()
                            .overlay(
                                RoundedRectangle(cornerRadius: 16)
                                    .stroke(Color(.systemGray5), lineWidth: 4)
                            )
                    }
                }.padding()
            }
        }
    }
}

或者简化用.cornerRadius(16)：

Image(name)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 140,height: 199,alignment: .center)
    .background(Color.red)
    .cornerRadius(16) // 直接用这个替代.clipped()
    .overlay(
        RoundedRectangle(cornerRadius: 16)
            .stroke(Color(.systemGray5), lineWidth: 4)
    )

原理说明 #

• .clipped()：仅剪裁超出视图矩形边界的内容，不处理圆角。
• .clipShape(RoundedRectangle(...))：将视图剪裁为指定的圆角矩形形状，彻底去除超出圆角的部分。
• .cornerRadius()：是.clipShape(RoundedRectangle(cornerRadius: ...))的简化写法，效果一致。

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