Swiftui DatePicker events - swift

I have a DatePicker such as:
DatePicker("DATE & TIME", selection: Binding(get: {
self.dateTime
}, set: { newValue in
self.dateTime = newValue
if newValue > Date() {
sendDateTimeToServer()
}
}), displayedComponents: [.date, .hourAndMinute])
As opposed to calling sendDateTimeToServer() every time dateTime changes I want to wait until the fullscreen (2nd image) DatePicker has collapsed, is there an event? Open to other suggestions too!
Thanks,

Update Property observers didSet gives a chance do some work when the popover is dismissed. Try this:
struct UpdateOnDismissView: View {
#EnvironmentObject var context : LaunchContext
var body: some View {
VStack {
Text("\(context.launch)").padding()
Button("Set Launch Date", action: { context.show.toggle() })
.padding()
.popover(isPresented: $context.show, content: { panel })
}
}
var panel : some View {
VStack {
Button("Done", action: { context.show.toggle() })
DatePicker("Launch", selection: Binding(get: {
context.launch
}, set: { newValue in
context.launch = newValue
}), displayedComponents: [.date, .hourAndMinute])
}
.padding()
.onDisappear(perform: {
print("Popover disappearing")
})
}
}
struct UpdateOnDismissView_Previews: PreviewProvider {
static var previews: some View {
UpdateOnDismissView().environmentObject(LaunchContext())
}
}
class LaunchContext : ObservableObject {
#Published var launch : Date = Date()
#Published var show : Bool = false { didSet {
if !show && launch < Date() {
sendLaunchToServer()
} else {
print("Dismissed")
}
}}
func sendLaunchToServer() {
print("Sending date \(launch)")
}
}
When should you use property observers?

Related

SwiftUI Conditionally trigger a toggle

I want the user can only click the toggle under some specific condition. So I reverse the value of "AutocorrectStatus" again under .onChange method. But it seems like the view doesn't follow this change. It still becomes on from off even the value of AutocorrectStatus is false. What should I do?
class GlobalEnvironment: ObservableObject {
#Published var AutocorrectStatus = false
}
struct SettingView: View {
#EnvironmentObject var env: GlobalEnvironment
HStack() {
Toggle("", isOn: self.$env.AutocorrectStatus)
.labelsHidden()
.onChange(of: self.env.AutocorrectStatus) { _AutocorrectStatus in
self.env.AutocorrectStatus = !self.env.AutocorrectStatus
}
if self.env.AutocorrectStatus {
Text ("ON")
.font(.system(size: 26, weight: .semibold))
.frame(alignment: .topLeading)
} else {
Text ("OFF")
.font(.system(size: 26, weight: .semibold))
.frame(alignment: .topLeading)
}
}
}
There are several ways to do this. One way is to provide the toggle a Binding that performs the necessary checks before updating the value.
var body: some View {
HStack {
Toggle("", isOn: self.provideAutocorrectBinding())
}
}
func provideAutocorrectBinding() -> Binding<Bool> {
return Binding(get: {
return self.env.AutocorrectStatus
}, set: { newValue in
let isConnected = false // Your logic to check the connection
if isConnected {
self.env.AutocorrectStatus = newValue
}
})
}
You can trigger the alert there as well:
struct ContentView: View {
#EnvironmentObject var env: GlobalEnvironment
#State private var showingAlert = false
var body: some View {
HStack {
Toggle("", isOn: self.provideAutocorrectBinding())
}
.alert("Your message.", isPresented: $showingAlert) {
Button("OK", role: .cancel) { }
}
}
func provideAutocorrectBinding() -> Binding<Bool> {
return Binding(get: {
return self.env.AutocorrectStatus
}, set: { newValue in
let isConnected = false // Your logic to check the connection
if isConnected {
self.env.AutocorrectStatus = newValue
} else {
self.showingAlert.toggle()
}
})
}
}

How to create fully customizable sections with Binding text?

