How to make SwiftUI Form translucent?-CodePudding

I am trying to make the SwiftUI Form translucent. I've tried applying .background(.thinMaterial) modifier to the Form. However, this changes the look of the scroll view background. I'd like to apply translucency to the area that is white in the picture I attached.

Is there a way to do it? I am developing for iOS 16.

var body: some View {
        NavigationStack(path: $path) {
            ZStack {
                LinearGradient(gradient: Gradient(colors: [.pink, .yellow]),
                               startPoint: .topTrailing,
                               endPoint: .bottomLeading)
                .edgesIgnoringSafeArea(.all)

                Form {
                    VStack {
                        ...
                    }
                }.scrollContentBackground(.hidden)
        }
}

CodePudding user response：

Change the form's opacity to bleed through the background colour/image:

Form {
  /...
}
.opacity(0.5).  // 0 = fully translucent ... 1 = opaque

CodePudding user response：

It seems Form is just a List under the hood. So by applying .scrollContentBackground(.hidden) you are clearing the List background.

By using .background on Form you are setting the background for the entire List again. To set the background only on the implicit Section you need another modifier. .listRowBackground.

But listRowBackground has this signature:

func listRowBackground<V>(_ view: V?) -> some View where V : View

So you can´t use .thinMaterial. But you can add a new background to the VStack.

A possible solution would be:

var body: some View {
    NavigationStack(path: $path) {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [.pink, .yellow]),
                           startPoint: .topTrailing,
                           endPoint: .bottomLeading)
            .edgesIgnoringSafeArea(.all)

            Form {
                VStack {
                    TextField("", text: $text)
                    Button("test"){
                        
                    }
                    .buttonStyle(.borderedProminent)
                    Button("test"){
                        
                    }.buttonStyle(.borderedProminent)
                }
                // this will clear the background
                .listRowBackground(Color.clear)
                // add some padding around the VStack
                    .padding()
                // apply a new background
                    .background(.ultraThinMaterial)
                // make the edges round again
                    .mask {
                        RoundedRectangle(cornerRadius: 20)
                    }
                        
            }
            .scrollContentBackground(.hidden)
        }
    }
}

Result: