Table of Contents

SwiftUIで画像をフルスクリーンで表示する際、画像の中心がずれる現象に遭遇しました。 3:4の縦長画像を流し込んでいたのですが、どういうわけか、右にずれてしまいました。

GeometryReaderで解決 #

GeometryReaderで解決できました。

struct MyScreen: View {
    var body: some View {
        ZStack {
            GeometryReader { proxy in
                Image("Image")
                    .resizable()
                    .scaledToFill()    // .aspectRatio(contentMode: .fill) と同じ
                    .frame(width: proxy.size.width, height: proxy.size.height)
            }
            .ignoresSafeArea()
        }
    }
}

.frameを当ててあげるのがポイントなのでしょうか……。

GeometryReader を挟んで frame あてたら中心になってくれた。なんでだ……。 pic.twitter.com/j4Al3KC8BY
— 鈴木孝宏 (@sussan0416) December 16, 2022

失敗例 #

struct MyScreen: View {
    var body: some View {
        ZStack {
            Image("Image")
                .resizable()
                .scaledToFill()
                .ignoresSafeArea()
        }
    }
}

この実装だと、中心が右にずれました。ignoreSafeAreaを適用するViewが変わると、水平方向のスケールが歪む現象にも遭遇しました……。難しかった。