Project
Based on the current "We Split" app, make changes:
- Add a header to the third section, saying “Amount per person”
- Add another section showing the total amount for the check – i.e., the original amount plus tip value, without dividing by the number of people.
- Change the tip percentage picker to show a new screen rather than using a segmented control, and give it a wider range of options – everything from 0% to 100%. Tip: use the range 0..<101 for your range rather than a fixed array.
import SwiftUI struct ContentView: View { @State private var checkAmount:Double = 0 @State private var numOfPeopleIndex:Int = 0 @State private var tipsPercent:Int = 10 @FocusState private var isFocused: Bool private let minPeopleCount = 2 private let tipsPercentList: [Int] = Array(0...100) var total : Double { checkAmount * (1.0 + Double(tipsPercent) / 100.0) } var amountPerPerson: Double { total / Double(numOfPeopleIndex + minPeopleCount) } var body: some View { NavigationStack { Form { Section{ TextField("Amount", value: $checkAmount, format: .currency(code: Locale.current.currency?.identifier ?? "USD")) .keyboardType(.numberPad) .focused($isFocused) Picker("Number of people", selection: $numOfPeopleIndex) { ForEach(2..<20) { Text("\($0) People") } } .pickerStyle(.navigationLink) } Section("Tip") { Picker("Tip Percentage", selection: $tipsPercent) { ForEach(tipsPercentList, id: \.self) { Text($0, format: .percent) } } .pickerStyle(.navigationLink) } Section("Total") { Text(total, format: .currency(code: Locale.current.currency?.identifier ?? "USD")) } Section("Amount per person") { Text(amountPerPerson, format: .currency(code: Locale.current.currency?.identifier ?? "USD")) } } .navigationTitle("We Split") .toolbar { if isFocused { Button("Done") { isFocused = false } } } } } } Result:
Top comments (0)