How do I hide a view in response to a variable? - ios

Question

I have a view made up of 3 files. This view is a marketplace. There are two options to pick from in the filter tab bar at the top of the view. The view changes in response to these tabs successfully. When an item on the marketplace is tapped, a detailed view of the item is displayed.
However, when the detail view is displayed, the filter tab bar remains at the top of the view. I need this filter tab bar to hide when a detail view variable is set to true.
This is my code:
Marketplace code:
import SwiftUI
struct Marketplace: View {
#StateObject var MarketplaceModel = MarketplaceViewModel()
#State private var selectedMarketplaceFilter: MarketplaceFilterViewModel = .shoe
// MARK: For Smooth Sliding Effect
#Namespace var animation
// Shared Data...
#EnvironmentObject var sharedData: SharedDataModel
#State var shoeData : Shoe = Shoe()
#State var showDetailShoe: Bool = false
#State var sockData : Sock = Sock()
#State var showDetailSock: Bool = false
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 10){
if !showDetailShoe && !showDetailSock {
marketplaceFilterBar
}
if selectedMarketplaceFilter == .shoes {
MarketplaceShoeView()
}
if selectedMarketplaceFilter == .socks {
MarketplaceSockView()
}
}
}
}
//Filter bar view
var marketplaceFilterBar: some View {
VStack {
HStack {
ForEach(MarketplaceFilterViewModel.allCases, id: \.rawValue) { item in
VStack {
Text(item.title)
.font(.headline)
.fontWeight(selectedMarketplaceFilter == item ? .semibold: .regular)
.foregroundColor(selectedMarketplaceFilter == item ? .black: .gray)
if selectedMarketplaceFilter == item {
Capsule()
.foregroundColor(Color("Blue"))
.frame(height: 3)
.matchedGeometryEffect(id: "filter", in: animation)
} else {
Capsule()
.foregroundColor(Color(.clear))
.frame(height: 3)
}
}
.onTapGesture {
withAnimation(.easeInOut) {
self.selectedMarketplaceFilter = item
}
}
}
}
}
}
}
MarketplaceShoeView(same exact code as MarketplaceSockView):
import SwiftUI
struct MarketplaceShoeView: View {
#StateObject var MarketplaceModel = MarketplaceViewModel()
#State private var selectedMarketplaceFilter: MarketplaceFilterViewModel = .shoe
#Namespace var animation
#State var showDetailShoe = false
#State var selectedShoe : Shoe!
// Shared Data...
#EnvironmentObject var sharedData: SharedDataModel
#State var string = ""
var body: some View {
var columns = Array(repeating: GridItem(.flexible()), count: 2)
ZStack{
VStack(spacing: 10){
HStack(spacing: 5) {
HStack(spacing: 12){
Image(systemName: "magnifyingglass")
TextField("Search", text: $MarketplaceModel.search)
}
}
if MarketplaceModel.shoes.isEmpty{
ProgressView()
}
else{
ScrollView(.vertical, showsIndicators: false, content: {
LazyVGrid(columns: Array(repeating: GridItem(.flexible(),spacing: 10), count: 2),spacing: 20){
ForEach(MarketplaceModel.filteredShoe){shoe in
ShoeView(shoeData: shoe)
.onTapGesture {
withAnimation(.easeInOut){
selectedShoe = shoe
showDetailShoe.toggle()
}
}
}
}
})
}
}
if selectedShoe != nil && showDetailShoe{
ShoeDetailView(showDetailShoe: $showDetailShoe, shoeData: selectedShoe, shoe_id: string)
}
}
}
}
ShoeDetailView:
struct ShoeDetailView: View {
#StateObject var MarketplaceModel = MarketplaceViewModel()
#Binding var showDetailShoe: Bool
var shoeData : Shoe
var shoe_id: String
#Namespace var animation: Namespace.ID
#EnvironmentObject var sharedData: SharedDataModel
#EnvironmentObject var marketplaceData: MarketplaceViewModel
#State var string = ""
var body: some View {
NavigationView{
VStack{
VStack{
HStack {
Button(action: {
withAnimation(.easeOut){showDetailShoe.toggle()}
}) {
Image(systemName: "arrow.backward.circle.fill")
ForEach(MarketplaceModel.shoe_details_array){ items in
Text(items.shoe_name)
}
}
}
Image("ShoeImage")
ScrollView(.vertical, showsIndicators: false) {
VStack(alignment: .leading, spacing: 15) {
Text(shoeData.shoe_name)
Text(shoeData.shoe_details)
}
}
}
}
}
}
SharedDataModel:
class SharedDataModel: ObservableObject {
#Published var detailSock : Sock?
#Published var showDetailSock : Bool = false
#Published var detailShoe : Shoe?
#Published var showDetailShoe : Bool = false
//Add something here??
}
marketplaceFilterBar needs to be hidden when a detailView is true.

Answer 1

You need to use the boolean values from EnvironmentObject instead of redefining them inside views. As follow:
import SwiftUI
struct Marketplace: View {
...
#EnvironmentObject var sharedData: SharedDataModel
...
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 10){
// Use from env object
if !sharedData.showDetailShoe && !sharedData.showDetailSock {
marketplaceFilterBar
}
...
}
}
}
...
}
and so on...