How to achieve ios blur background with roundedrectangle()?

Question

I have this code:

import SwiftUI
 struct MyBackGround: View {
    var body: some View {
        ZStack() {
            Color.pink.ignoresSafeArea()
            RoundedRectangle(cornerRadius: 20).background(Color.white.opacity(0.5))
                .frame(width: 220, height: 100)
        }
    }
}

And this image:

I want to achieve the similar look of iOS blur background, but it did not work.

Answer 1

You can achieve this with a simpler code. Your code does not work because your RoundedRectangle contains black as its foreground color originally.

import SwiftUI

struct ContentView: View {

var body: some View {
    ZStack {
        Color.pink.ignoresSafeArea(.all)
        RoundedRectangle(cornerRadius: 20)
            .fill(.ultraThinMaterial)
            .frame(width: 200, height: 200)
    }
  }

}