CalebThePerson
CalebThePerson

Reputation: 117

SwiftUI: Can I remove the white background behind this button?

*I created this view and I have it appearing as a sheet when a button is tapped within the main view of my app. I was wondering if there was a way to remove the white background behind the search button at the bottom? Sorry if this isn't enough information to go off of, let me know and I'll add more

import SwiftUI
struct AddDoujin: View {
//variables
    
    var body: some View {
        GeometryReader{ geo in
            ZStack {
                VStack{
                    HStack{
                        Form {
                            Text("Enter The Sauce:")
                                TextField("Enter the Sauce Degen", text:$InputDoujin, onCommit: {
                                    UIApplication.shared.keyWindow?.endEditing(true)
                                })
                                .keyboardType(.numberPad)
                            //Code
                    }
                    //The button checks if it needs to be redone or not
                    //If it doesnt it closes the sheet while also calling the api
                    ZStack{
                        Button(action: {
                             //Action
                            }
                            
                        }){
                            ZStack {
                                Circle()
                                    .foregroundColor(Color("DarkPurple"))
                                    .frame(width: 80, height: 80)
                                
                                Text("Search")
                            }
                            
                        }
                    }
                }
                
                
                .buttonStyle(PlainButtonStyle())
            }
        }
        
    }
}
struct AddDoujin_Previews: PreviewProvider {
    static var previews: some View {
        AddDoujin(DoujinApi: DoujinAPI(), isPresented: .constant(false))
    }
}

enter image description here

Upvotes: 1

Views: 1185

Answers (1)

jnpdx
jnpdx

Reputation: 52312

One solution is to have the ZStack which you are already using and then push the button down the the bottom using either an alignment or VStack with a Spacer -- I've done the latter.

This way, you keep the background color of the table view, but still get the button placement where you want it. Note that this does have the side effect of the button now floating above the form view. So, if your form got significantly longer, it might not be ideal as the button could cover up form elements. But, for you example case, it functions well:

struct AddDoujin: View {
    //variables
    
    var body: some View {
        ZStack {
            Form {
                Text("Enter The Sauce:")
                TextField("Enter the Sauce Degen", text:.constant("test"), onCommit: {
                    UIApplication.shared.keyWindow?.endEditing(true)
                })
                .keyboardType(.numberPad)
            }
            
            VStack {
                Spacer()
                Button(action: {
                    //Action
                }) {
                    ZStack {
                        Circle()
                            .foregroundColor(Color.red)
                            .frame(width: 80, height: 80)
                        
                        Text("Search")
                    }
                    
                }.buttonStyle(PlainButtonStyle())
            }
        }
        
    }
}

Upvotes: 2

Related Questions