SwiftUI - Using 'ObservableObject' and #EnvironmentObject to Conditionally Display View - swift

I would like to conditionally display different views in my application - if a certain boolean is true, one view will be displayed. If it is false, a different view will be displayed. This boolean is within an ObservableObject class, and is changed from one of the views that will be displayed.
PracticeStatus.swift (the parent view)
import Foundation
import SwiftUI
import Combine
class PracticeStatus: ObservableObject {
#Published var showResults:Bool = false
}
PracticeView.swift (the parent view)
struct PracticeView: View {
#EnvironmentObject var practiceStatus: PracticeStatus
var body: some View {
VStack {
if practiceStatus.showResults {
ResultView()
} else {
QuestionView().environmentObject(PracticeStatus())
}
}
}
}
QuestionView.swift
struct QuestionView: View {
#EnvironmentObject var practiceStatus: PracticeStatus
var body: some View {
VStack {
...
Button(action: {
self.practiceStatus.showResults = true
}) { ... }
...
}
}
}
However, this code doesn't work. When the button within QuestionView is pressed, ResultView is not displayed. Does anybody have a solution? Thanks!

Have you tried to compile your code? There are several basic errors:
Variable practice does not exist in PracticeView. Did you mean practiceStatus?
Variable userData does not exist in QuestionView. Did you mean practiceStatus?
You are calling PracticeView from inside PracticeView! You'll definetely get a stack overflow ;-) Didn't you mean QuestionView?
Below is a working code:
import Foundation
import SwiftUI
import Combine
class PracticeStatus: ObservableObject {
#Published var showResults:Bool = false
}
struct ContentView: View {
#State private var flag = false
var body: some View {
PracticeView().environmentObject(PracticeStatus())
}
}
struct PracticeView: View {
#EnvironmentObject var practiceStatus: PracticeStatus
var body: some View {
VStack {
if practiceStatus.showResults {
ResultView()
} else {
QuestionView()
}
}
}
}
struct QuestionView: View {
#EnvironmentObject var practiceStatus: PracticeStatus
var body: some View {
VStack {
Button(action: {
self.practiceStatus.showResults = true
}) {
Text("button")
}
}
}
}
struct ResultView: View {
#State private var flag = false
var body: some View {
Text("RESULTS")
}
}

Related

Show new view and completely destroy old view when clicking on Text

So I have been wanting to do this for some time, but I can't figure out how to approach this, so I'm reaching out to see if someone might be able to help me.
So let's say that I have the following code, which when the app loads, loads the "MainView":
struct MapGlider: App {
#ObservedObject var mainViewModel = MainViewModel()
var body: some Scene {
WindowGroup {
MainView()
.environmentObject(mainViewModel)
}
}
}
This loads the map as soon as the app is opened, which is great! All works great there.
Now I will be switching that out to show the OnboardingView() when the app loads such as:
struct MapGlider: App {
#ObservedObject var mainViewModel = MainViewModel()
var body: some Scene {
WindowGroup {
OnboardingView()
}
}
}
Now, I have a OnboardingView that shows a ZStack with some options, as show in this code below:
struct OnboardingView: View {
#State private var showGetStartedSheet = false
#ObservedObject var mainViewModel = MainViewModel()
var body: some View {
if #available(iOS 16.0, *) {
NavigationStack {
ZStack(alignment: .top) {
VStack {
LazyVGrid(columns: [GridItem(), GridItem(), GridItem(alignment: .topTrailing)], content: {
Spacer()
Image("onboarding-logo")
.border(.red)
NavigationLink(destination: MainView().environmentObject(mainViewModel), label: {
Text("Skip")
})
})
.border(.red)
}
}
.border(.blue)
}
} else {
// Fallback on earlier versions
}
}
}
Which outputs the following:
What I'm trying to achieve:
When someone clicks on the "Skip" text, to kill the OnboardingView and show the MainView().
The closest I got is setting a NavigationLink, but that had a back button and doesn't work so well, I want to be able to go to the MainView and not be able to go back to OnboardingView.
All help will be appreciated!
You could use a container view that conditionally displays the onboarding or main views, depending on the state of a variable (stored at the parent level). That variable can be passed down via a Binding:
Simplified example that should be easily applicable to your code:
class AppState: ObservableObject {
#Published var showOnboarding = true
}
#main
struct CustomCardViewApp: App {
#StateObject var appState = AppState()
var body: some Scene {
WindowGroup {
MainScreenContainer(showOnboarding: $appState.showOnboarding)
}
}
}
struct MainScreenContainer: View {
#Binding var showOnboarding: Bool
var body: some View {
if showOnboarding {
OnboardingView(showOnboarding: $showOnboarding)
} else {
MainView()
}
}
}
struct OnboardingView: View {
#Binding var showOnboarding: Bool
var body: some View {
Text("Onboarding")
Button("Skip") {
showOnboarding = false
}
}
}
struct MainView: View {
var body: some View {
Text("Main")
}
}

