I have the class below to keep the state of the hamburger menu if it is or not displayed
class Menu: ObservableObject {
#Published var isActive: Bool = false
}
I instantiate it in Scene Delegate as such
let contentView = ContentView().environmentObject(Menu())
Then in a simple view i am trying to toggle the isActive bool, however i get the error below
struct Button: View {
#EnvironmentObject var menuState: Menu
var body: some View {
VStack{
Button(action: {
self.menuState.isActive.toggle()
}) {
Text("A")
}
}
}
}
This is the error i get: Cannot invoke initializer for type 'Button' with an argument list of type '(action: #escaping () -> (), #escaping () -> Text)'
The issue is that you named your custom View as Button, which is also the name of the existing SwiftUI button.
Simply rename your struct to something else and your code will compile just fine.
Unrelated to your question, but there's no point in wrapping a single View in a VStack, your body can simply contain the Button.
struct MyButton: View {
#EnvironmentObject var menuState: Menu
var body: some View {
Button(action: {
self.menuState.isActive.toggle()
}) {
Text("A")
}
}
}
You created a custom view named Button which is in conflict with the native SwiftUI Button (because they have the same name).
Rename your Button view and it will be okey I think.
Related
I have (probably) an easy question related to SwiftUI state management.
A have a modal view with a simple list of buttons:
struct ExerciseList: View {
var body: some View {
List {
ForEach(1..<30) { _ in
Button("yoga") {
}
}
}
}
}
The parent view is this one:
struct SelectExerciseView: View {
#State private var showingSheet = false
#State private var exercise = "select exercise"
var body: some View {
Button(exercise) {
showingSheet.toggle()
}
.sheet(isPresented: $showingSheet){
ExerciseList()
}
}
}
How can I do to pass the selected button text from the list to the parent view ?
I'm thinking that I need a Binding variable inside the modal and use that, but not really sure how in this example.
At its most basic, you need the selected exercise in your parent view (SelectExerciseView) as a state variable. You then pass that in to the child view (the modal) via a binding. Assuming exercise as a string holds the variable you want to change:
.sheet(isPresented: $showingSheet) {
ExerciseList(exercise: $exercise)
}
Your modal then needs to have a #Binding reference.
struct ExerciseList: View {
#Binding var exercise: Exercise
var body: some View {
List {
ForEach(1..<30) { _ in
Button("yoga") {
exercise = "yoga"
}
}
}
}
}
Im not sure what you're asking...
Are you trying to show a "Detail View" from the modal.
Meaning theres the parent view -> Modal View -> Detail View
In your case it would be the SelectExerciseView -> ExerciseListView -> DetailView which shows the text of the button that was pressed on the previous view (can be any view you want)
If thats what you're trying to do I would use a NavigationLink instead of a button on the modal. The destination of the NavigationLink would be the detail view
I am presenting and dismissing a swiftUI view with a button, and it works fine.
The swiftUI view:
struct SmartG_SwiftUI: View {
var dismissAction: (() -> Void)
var body: some View {
Button(action: {
dismissAction()
}) {}
}
}
I am presenting the SwiftUI view controller from UIKit, this way:
let hostingVC = UIHostingVC(rootView: SmartG_SwiftUI(dismissAction: {
vc?.dismiss( animated: true, completion: nil )
}))
vc?.present(hostingVC, animated: true, completion: nil)
My question is, how could I put this button in a separate struct? So in order to have something like:
struct SmartG_SwiftUI: View {
var dismissAction: (() -> Void)
Header()
}
struct Header: View {
Button(action: {
dismissAction() //unknown here
}) {}
}
Rather than hand-rolling your own dismiss action and passing it in, SwiftUI does have its own dismiss action available via an environment variable. I’ve not yet used it within a hosting controller basis, but conversely haven’t seen any indication that it doesn’t work... (edit: have double-checked and definitely works for a SwiftUI view wrapped in a UIHostingController and presented via UIViewController.present(_:animation:completion:).)
The general approach is:
struct MyView: View {
#Environment(\.dismiss) var dismiss
var body: some View {
Button {
dismiss()
} label: {
Text("Close")
}
}
}
But this doesn’t have to be the topmost view within your hosting controller; because the dismiss action is in the environment, it’ll be available in your Header view as well.
Note that for iOS 13 or 14, the syntax is a little more verbose:
struct MyView: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
Button {
presentationMode.wrappedValue.dismiss()
} label: {
Text("Close")
}
}
}
I am having a strange issue with an #State var not updating an iOS SwiftUI view.
I have an edit screen for themes for a small game with a NavigationView with a list of game themes. When in edit mode and I select one of these themes, I open up an editor view, passing the theme as a binding to the editor view struct.
In my editor view I then have sections that allow the user to edit properties of the theme. I do not want to use bindings to the various theme properties in my edit fields because I do not want the changes to take effect immediately. Instead, I have created #State vars for each of these properties and then use bindings to these in the edit fields. That way, I give the user the option to either cancel without and changes taking effect, or select "Done" to assign the changes back to the theme via the binding.
In order to initialise the #State vars I have an onAppear block that assign the #State vars values from the respective theme properties.
The issue I am having is that when the onAppear block is executed and the vars are assigned, the relevant edit fields are not updating!
Here is a cut-down version of my code:
struct EditorView: View {
/// The current presentation mode of the view.
#Environment(\.presentationMode) var presentationMode
#Binding var theme: GameTheme
#State private var name = ""
...
var body: some View {
NavigationView {
Form {
nameSection
...
}
.navigationTitle("Edit \(theme.name)")
.toolbar {
ToolbarItem(placement: .cancellationAction) {
Button("Cancel", action: cancel)
}
ToolbarItem(placement: .confirmationAction) {
Button("Done", action: saveTheme)
.disabled(!canSaveTheme)
}
}
.onAppear {
name = theme.name
...
}
}
.frame(minWidth: Constants.minViewSize.width, minHeight: Constants.minViewSize.height)
}
var nameSection: some View {
Section(header: Text("Name")) {
TextField(LocalizedStringKey("Name"), text: $name)
}
}
...
}
So the view gets shown an on appearing, the #State var name does correctly get assigned the value from theme.name; however, this allocation does not cause an update of the view and the value of "name" is not entered into the TextField.
Interestingly, and I do not know if this is a good thing to do, if I wrap the contents of the onAppear block in a DispatchQueue.main.async, everything works fine!
i.e.
.onAppear {
DispatchQueue.main.async {
name = theme.name
...
}
}
Does anyone have any idea as to how, within the onAppear, I can force a view refresh? Or, why the assignment to "name" does not force an update?
Thanks.
This isn't the answer per se, but I went ahead and created a new iOS project with the following code (based on your post, but I cleaned it up a bit and came up with the missing GameTheme object myself).
It's more or less the same, and shows that your posted structure does re-render.
I'm wondering if there's more to the code we can't see in your post that could be causing this.
Are you possibly setting the name state variable anywhere else in a way that could be overriding the value on load?
import SwiftUI
#main
struct TestIOSApp: App {
#State var gameTheme: GameTheme = GameTheme(name: "A game theme")
var body: some Scene {
WindowGroup {
ContentView(theme: $gameTheme)
}
}
}
struct GameTheme {
var name:String;
}
struct ContentView: View {
#Binding var theme:GameTheme;
/// The current presentation mode of the view.
#Environment(\.presentationMode) var presentationMode
#State private var name = "DEFAULT SHOULD NOT BE DISPLAYED"
var body: some View {
NavigationView {
Form {
nameSection
}
.navigationTitle("Edit \(theme.name)")
.onAppear {
name = theme.name
}
}
.toolbar {
ToolbarItem(placement: .cancellationAction) {
Button("Cancel", action: {})
}
ToolbarItem(placement: .confirmationAction) {
Button("Done", action: {})
}
}
.frame(maxWidth:.infinity, maxHeight: .infinity)
}
var nameSection: some View {
Section(header: Text("Name")) {
TextField(LocalizedStringKey("Name"), text: $name)
}
}
}
I seem to have solved my problem with an init(). I created init(theme: Binding<GameTheme>) and then within the init assigned the theme via _theme = theme and then assigned the name via _name = State(initialValue: theme.name.wrappedValue).
I am facing a problem initializing the view, it is reinitialized when the #Published property is set and I cannot figure out why.
The app structure is:
MyApp -> MainView -> fullscreenCover OrderView -> ListOfOrders -> fullscreenCover ProductView -> Bug Button. The view model is injected as #StateObject.
Here is a simplified version of the app I'm working on:
View model
class SystemService: ObservableObject {
#Published private(set) var testValue: Bool = false
#Published private(set) var products: [Product] = []
}
The App declaration
#main
struct MyApp: App {
#StateObject private var systemService = SystemService()
#ViewBuilder
var body: some Scene {
WindowGroup {
MainView(systemService: systemService)
}
}
}
The main view, which basically just shows a fullscreen modal view - OrderView
struct MainView: View {
#StateObject var systemService: SystemService
#State private var activeFullScreen: ActiveFullScreenEnum?
var body: some View {
VStack {
Button(action: {
activeFullScreen = .order
}, label: Text("Order Details"))
}
.fullScreenCover(item: $activeFullScreen, content: { item in
switch item {
case .order:
OrderView(systemService: systemService)
}
})
}
}
The Order View contains a list of products.
struct OrderView: View {
#StateObject var systemService: SystemService
#State private var activeFullScreen: OrderFullScreenEnum?
init(systemService: SystemService) {
_systemService = StateObject(wrappedValue: systemService)
print("OrderScreen Initialized")
}
var body: some View {
VStack {
ScrollView {
ForEach(systemService.products) { product in
Button(action: {
activeFullScreen = .product(product)
}, label: Text("Prodcut Details"))
}
}
}
.fullScreenCover(item: $activeFullScreen, content: { item in
switch item {
case .product(let product):
ProductView(systemService: systemService, product: product)
}
})
}
}
And finally the Product View where the bug is discovered.
The bug is - when pressing on the "Bug Button" the ProductView is dismisses, and OrderView's init calls and prints out "OrderScreen Initialized".
struct ProductView: View {
#StateObject var systemService: SystemService
var body: some View {
VStack {
Button(action: {
systemService.testValue.toggle()
}, label: Text("Bug Button"))
}
}
}
Probably the issue in my fundamental misunderstanding of how Combine works, I will be grateful if somebody could help.
***** Additional info *****
If I add .onAppear to the Order View
.onAppear {
print("Order View Did Appear")
}
The first call to systemService.testValue.toggle() from the Ordre View triggers .onAppear, but only once, only the first time. After that, the bug disappears and .fullScreenCover doesn't get dismissed anymore.
I think the main problem is that the application may be trying to operate with four different instances of SystemServices.
#StateObject - 'A property wrapper type that instantiates an observable object.'
#ObservedObject - 'A property wrapper type that subscribes to an observable object and invalidates a view whenever the observable object changes.'
Instead of #StateObject, try giving #ObservedObject in the child views of App a go.
Good luck.
I have created a View that provides a convinient save button and a save method. Both can then be used inside a parent view.
The idea is to provide these so that the navigation bar items can be customized, but keep the original implementation.
Inside the view there is one Textfield which is bound to a #State variable. If the save method is called from within the same view everthing works as expected. If the parent view calls the save method on the child view, the changes to the #State variable are not applied.
Is this a bug in SwiftUI, or am I am missing something? I've created a simple playbook implementation that demonstrates the issue.
Thank you for your help.
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
// Create the child view to make the save button available inside this view
var child = Child()
var body: some View {
NavigationView {
NavigationLink(
destination: child.navigationBarItems(
// Set the trailing button to the one from the child view.
// This is required as this view might be inside a modal
// sheet, and we need to add the cancel button as a leading
// button:
// leading: self.cancelButton
trailing: child.saveButton
)
) {
Text("Open")
}
}
}
}
struct Child: View {
// Store the value from the textfield
#State private var value = "default"
// Make this button available inside this view, and inside the parent view.
// This makes sure the visibility of this button is always the same.
var saveButton: some View {
Button(action: save) {
Text("Save")
}
}
var body: some View {
VStack {
// Simple textfield to allow a string to change.
TextField("Value", text: $value)
// Just for the playground to change the value easily.
// Usually it would be chnaged through the keyboard input.
Button(action: {
self.value = "new value"
}) {
Text("Update")
}
}
}
func save() {
// This always displays the default value of the state variable.
// Even after the Update button was used and the value did change inside
// the textfield.
print("\(value)")
}
}
PlaygroundPage.current.setLiveView(ContentView())
I think a more SwiftUi way of doing it:
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
var body: some View {
return NavigationView {
// tell the child view where to render it's navigation item
// Instead of configuring navigation items.
NavigationLink(destination: Child(navigationSide: .left)) {
Text("Open")
}
}
}
}
struct Child: View {
enum NavigationSide { case left, right }
// If you really want to encapsulate all state in this view then #State
// is a good choice.
// If the parent view needs to read it, too, #Binding would be your friend here
#State private var value: String = "default"
// no need for #State as it's never changed from here.
var navigationSide = NavigationSide.right
// wrap in AnyView here to make ternary in ui code easier readable.
var saveButton: AnyView {
AnyView(Button(action: save) {
Text("Save")
})
}
var emptyAnyView: AnyView { AnyView(EmptyView()) }
var body: some View {
VStack {
TextField("Value", text: $value)
Button(action: {
self.value = "new value"
}) {
Text("Update")
}
}
.navigationBarItems(leading: navigationSide == .left ? saveButton : emptyAnyView,
trailing: navigationSide == .right ? saveButton : emptyAnyView)
}
func save() {
print("\(value)")
}
}
TextField will only update your value binding when the return button is pressed. To get text changes that occur during editing, set up an observed object on Child with didSet. This was the playground I altered used from your example.
struct ContentView: View {
var child = Child()
var body: some View {
NavigationView {
NavigationLink(
destination: child.navigationBarItems(
trailing: child.saveButton
)
) {
Text("Open")
}
}
}
}
class TextChanges: ObservableObject {
var completion: (() -> ())?
#Published var text = "default" {
didSet {
print(text)
}
}
}
struct Child: View {
#ObservedObject var textChanges = TextChanges()
var saveButton: some View {
Button(action: save) {
Text("Save")
}
}
var body: some View {
VStack {
TextField("Value", text: $textChanges.text).multilineTextAlignment(.center)
Button(action: {
print(self.textChanges.text)
}) {
Text("Update")
}
}
}
func save() {
print("\(textChanges.text)")
}
}
PlaygroundPage.current.setLiveView(ContentView())
Inside Child: value is mutable because it's wrapped with #State.
Inside ContentView: child is immutable because it's not wrapped with #State.
Your issue can be fixed with this line: #State var child = Child()
Good luck.
Child view needs to keep its state as a #Binding. This works:
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
#State var v = "default"
var body: some View {
let child = Child(value: $v)
return NavigationView {
NavigationLink(
destination: child.navigationBarItems(trailing: child.saveButton)
) {
Text("Open")
}
}
}
}
struct Child: View {
#Binding var value: String
var saveButton: some View {
Button(action: save) {
Text("Save")
}
}
var body: some View {
VStack {
TextField("Value", text: $value)
Button(action: {
self.value = "new value"
}) {
Text("Update")
}
}
}
func save() {
print("\(value)")
}
}
PlaygroundPage.current.setLiveView(ContentView())
Based on this commend from #nine-stones (thank you!) I implemented a more SwiftUI way so solve my problem. It does not allow the customization of the navigation items as I planned, but that was not the problem that needed to be solved. I wanted to use the Child view in a navigation link, as well as inside a modal sheet. The problem was how to perform custom cancel actions. This is why I removed the button implementation and replaced it with a cancelAction closure. Now I can display the child view wherever and however I want.
One thing I still do not know why SwiftUI is not applying the child context to the button inside the saveButton method.
Still, here is the code, maybe it helps someone in the future.
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
NavigationView {
NavigationLink(
destination: Child(
// Instead of defining the buttons here, I send an optional
// cancel action to the child. This will make it possible
// to use the child view on navigation links, as well as in
// modal dialogs.
cancelAction: {
self.presentationMode.wrappedValue.dismiss()
}
)
) {
Text("Open")
}
}
}
}
struct Child: View {
// Store the value from the textfield
#State private var value = "default"
#Environment(\.presentationMode) var presentationMode
var cancelAction: (() -> Void)?
// Make this button available inside this view, and inside the parent view.
// This makes sure the visibility of this button is always the same.
var saveButton: some View {
Button(action: save) {
Text("Save")
}
}
var body: some View {
VStack {
// Simple textfield to allow a string to change.
TextField("Value", text: $value)
// Just for the playground to change the value easily.
// Usually it would be chnaged through the keyboard input.
Button(action: {
self.value = "new value"
}) {
Text("Update")
}
}
.navigationBarItems(
leading: self.cancelAction != nil ? Button(action: self.cancelAction!, label: {
Text("Cancel")
}) : nil,
trailing: self.saveButton
)
}
func save() {
// This always displays the default value of the state variable.
// Even after the Update button was used and the value did change inside
// the textfield.
print("\(value)")
}
}
PlaygroundPage.current.setLiveView(ContentView())