Suggestion How To Avoid Rebuilding View When Using EnvironmentObject

Question

chitgoks OP

Created Dec ’22

Replies 0

Boosts 0

Participants 1

Hi, i wish to ask for suggestions. I am in a dilemna using an environment object. Please see code.

struct ContentView: View {
   
  @State var show = false
  @StateObject var appData = AppData()
  @StateObject var toolbarData = ToolbarData()

  var body: some View {
    NavigationStack(path: $appData.path) {
      ZStack(alignment: .leading) {
        VStack(spacing: 0) {
          HStack {
            Button(action: {
              withAnimation(.default) {
                show.toggle()
              }
            }) {
              Image(systemName: "line.3.horizontal")
            }
            Text("Home")
            Spacer()
            ToolbarView()
            OverflowMenu()
              .padding([.leading], Default.instance.PADDING_BETWEEN_MENU_ITEM)
          }
          .padding()
          .foregroundColor(.primary)
          .overlay(Rectangle().stroke(Color.primary.opacity(0.1), lineWidth: 1).shadow(radius: 3).edgesIgnoringSafeArea(.top))

          MainContent(navigationManager: navigationManager)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
         .environmentObject(toolbarData)
        .background(Color.primary.opacity(self.show ? (self.dark ? 0.05 : 0.2) : 0))
      }
      .navigationBarHidden(true)
    }
    .navigationViewStyle(.stack)
    .environmentObject(appData)
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

struct ToolbarView: View {
   
  @Binding var toolbarData: ToolbarData
   
  var body: some View {
    HStack {
      if let item = toolbarData.toolbarItem, item.visible {
        Button {
          item.action()
        } label: {
          if let iconLink = item.iconLink {
            NavigationLink(destination: iconLink) {
              Image(systemName: item.icon)
            }
          }
          else {
            Image(systemName: item.icon)
          }
        }
        .disabled(item.disabled)
        .opacity(item.opacity)
        .padding([.leading, .trailing], Default.instance.PADDING_BETWEEN_MENU_ITEM)
      }
  }
}

final class ToolbarData: ObservableObject {
  @Published var toolbarItem: ToolbarItemProperties?
}

final class ToolbarItemProperties {
  var disabled = false
}

In the MainContent , my code runs this

toolbarData.toolbarItemProperties.disabled = false

I do not want MainContent to be rebuilt. Inside MainContent, I modify toolbarItemProperties (from an environment object). And i call objectWillChange.send(). Problem is, it will rebuild the ContentView widget including MainContent.

What can be the correct approach to having to eb able to change the value of toolbarItemProperties and rebuild it but ignoring MainContent to rebuild again. Thoughts?

Boost