SwiftUIで背景の前面に思ったようにビューが表示できません

Question

ご覧いただきありがとうございます。

背景の前面にVStack内の要素を描画したいのですが、画像1のようにぼやけてしまいます。
仮にTextBackgroundViewのColorを青に変更してみると、画像2のようになってしまい、Text("score: (viewModel.score)")の部分すらうまく表示できない状態です。
やりたいことは、画像3のビューをそのまま背景の前面に表示することです。

自分の力のみではうまく解決するのが難しそうだったので質問させていただきました。
どうかお力添えいただきたきたいです。よろしくお願いします。

以下ソースコードと画像になります。

import SwiftUI

struct ContentView: View {
    @ObservedObject var viewModel = ScoreViewModel()
    var body: some View {
        ZStack {
            Background()
            VStack(alignment: .leading) {
                HStack {
                    Image("line")
                        .resizable()
                        .frame(width: 25, height: 25)
                    Text("LINE")
                        .foregroundColor(.gray)
                    Spacer()
                    Text("now")
                        .foregroundColor(.gray)
                        .font(.system(size: 15))
                }
                Text("score: (viewModel.score)")
                    .lineLimit(10)
            }
                .padding()
                .background(TextBackgroundView())
        }
    }
}

class ScoreViewModel: ObservableObject {
    @Published var score = 0
}

struct TextBackgroundView: View {
    var color: Color = Color.gray.opacity(0.05)
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Path { path in
                    let w = geometry.size.width
                    let h = geometry.size.height
                    path.move(to: CGPoint(x: 0, y: 0))
                    path.addLine(to: CGPoint(x: 0, y: h))
                    path.addLine(to: CGPoint(x: w, y: h))
                    path.addLine(to: CGPoint(x: w, y: h))
                    path.addLine(to: CGPoint(x: w, y: 0))
                    path.addLine(to: CGPoint(x: 0, y: 0))
                }
                .fill(self.color)
                .cornerRadius(12)
                .frame(width: UIScreen.screenWidth * (97/100))
            }
        }
    }
}

extension UIScreen {
   static let screenWidth = UIScreen.main.bounds.size.width
   static let screenHeight = UIScreen.main.bounds.size.height
   static let screenSize = UIScreen.main.bounds.size
}

import SwiftUI

struct Background: View {
    var body: some View {
        ZStack {
            Image("background")
                .blur(radius: 15)
            Color.black
                .opacity(0.7)
        }
    }
}

画像1

画像2

画像3

Answer 1

背景画像がないので想像ですが、表示できていないのではなくて、左右にはみ出しているので、見えていないのではないでしょうか。BackgroundのImageが左右にはみ出しているのが原因だと思うので、これを防ぐとよいと思います。

struct Background: View {
    var body: some View {
        ZStack {
            Image("background")
                .resizable(capInsets: EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0), resizingMode: .stretch)
                .blur(radius: 15)
            Color.black
                .opacity(0.7)
        }
    }
}

また、しっかりみてなくて恐縮ですが、TextBackgroundViewは、GeometryReaderの使い方に問題があるような気がします。ご要望の画面を作るなら、背景にビューをおくのではなくて、もっと単純に背景色とボーダーの指定で実現できると思います。こんな感じでどうでしょうか。

struct TestView: View {
    @ObservedObject var viewModel = ScoreViewModel()
    var body: some View {
        ZStack {

            Background()

            VStack {

                Spacer()

                VStack {
                    HStack {
                        Image("line")
                            .resizable()
                            .frame(width: 25, height: 25)
                        Text("LINE")
                            .foregroundColor(.gray)
                        Spacer()
                        Text("now")
                            .foregroundColor(.gray)
                            .font(.system(size: 15))
                    }
                    Text("score: (viewModel.score)")
                        .lineLimit(10)
                }
                .padding()
                .background(Color(white: 0.95))
                .border(Color.blue, width: 1)
                .frame(minWidth: UIScreen.main.bounds.width - 4, alignment: .center)

                Spacer()
            }
            
        }
    }
}