Is there an alternative way of displaying an image depends on my input?

I want to show the level of connectivity of the wifi depends on my input. I used custom wifi image in sfsymbol. The code result is not really good, so I am looking for a better way. Sorry about this if it's something that not possible in Xcode.
//please look my image atttachment
import SwiftUI
class ViewMode: ObservableObject {
#Published var rece = ""
}
struct MyApp: View {
#State private var passConnection: String = ""
var body: some View {
MyConnectionView(incomingConnection: $passConnection)
}
}
struct MyConnectionView: View {
#Binding var incomingConnection: String
var body: some View {
VStack {
VStack {
if incomingConnection == "low" {
CustomWifi1
}
else if incomingConnection == "medium" {
CustomWifi2
}
else {
CustomWifi3
}
}
}
}
var CustomWifi1: some View {
Image("custom1")
}
var CustomWifi2: some View {
Image("custom2")
}
var CustomWifi3: some View {
Image("custom3")
}
var CustomWifi4: some View {
Image("custom4")
}
var CustomWifi5: some View {
Image("custom5")
}
}
You can display a different level of connection with SwiftUI and the feature of SF Symbols by using "variableValue" modifier of the "Image".
Therefore, you don't have to create multiple customized wifi images for your app. Also, you should have included #swiftui tag in your question.
Try this code below:
import SwiftUI
struct TestView: View {
#State var connectionValue = 0.0
var body: some View {
VStack {
Slider(value: $connectionValue)
Image(systemName: "wifi", variableValue: connectionValue)
}
}
}

SwiftUI: Singleton class not updating view

New to SwiftUI... I have the following simplified code. The intended functionality is to be able to navigate between View1() and View2(), using a singleton class to keep track of this navigation.
I suspect that maybe I needed to add #Published to my show_view_2 variable, but I want to keep it in App Storage. Also, I understand this isn't the best way to switch between views, but I only am using this method because it's a minimally reproduced example.
Why isn't the below code working, and how can I make it work?
class Player {
static var player = Player()
#AppStorage("show_view_2") var show_view_2: Bool = false
}
struct ContentView: View {
var body: some View {
if(Player.player.show_view_2) {
View2()
} else {
Text("Go to View2")
.onTapGesture {
Player.player.show_view_2 = true
}
}
}
}
struct View2: View {
var body: some View {
Text("Back to View1")
.onTapGesture {
Player.player.show_view_2 = false
}
}
}
For SwiftUI to know to update, Player should be an ObservableObject. Also, it'll need to be accessed using a property wrapper (either #StateObject or #ObservedObject) on the View:
class Player : ObservableObject {
static var player = Player()
#AppStorage("show_view_2") var show_view_2: Bool = false
}
struct ContentView: View {
#StateObject private var player = Player.player
var body: some View {
if player.show_view_2 {
View2()
} else {
Text("Go to View2")
.onTapGesture {
player.show_view_2 = true
}
}
}
}
struct View2: View {
#StateObject private var player = Player.player
var body: some View {
Text("Back to View1")
.onTapGesture {
player.show_view_2 = false
}
}
}
In general, I'd recommend not using a singleton and instead passing an instance of the object explicitly between views -- this will be more testable and flexible over time:
class Player : ObservableObject {
#AppStorage("show_view_2") var show_view_2: Bool = false
}
struct ContentView: View {
#StateObject private var player = Player()
var body: some View {
if player.show_view_2 {
View2(player: player)
} else {
Text("Go to View2")
.onTapGesture {
player.show_view_2 = true
}
}
}
}
struct View2: View {
#ObservedObject var player : Player
var body: some View {
Text("Back to View1")
.onTapGesture {
player.show_view_2 = false
}
}
}

SwiftUI macOS Commands (menu bar) and View

