Question 67046 in IOS Swift Question posted in
The official documentation can be found here.

How to make SwiftUI Form translucent? – Ios swift

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)
        }
}

enter image description here

Tags:

2

Answers


  1. 0

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

    Form {
  /...
}
.opacity(0.5).  // 0 = fully translucent ... 1 = opaque
    Login or Signup to reply.
  2. 0

    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:

    screenshot

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search