How to Clear a Textfield with a Button (Swift UI)

Question

I am trying out to implement a Mailview like I've seen in a tutorial before. After solving the layout, I tried to get some features on it.

If I begin to write a new message, I want to clear the filled Textfield boxes, when the user clicks the trash bin. But however I don't find out how to clear it.

import SwiftUI

var inboundMails  = [[String()]]
var outboundMails  = [[String()]]


struct ContentView: View {
    
    @State var showComposeMessageView: Bool = false
    
    var body: some View {
        
        TabView
        {
            NavigationView
            {
                List (0 ..< 6)
                {
                    _ in
                    NavigationLink(destination: Text("Nachrichtentext"))
                    {
                        SingleMessageView()
                    }
                }
                .listStyle(GroupedListStyle())
                .navigationTitle("Inbox")
                .navigationBarItems(trailing:
                                        Button(action: { showComposeMessageView.toggle() }, label: {
                                            Image(systemName: "square.and.pencil")
                                        })
                )
            }
            // Verfassen Button
            .sheet(isPresented: $showComposeMessageView, content:
                    {
                        NewMessage()
                    }) //.sheet
            .tabItem {
                Image(systemName: "envelope.fill")
                Text("Inbox")
            }
            Text("Sent")
                .tabItem {
                    Text("Sent")
                    Image(systemName: "paperplane.fill")
                }
        }
    }
    
}

// Design eines einzelnen Nachrichtenblocks
struct SingleMessageView: View {
    var body: some View {
        
        HStack
        {
            Image(systemName: "person.circle.fill")
                .resizable()
                .frame(width: 40, height: 40, alignment: .center)
                .foregroundColor(.gray)
            
            VStack(alignment: .leading)
            {
                HStack
                {
                    Text("Absender")
                        .font(.headline)
                    Spacer()
                    Text("01-07-2020")
                        .font(.subheadline.monospacedDigit())
                        .foregroundColor(.secondary)
                }
                
            Text("Betreff")
                .font(.subheadline)
                .lineLimit(2)
            }
        }
    }
}

//Neue Nachricht verfassen
struct NewMessage: View {
    @State var messageText = ""
    @State var betreff = ""
    @State var cc = ""
    @State var empfaenger = ""
    @State var sendButton: Bool = false
    
    var body: some View {
        ZStack
        {
            Color.white
            Spacer()
            VStack(alignment: .leading)
            {
                // Kopfzeile
                HStack(alignment: .top)
                {
                    Spacer()
                    Image(systemName: "paperplane.circle")
                        .resizable()
                        .frame(width: 70, height: 70, alignment: .leading)
                   
                    VStack(alignment: .leading)
                    {
                        Text("Empfänger: ")
                        Spacer()
                        Text("Betreff: ")
                        Spacer()
                        Text("CC:")
                    }.frame(height: 70)
                    VStack
                    {
                        TextField("Empfänger", text: $empfaenger).lineLimit(2)
                            .font(.subheadline)
                        Spacer()
                        TextField("Betreff", text: $betreff).lineLimit(2)
                            .font(.subheadline)
                        Spacer()
                        TextField("CC", text: $cc)
                            .font(.subheadline)
                    }.frame(height: 70)
                }
                    .foregroundColor(.black)
                    .background(Color.white)
                    .font(.headline)
                // Knöpfe
                HStack
                {
                    Spacer()
                    
                    // Senden
                    Button(
                        action: { sendButton.toggle()
                            outboundMails =  Mails().MailManager(inbound: false, from_to: empfaenger, cc: cc, subject: betreff, message: messageText, mailarray: outboundMails)},
                        label: {Image(systemName: "paperplane")})
                            .frame(width: 20, height: 20, alignment: .leading)
                    Spacer()
                    // Farbe bearbeiten
                    Button(
                        action: { sendButton.toggle() },
                        label: {Image(systemName: "pencil")})
                            .frame(width: 20, height: 20, alignment: .leading)
                    Spacer()
                    
                    // Anlage hinzufügen
                    Button(
                        action: { sendButton.toggle() },
                        label: {Image(systemName: "doc")})
                            .frame(width: 20, height: 20, alignment: .leading)
                    Spacer()
                    
                    // Verwerfen
                    Button(
                        action: { sendButton.toggle()
                            messageText = ""
                            cc = ""
                            betreff = ""
                            empfaenger = ""
                        },
                        label: {Image(systemName: "trash")})
                            .frame(width: 20, height: 20, alignment: .leading)
                    Spacer()
                }.frame(height: 30, alignment: .top)
                
                // NachichtentextFeld
                TextEditor(text: $messageText)
                    .frame(width: 411, height: 400, alignment: .top)
                    .border(Color.gray)
                Spacer()
            }
        }
    }
}

// Design eines einzelnen Nachrichtenblocks
struct SendMessageView: View {
    var body: some View {
        HStack
        {
            Image(systemName: "person.circle.fill")
                .resizable()
                .frame(width: 40, height: 40, alignment: .center)
                .foregroundColor(.gray)
            
            VStack(alignment: .leading)
            {
                HStack
                {
                    Text("Absender")
                        .font(.headline)
                    Spacer()
                    Text("01-07-2020")
                        .font(.subheadline.monospacedDigit())
                        .foregroundColor(.secondary)
                }
                
            Text("Betreff")
                .font(.subheadline)
                .lineLimit(2)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
} ```


Thanks in advance for your help!

hi, interesting, perhaps this might be of interest https://stackoverflow.com/questions/320078/adding-the-clear-button-to-an-iphone-uitextfield — jspcal, Jul 05 '21 at 22:38
Simply set the text property for that text field to be an empty string. — SeaSpell, Jul 05 '21 at 22:41
The code does that. In fact, it looks fine as is and it works for me in a the SwiftUI preview. — Eric Shieh, Jul 05 '21 at 23:53
@Seaspell Can you explain this a Bit More? I Ding know Home the set the value of this Field to nil or empty String. I only can change the stored variables but it doesnt clear the Texfields on view — Benhuen, Jul 07 '21 at 00:10
@Eric Shieh of I press the bin Button, Alls Fields should Clearstream. It dont do this in my Simulation :/ — Benhuen, Jul 07 '21 at 00:10
@jspcal i Ding want the x Button in every Field. I wann to hörst every Field with only one button — Benhuen, Jul 07 '21 at 00:11
@Benhuen I copy-pasted your code, commented out one line (outboundMails = ...) and ran it in Live Preview. Created a new mail, filled in all fields, and then pressed trash. All fields cleared. I am running Xcode 12.5 in an iOS 14.5 deployment project. — Eric Shieh, Jul 07 '21 at 03:28
@Eric Shieh okay thats suspicious I‘ll Check it out later again. Thanks in advance! — Benhuen, Jul 07 '21 at 15:18
@Eric Shieh By the way did you too have the Problem, that the first field run out of window, when you opening Keyboard ? — Benhuen, Jul 07 '21 at 15:19
@Eric Shieh Thank you Bro, it worked fine! Idk why I don't got it before. — Benhuen, Jul 08 '21 at 11:49

How to Clear a Textfield with a Button (Swift UI)

0 Answers0