First of all, sorry for the title which is not precise at all, but I didn't know how else I could title this question. So:
1. What I want to achieve:
I want to create an interface where the user can add sections to input different fields, which are fully customizable by the user himself.
2. What I have done so far
I was able to create the interface, I can add new sections easily (structured with a "Section Name" on top and a TextField below) and they are customizable, but only in the TextField. They are also deletable, even though I had to do a complicated workaround since the Binding text of the TextField caused the app to crash because the index at which I was trying to remove the item resulted as "out of range". It's not the perfect workaround, but it works, and for now this is the most important thing. When I'll save these sections, I'll save them as an array of Dictionaries where every Dictionary has the section name and its value. However, there's still a few things I wasn't able to do:
3. What I haven't done yet
There are still 3 things that I couldn't do yet.
First of all, I'd like for the name of the section to be editable.
Secondly, I'd like to have the sections that the user adds displayed inside a Form and divided by Sections. As header, I'd like to have each different section name, and grouped inside all the related sections that share the same name.
Last but not least, I'd like to allow the user to add multiple TextFields to the same section. I have no idea how to handle this or even if it's possible.
4. Code:
ContentView:
import SwiftUI
struct ContentView: View {
#State var editSections = false
#State var arraySections : [SectionModel] = [SectionModel(name: "Prova", value: ""), SectionModel(name: "Prova 2", value: ""), SectionModel(name: "Prova", value: "")]
#State var showProgressView = false
#State var arraySectionsForDeleting = [SectionModel]()
#State var openSheetAdditionalSections = false
var body: some View {
Form {
if showProgressView == false {
if editSections == false {
ForEach(arraySections, id: \.id) { sect in
Section(header: Text(sect.name)) {
ForEach(arraySections, id: \.id) { sez in
if sez.name == sect.name {
SectionView(section: sez)
}
}
}
}
} else {
forEachViewSectionsForDeleting
}
if arraySections.count > 0 {
buttoneditSections
}
} else {
loadingView
}
Section {
addSections
}
}
.sheet(isPresented: $openSheetAdditionalSections, content: {
AdditionalSectionsSheet(closeSheet: $openSheetAdditionalSections, contView: self)
})
}
var forEachViewSectionsForDeleting : some View {
Section {
ForEach(arraySections, id: \.id) { sez in
HStack {
Text("\(sez.name) - \(sez.value)")
.foregroundColor(.black)
Spacer()
Button(action: {
showProgressView = true
let idx = arraySections.firstIndex(where: { $0.id == sez.id })
arraySectionsForDeleting.remove(at: idx!)
arraySections = []
arraySections = arraySectionsForDeleting
showProgressView = false
}, label: {
Image(systemName: "minus.circle")
.foregroundColor(.yellow)
}).buttonStyle(BorderlessButtonStyle())
}
}
}
}
var buttoneditSections : some View {
Button(action: {
editSections.toggle()
}, label: {
Text(editSections == true ? "Done" : "Edit Sections")
.foregroundColor(.yellow)
})
}
var forEachviewSezioniNonModifica : some View {
Section {
ForEach(arraySections, id: \.id) { sez in
Text(sez.name)
.foregroundColor(.black)
Text(sez.value)
.foregroundColor(.black)
}
}
}
var addSections : some View {
Button(action: {
openSheetAdditionalSections = true
}, label: {
HStack {
Text("Add sections")
.foregroundColor(.yellow)
Spacer()
Image(systemName: "plus.circle")
.foregroundColor(.yellow)
}
})
}
var loadingView : some View {
Section {
HStack {
Spacer()
ProgressView()
.progressViewStyle(CircularProgressViewStyle(tint: .black))
Spacer()
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
AddSectionSheet and SectionView:
import SwiftUI
struct AdditionalSectionsSheet: View {
#Binding var closeSheet : Bool
#Environment(\.colorScheme) var colorScheme
var contView : ContentView
#Environment(\.presentationMode) var mode: Binding<PresentationMode>
#GestureState private var dragOffset = CGSize.zero
var body: some View {
NavigationView {
Form {
buttonPhone
buttonUrl
buttonEmail
buttonAddress
}
.navigationBarTitle(Text("Add section"), displayMode: .inline)
.navigationBarBackButtonHidden(true)
.navigationBarItems(trailing: Button(action : {
closeSheet = false
}){
Text("Close")
.foregroundColor(.yellow)
})
}
}
var buttonPhone : some View {
Button(action: {
contView.editSections = false
contView.arraySections.append(SectionModel(name: "Phone", value: ""))
contView.showProgressView = true
closeSheet = false
}, label: {
HStack {
Text("Phone")
.foregroundColor(.black)
Spacer()
}
})
}
var buttonUrl : some View {
Button(action: {
contView.editSections = false
contView.arraySections.append(SectionModel(name: "URL", value: ""))
closeSheet = false
}, label: {
HStack {
Text("URL")
.foregroundColor(.black)
Spacer()
}
})
}
var buttonAddress : some View {
Button(action: {
contView.editSections = false
contView.arraySections.append(SectionModel(name: "Address", value: ""))
contView.showProgressView = true
closeSheet = false
}, label: {
HStack {
Text("Address")
.foregroundColor(.black)
Spacer()
}
})
}
var buttonEmail : some View {
Button(action: {
contView.editSections = false
contView.arraySections.append(SectionModel(name: "Email", value: ""))
contView.showProgressView = true
closeSheet = false
}, label: {
HStack {
Text("Email")
.foregroundColor(.black)
Spacer()
}
})
}
}
struct SectionView : View {
#Environment(\.colorScheme) var colorScheme
#ObservedObject var section : SectionModel
var body : some View {
Section {
Text(section.name)
.foregroundColor(.black)
TextField(section.name, text: self.$section.value)
.foregroundColor(.black)
}
}
}
SectionModel:
import SwiftUI
import Combine
class SectionModel : Codable, Identifiable, Equatable, ObservableObject, Comparable {
var id = UUID()
var name : String
var value : String
init(name: String, value: String) {
self.name = name
self.value = value
}
static func == (lhs: SectionModel, rhs: SectionModel) -> Bool {
true
}
static func < (lhs: SectionModel, rhs: SectionModel) -> Bool {
true
}
}
I hope I wrote things clear enough to be understood, thanks to everyone who will help!

SwiftUI Animation on property change?

I want to animate the appearance of an item in a list. The list looks like this:
Text("Jim")
Text("Jonas")
TextField("New Player")
TextField("New Player") //should be animated when appearing (not shown until a name is typed in the first "New Player")
The last TextField should be hidden until newPersonName.count > 0 and then appear with an animation.
This is the code:
struct V_NewSession: View {
#State var newPersonName: String = ""
#State var participants: [String] = [
"Jim",
"Jonas"
]
var body: some View {
VStack(alignment: .leading) {
ForEach(0...self.participants.count + 1, id: \.self) { i in
// Without this if statement, the animation works
// but the Textfield shouldn't be shown until a name is typed
if (!(self.newPersonName.count == 0 && i == self.participants.count + 1)) {
HStack {
if(i < self.participants.count) {
Text(self.participants[i])
} else {
TextField("New Player",
text: $newPersonName,
onEditingChanged: { focused in
if (self.newPersonName.count == 0) {
if (!focused) {
handleNewPlayerEntry()
}
}
})
}
}
}
}
.transition(.scale)
Spacer()
}
}
func handleNewPlayerEntry() {
if(newPersonName.count > 0) {
withAnimation(.spring()) {
participants.append(newPersonName)
newPersonName = ""
}
}
}
}
I know withAnimation(...) only applies to participants.append(newPersonName), but how can I get the animation to work on the property change in the if-statement?
if ((!(self.newPersonName.count == 0 && i == self.participants.count + 1)).animation()) doesn't work.
Your example code won't compile for me, but here's a trivial example of using Combine inside a ViewModel to control whether a second TextField appears based on a condition:
import SwiftUI
import Combine
class ViewModel : ObservableObject {
#Published var textFieldValue1 = ""
#Published var textFieldValue2 = "Second field"
#Published var showTextField2 = false
private var cancellable : AnyCancellable?
init() {
cancellable = $textFieldValue1.sink { value in
withAnimation {
self.showTextField2 = !value.isEmpty
}
}
}
}
struct ContentView: View {
#StateObject var viewModel = ViewModel()
var body: some View {
VStack {
TextField("", text: $viewModel.textFieldValue1)
.textFieldStyle(RoundedBorderTextFieldStyle())
if viewModel.showTextField2 {
TextField("", text: $viewModel.textFieldValue2)
.textFieldStyle(RoundedBorderTextFieldStyle())
.transition(.scale)
}
}
}
}
Is that approaching what you're attempting to build ?
struct ContentView: View {
#State var newPersonName: String = ""
#State var participants: [String] = [
"Jim",
"Jonas"
]
#State var editingNewPlayer = false
var body: some View {
VStack(alignment: .leading, spacing: 16) {
ForEach(participants, id: \.self) { participant in
Text(participant)
.padding(.trailing)
Divider()
}
Button(action: handleNewPlayerEntry, label: {
TextField("New Player", text: $newPersonName, onEditingChanged: { edit in
editingNewPlayer = edit
}, onCommit: handleNewPlayerEntry)
})
if editingNewPlayer {
Button(action: handleNewPlayerEntry, label: {
TextField("New Player", text: $newPersonName) { edit in
editingNewPlayer = false
}
})
}
}
.padding(.leading)
.frame(maxHeight: .infinity, alignment: .top)
.transition(.opacity)
.animation(.easeIn)
}
func handleNewPlayerEntry() {
if newPersonName.count > 0 {
withAnimation(.spring()) {
participants.append(newPersonName)
newPersonName = ""
editingNewPlayer = false
}
}
}
}

Why do I lose Data here?(SwiftUI)

I have two pages in my app TodayPage and CalendarList page.
I use EnvironmentObject wrapper to pass data between these two pages.
When TodayPage appears on onAppear modifier I call a function to generate days of calendar for me till now everything works fine when I add text to the list of TodayPage then go to the calendarList page and come back again to TodayPage all of the text that I addd to list are gone.I find out I can avoid lost of data by adding simple if to onAppear but I'm not sure this solution is right.
I have to upload lots of code ,Thanks for your help
( DataModel ) :
import SwiftUI
import Foundation
import Combine
struct Day : Identifiable {
var id = UUID()
var name : String
var date : String
var month : String
var List : [Text1?]
}
struct Text1 : Identifiable , Hashable{
var id = UUID()
var name: String
var color: Color
}
class AppState : ObservableObject {
#Published var dataLoaded = false
#Published var allDays : [Day] = [.init(name : "",date: "",month: "",List : [])]
func getDays(number: Int) -> [Day] {
let today = Date()
let formatter = DateFormatter()
return (0..<number).map { index -> Day in
let date = Calendar.current.date(byAdding: .day, value: index, to: today) ?? Date()
return Day(name: date.dayOfWeek(withFormatter: formatter) ?? "", date: "\(Calendar.current.component(.day, from: date))", month: date.nameOfMonth(withFormatter: formatter) ?? "", List: [])
}
}
}
extension Date {
func dayOfWeek(withFormatter dateFormatter: DateFormatter) -> String? {
dateFormatter.dateFormat = "EEEE"
return dateFormatter.string(from: self).capitalized
}
func nameOfMonth(withFormatter dateFormatter: DateFormatter) -> String? {
dateFormatter.dateFormat = "LLLL"
return dateFormatter.string(from: self).capitalized
}
}
class AddListViewViewModel : ObservableObject {
#Published var textItemsToAdd : [Text1] = [.init(name: "", color: .clear)] //start with one empty item
func saveToAppState(appState: AppState) {
appState.allDays[0].List.append(contentsOf: textItemsToAdd.filter {
!$0.name.isEmpty })
}
func bindingForId(id: UUID) -> Binding<String> {
.init { () -> String in
self.textItemsToAdd.first(where: { $0.id == id })?.name ?? ""
} set: { (newValue) in
self.textItemsToAdd = self.textItemsToAdd.map {
guard $0.id == id else {
return $0
}
return .init(id: id, name: newValue, color: .clear)
}
}
}
}
List view :
struct ListView: View {
#State private var showAddListView = false
#EnvironmentObject var appState : AppState
#Binding var dayList : [Text1?]
var title : String
var body: some View {
NavigationView {
VStack {
ZStack {
List(dayList, id : \.self){ text in
Text(text?.name ?? "")
}
if showAddListView {
AddListView(showAddListView: $showAddListView)
.offset(y:-100)
}
}
}
.navigationTitle(title)
.navigationBarItems(trailing:
Button(action: {showAddListView = true}) {
Image(systemName: "plus")
.font(.title2)
}
)
}
}
}
pop up menu View(for adding text into the list)
struct AddListView: View {
#Binding var showAddListView : Bool
#EnvironmentObject var appState : AppState
#StateObject private var viewModel = AddListViewViewModel()
var body: some View {
ZStack {
Title(addItem: { viewModel.textItemsToAdd.append(.init(name: "", color: .clear)) })
VStack {
ScrollView {
ForEach(viewModel.textItemsToAdd, id: \.id) { item in //note this is id: \.id and not \.self
PreAddTextField(textInTextField: viewModel.bindingForId(id: item.id))
}
}
}
.padding()
.offset(y: 40)
Buttons(showAddListView: $showAddListView, save: {
viewModel.saveToAppState(appState: appState)
})
}
.frame(width: 300, height: 200)
.background(Color.white)
.shadow(color: Color.black.opacity(0.3), radius: 10, x: 0, y: 10)
}
}
struct PreAddTextField: View {
#Binding var textInTextField : String
var body: some View {
VStack {
TextField("Enter text", text: $textInTextField)
}
}
}
struct Buttons: View {
#Binding var showAddListView : Bool
var save : () -> Void
var body: some View {
VStack {
HStack(spacing:100) {
Button(action: {
showAddListView = false}) {
Text("Cancel")
}
Button(action: {
showAddListView = false
save()
}) {
Text("Add")
}
}
}
.offset(y: 70)
}
}
struct Title: View {
var addItem : () -> Void
var body: some View {
VStack {
HStack {
Text("Add Text to list")
.font(.title2)
Spacer()
Button(action: {
addItem()
}) {
Image(systemName: "plus")
.font(.title2)
}
}
.padding()
Spacer()
}
}
}
TodayPage View :
struct TodayPage: View {
#EnvironmentObject var appState : AppState
var body: some View {
ListView(dayList: $appState.allDays[0].List, title: "Today")
.onAppear {
// To avoid data lost , we can use simple if below but I'm not sure it's a right solution
// if appState.dataLoaded == false {
appState.allDays = appState.getDays(number: 365)
// appState.dataLoaded = true
// }
}
}
}
CalendarListPage :
struct CalendarList: View {
#EnvironmentObject var appState : AppState
var body: some View {
NavigationView {
List {
ForEach(appState.allDays.indices, id:\.self) { index in
NavigationLink(destination: ListView(appState: _appState, dayList: $appState.allDays[index].List, title: appState.allDays[index].name).navigationBarTitleDisplayMode(.inline) ) {
HStack(alignment: .top) {
RoundedRectangle(cornerRadius: 23)
.frame(width: 74, height: 74)
.foregroundColor(Color.blue)
.overlay(
VStack {
Text(appState.allDays[index].date)
.font(.system(size: 35, weight: .regular))
.foregroundColor(.white)
Text(appState.allDays[index].month)
.foregroundColor(.white)
}
)
.padding(.trailing ,4)
VStack(alignment: .leading, spacing: 5) {
Text(appState.allDays[index].name)
.font(.system(size: 20, weight: .semibold))
}
}
.padding(.vertical ,6)
}
}
}
.navigationTitle("Calendar")
}.onAppear {
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
and finally TabBar :
struct TabBar: View {
var body: some View {
let appState = AppState()
TabView {
TodayPage().tabItem {
Image(systemName: "info.circle")
Text("Today")
}
CalendarList().tabItem {
Image(systemName: "square.fill.text.grid.1x2")
Text("Calendar")
}
}
.environmentObject(appState)
}
}
Right now, because your let appState is inside the body of TabBar, it gets recreated every time TabBar is rendered. Instead, store it as a #StateObject (or #ObservedObject if you are pre iOS 14):
struct TabBar: View {
#StateObject var appState = AppState()
var body: some View {
TabView {
TodayPage().tabItem {
Image(systemName: "info.circle")
Text("Today")
}
CalendarList().tabItem {
Image(systemName: "square.fill.text.grid.1x2")
Text("Calendar")
}
}
.onAppear {
appState.allDays = appState.getDays(number: 365)
}
.environmentObject(appState)
}
}
Then, remove your other onAppear on TodayPage

Navigation Bar Buttons sometimes are not tappable

I have FavoritesView set with a navigationBarItem Button to display SettingsView as a modal sheet. However, both this button, and the Done button in the sheet only register and respond to some taps. I can't see any pattern to when the buttons will respond, but sometimes it can take 4 or 5 taps before the app responds! Any way to fix this behaviour?
FavoritesView:
import SwiftUI
enum ActiveSheet {
case details, settings
}
struct FavoritesView: View {
let speakers: [Speaker] = Bundle.main.decode("SpeakerTestData.json")
#State private var selectedModel: Speaker?
#State private var showingSheet = false
#State private var activeSheet: ActiveSheet = .settings
#EnvironmentObject var favorites: Favorites
#EnvironmentObject var settings: UserSettings
var filteredFavorites: [Speaker] {
let allSpeakers = speakers
var filteredItems: [Speaker] = []
for entry in allSpeakers {
if favorites.contains(entry) {
filteredItems.append(entry)
}
}
let sorted = filteredItems.sorted {
$0.model.localizedStandardCompare($1.model) == .orderedAscending
}
return sorted
}
var body: some View {
NavigationView {
List {
if filteredFavorites.count == 0 {
Text("Items you favourite will appear here.")
.foregroundColor(.secondary).padding(5)
} else {
Section(header: Text("Speakers")) {
ForEach(filteredFavorites) { speaker in
HStack {
Button(action: {
self.activeSheet = .details
self.selectedModel = speaker
self.showingSheet = true
}) {
SpeakerModelRow(speaker: speaker).contentShape(Rectangle())
}
.buttonStyle(PlainButtonStyle())
Spacer()
Button(action: {
if self.favorites.contains(speaker) {
self.favorites.remove(speaker)
} else {
self.favorites.add(speaker)
}
}, label: {
if self.favorites.contains(speaker) {
Image(systemName: "star.fill")
.foregroundColor(.blue)
.font(Font.title.weight(.ultraLight))
} else {
Image(systemName: "star")
.foregroundColor(.gray)
.font(Font.title.weight(.ultraLight))
}
}
).padding(5)
}
}
}
}
}
.navigationBarTitle("Favourites")
.navigationBarItems(trailing:
Button(action: {
self.activeSheet = .settings
self.showingSheet = true
}){
Image(systemName: "gear").font(Font.title.weight(.ultraLight)).padding(.trailing, 5).foregroundColor(.primary)
})
.sheet(isPresented: self.$showingSheet) {
if self.activeSheet == .details {
SpeakerDetailView(speaker: self.selectedModel!, showSheet: self.$showingSheet).environmentObject(self.favorites).environmentObject(self.settings)
} else {
SettingsView(showSheet: self.$showingSheet).environmentObject(self.settings)
}
}
}
}
}
SettingsView presented as a sheet:
struct SettingsView: View {
#EnvironmentObject var settings: UserSettings
#Binding var showSheet: Bool
#State var result: Result<MFMailComposeResult, Error>? = nil
#State var isShowingMailView = false
var body: some View {
NavigationView {
VStack {
//SettingsView Window
}.navigationBarTitle("Settings")
.navigationBarItems(leading: Button("Done") {
self.showSheet = false
})
}
}
}
It is known issue, try to use internal button content padding (either default or more), like
.navigationBarItems(leading: Button(action: {
self.showSheet = false
}) { Text("Done").padding() }