CODEWITHSUNDEEP
swiftswiftui
Chris
Chris

Reputation: 431

How can I add a button in SwiftUI

How can I add a button at this location in SwiftUI? I have a textfield and a background being used, but I'm not sure how you can add a button to this location, like a bar button in swift.

My code:

struct MyTextField: View
{
    @ObservedObject var model: TextFieldModel

    var body: some View
    {
    
    VStack(spacing: 0)
    {
        Color.black
            .frame(height: 100)
            .overlay(Image(("appIconLogo")).resizable().frame(width: 70, height: 70), 
            alignment: .bottom)
            .edgesIgnoringSafeArea(.top)
           
        VStack(alignment: .leading, spacing: 10)
        {
            Text("Welcome!")
                .font(.system(size: 60, design: .rounded))
                .foregroundColor(.black)
                .padding(.leading)
                
            iTextField("Search Your Ticker", text: $model.text, isEditing: $model.isEditing)
                .foregroundColor(.black)
                .showsClearButton(true)
                .autocapitalization(.allCharacters)
                .disableAutocorrection(true)
                .returnKeyType(.search)
                .onReturn
                {
                    print($model.text)
                    NotificationCenter.default.post(name: Notification.Name(rawValue: "isValidTicker"), object: nil)
                    
                }
                .foregroundColor(.black)
                .style(height: 58, font: nil, paddingLeading: 25, cornerRadius: 6, hasShadow: true, image: Image(systemName: "magnifyingglass"))
                .foregroundColor(.black)
        }.frame(maxWidth: .infinity, alignment: .leading)
    
    
    }.frame(maxHeight: .infinity, alignment: .top)
    
    

    
  }
 }

enter image description here

Upvotes: 0

Views: 93

Answers (2)

SeanForReal
SeanForReal

Reputation: 141

Any particular reason you have the Color.black with an overlay for the logo? Using your code, wrapping it in a ZStack should work

ZStack(alignment: .leading) {
Color.black
   .frame(height: 100)
   .overlay(Image(("appIconLogo")).resizable().frame(width: 70, height: 70), alignment: .bottom)
   .edgesIgnoringSafeArea(.top)

Button(action:{}) {
   Text("Button Text")
}
}

Upvotes: 0

Asperi
Asperi

Reputation: 258443

I assume you wanted something like this

Color.black
    .frame(height: 100)
    .overlay(Image(("appIconLogo")).resizable().frame(width: 70, height: 70), alignment: .bottom)
    .overlay(Button("Perform") {}.padding(), alignment: .leading) // << here!!
    .edgesIgnoringSafeArea(.top)

Upvotes: 1

Related Questions