Hi I am starting to learn SwiftUI and macOS development. I am using the SwiftUI life cycle. How do I call a function from the focused window from the menu bar.
Besides Apple documentation, I found this reference and am able to create menu items using Commands but I have no idea how to call a function from my view.
For example:
Suppose this is my App struct:
import SwiftUI
#main
struct ExampleApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}.commands {
CommandMenu("First menu") {
Button("Action!") {
// How do I call the views action function?
}
}
}
}
and this is my View:
struct ContentView: View {
public func action() {
print("It works")
}
var body: some View {
Text("Example")
}
}
I just typed the example code sorry if there are any typos but I hope you can get the idea.
Because Views in SwiftUI are transient, you can't hold a reference to a specific instance of ContentView to call a function on it. What you can do, though, is change part of your state that gets passed down to the content view.
For example:
#main
struct ExampleApp: App {
#StateObject var appState = AppState()
var body: some Scene {
WindowGroup {
ContentView(appState: appState)
.frame(maxWidth: .infinity, maxHeight: .infinity)
}.commands {
CommandMenu("First menu") {
Button("Action!") {
appState.textToDisplay = "\(Date())"
}
}
}
}
}
class AppState : ObservableObject {
#Published var textToDisplay = "(not clicked yet)"
}
struct ContentView: View {
#ObservedObject var appState : AppState
var body: some View {
Text(appState.textToDisplay)
}
}
Note that the .commands modifier goes on WindowGroup { }
In this example, AppState is an ObservableObject that holds some state of the app. It's passed through to ContentView using a parameter. You could also pass it via an Environment Object (https://www.hackingwithswift.com/quick-start/swiftui/how-to-use-environmentobject-to-share-data-between-views)
When the menu item is clicked, it sets textToDisplay which is a #Published property on AppState. ContentView will get updated any time a #Published property of AppState gets updated.
This is the general idea of the pattern you'd use. If you have a use case that isn't covered by this pattern, let me know in the comments.
Updates, based on your comments:
import SwiftUI
import Combine
#main
struct ExampleApp: App {
#StateObject var appState = AppState()
var body: some Scene {
WindowGroup {
ContentView(appState: appState)
.frame(maxWidth: .infinity, maxHeight: .infinity)
}.commands {
CommandMenu("First menu") {
Button("Action!") {
appState.textToDisplay = "\(Date())"
}
Button("Change background color") {
appState.contentBackgroundColor = Color.green
}
Button("Toggle view") {
appState.viewShown.toggle()
}
Button("CustomCopy") {
appState.customCopy.send()
}
}
}
}
}
class AppState : ObservableObject {
#Published var textToDisplay = "(not clicked yet)"
#Published var contentBackgroundColor = Color.clear
#Published var viewShown = true
var customCopy = PassthroughSubject<Void,Never>()
}
class ViewModel : ObservableObject {
#Published var text = "The text I have here"
var cancellable : AnyCancellable?
func connect(withAppState appState: AppState) {
cancellable = appState.customCopy.sink(receiveValue: { _ in
print("Do custom copy based on my state: \(self.text) or call a function")
})
}
}
struct ContentView: View {
#ObservedObject var appState : AppState
#State var text = "The text I have here"
#StateObject private var viewModel = ViewModel()
var body: some View {
VStack {
Text(appState.textToDisplay)
.background(appState.contentBackgroundColor)
if appState.viewShown {
Text("Shown?")
}
}
.onReceive(appState.$textToDisplay) { (newText) in
print("Got new text: \(newText)")
}
.onAppear {
viewModel.connect(withAppState: appState)
}
}
}
In my updates, you can see that I've addressed the question of the background color, showing hiding a view, and even getting a notification (via onReceive) when one of the #Published properties changes.
You can also see how I use a custom publisher (customCopy) to pass along an action to ContentView's ViewModel

Passing data from extension in SwiftUI

I am building a complex interface in SwiftUI that I need to break into multiple extensions in order to be able to compile the code, but I can't figure out how to pass data between the extension and the body structure.
I made a simple code to explain it :
class Search: ObservableObject {
#Published var angle: Int = 10
}
struct ContentView: View {
#ObservedObject static var search = Search()
var body: some View {
VStack {
Text("\(ContentView.self.search.angle)")
aTest()
}
}
}
extension ContentView {
struct aTest: View {
var body: some View {
ZStack {
Button(action: { ContentView.search.angle = 11}) { Text("Button")}
}
}
}
}
When I press the button the text does not update, which is my issue. I really appreciate any help you can provide.
You can try the following:
struct ContentView: View {
#ObservedObject var search = Search()
var body: some View {
VStack {
Text("\(ContentView.self.search.angle)")
aTest // call as a computed property
}
}
}
extension ContentView {
var aTest: some View { // not a separate `struct` anymore
ZStack {
Button(action: { self.search.angle = 11 }) { Text("Button")}
}
}
}