如何使用 SwiftUI 將圖像與屏幕中心對齊？

Question

我正在嘗試將圖像與 Swift/SwiftUI 中的屏幕中心對齊。

GeometryReader { geometry in
            HStack {
                Spacer()
                Color.white
                    .ignoresSafeArea()
                Image("1Pzpe")
                    .frame(width: geometry.size.width-3, height: geometry.size.width-3, alignment: .center)
                Spacer()
            }

在此處輸入圖像描述而不是居中，我的圖像向右移動了一點。 任何幫助將不勝感激：）

Answer 1

對於這種情況，您可能不需要 GeometryReader

您將顏色視圖放在圖像旁邊，因此它永遠不會居中，如果您希望圖像超過顏色，您可能只需要一個 ZStack

ZStack{
        Color.white
            .ignoresSafeArea()
        Image(systemName: "iphone")
    }

要在視圖中居中圖像，您只需將圖像放在那里也不需要 GeometryReader 來填充圖像只需使用.resizable() .scaledToFit()和.padding(3)

ZStack{
        Color.white
            .ignoresSafeArea()
        Image(systemName: "square.fill")
            .resizable()
            .scaledToFit()
            .padding(3)
            .foregroundColor(.red)
    }

Answer 2

使用這個修飾符可以讓你居中圖像

extension Image {
    func centerCropped() -> some View {
        GeometryReader { geo in
            self
            .resizable()
            .scaledToFill()
            .frame(width: geo.size.width, height: geo.size.height)
            .clipped()
        }
    }
}