Hi all!

Really enjoyed the WeSplit tutorials. My toolbar came out like this, however:

Here's the code:

struct ContentView: View {
    @State private var billAmount = 0.0
    @State private var noOfPeople = 2
    @State private var tipPercentage = 20
    @FocusState private var amountIsFocused: Bool // Swift knows when this var has focus

    let tipPercentages = [0, 10, 15, 20, 25]

    var totalPerPerson: Double {
        let peopleCount = Double(noOfPeople + 2) // in the picker, '2 people' is the 0th option...
        let tipSelection = Double(tipPercentage) // we need all our numbers to be doubles
        let amountPerPerson = (billAmount + (tipSelection / 100 * billAmount)) / peopleCount

        return amountPerPerson
    }

    var body: some View {
        NavigationView {
            Form {
                Section {
                    TextField("Amount", value: $billAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
                        .keyboardType(.decimalPad)
                        .focused($amountIsFocused) // the text field sets the FocusState var

                    Picker("Number of people:", selection: $noOfPeople) {
                        ForEach(2..<50) {
                            Text("\($0) people") // the picker won't be selectable unless this form is in a navigation view
                        }
                    }
                }

                Section {
                    Picker("Tip percentage", selection: $tipPercentage) {
                        ForEach(tipPercentages, id: \.self) {
                            Text($0, format: .percent)
                        }
                    }
                    .pickerStyle(.segmented) // a nice style showing all options
                } header: {                  // adds a little header to the section
                    Text("How much tip?")
                }

                Section {
                    Text(totalPerPerson, format: .currency(code: Locale.current.currencyCode ?? "USD"))
                } header: {
                    Text("Total per person:")
                }
                .navigationTitle("WeSplit") // the FORM has this title, not the Nav view
                .toolbar {                    // a toolbar for this whole form
                    ToolbarItemGroup(placement: .keyboard) {  // toolbar above keyboard
                        Spacer()              // add whitespace first

                        Button("Done") {      // the toolbar has a button labelled done
                            amountIsFocused = false  // pressing 'done' removes focus
                        }
                    }
                }
            }
        }
    }
}

Why have I got 'Done' on the left AND 'DONE' on the right? (both work, fyi)

Your .navigationTitle and .toolbar modifiers are at the wrong level. They are on the Section and should be on the Form.

Move them one level out, so that they are after the closing brace on Form.

Form {
…
}
.navigationTitle("WeSplit") // the FORM has this title, not the Nav view
.toolbar {                    // a toolbar for this whole form
    ToolbarItemGroup(placement: .keyboard) {  // toolbar above keyboard
        Spacer()              // add whitespace first

        Button("Done") {      // the toolbar has a button labelled done
            amountIsFocused = false  // pressing 'done' removes focus
        }
    }
}

thanks so much! i had a feeling it was something simple but it was late at night and i was struggling to think logically!

there are a whole lot of levels in the code. other than the code highlighting in xcode showing the opening brace when the cursor is at the closing brace, does anyone have any tips for how to quickly recognise what level you are typing on? Vertical lines or something? I've been using Nova as a text editor, and it does this nicely. Or should i just get used to it, lol 😉