SOLVED: Day 42 Challenge issue @AppStorage("showingGrid") private var showingGrid = true

@VulcanCCIT HWS+

Jul '23

In the HWS+ solution there was a suggestion to use @AppStorage("showingGrid") private var showingGrid = true to save the preference of the user's grid/list preference. Well it works to simply save it once, and load it... However, once you make that choice, you can never go back and change it. It seems to take away the "toggle" aspect of the button. I am targetting IOS 16, so I am not sure if I am the only one seeing this or not.

Please advise for those who have used this in their version of the app.

2

@ygeras

Jul '23

Could you share your ContentView code, so that others could look into what might be the reason of such behavior?

2

@VulcanCCIT HWS+

Jul '23

import SwiftUI

struct ContentView: View {
  let astronauts: [String: Astronaut] = Bundle.main.decode("astronauts.json")
  let missions: [Mission] = Bundle.main.decode("missions.json")

  //Paul's suggestion below does not toggle back after you change it once... odd
  //@AppStorage("showingGrid") private var showingGrid = true
  @State private var showingGrid = true

  var body: some View {
    NavigationView {
      GeometryReader { geometry in
        Image("stars")
          .resizable()
          .aspectRatio(contentMode: .fill)
          .ignoresSafeArea()
          .frame(height: geometry.size.height)
        Group {
          if showingGrid {
            GridLayoutView(astronauts: astronauts, missions: missions)
          } else {
            ListLayoutView(astronauts: astronauts, missions: missions)
              .scrollContentBackground(.hidden)
          }
        }
        .padding(8)
        .toolbar {
          Button {
            showingGrid.toggle()
          } label: {
            if showingGrid {
              Label("Show as table", systemImage: "list.star")
            } else {
              Label("Show as grid", systemImage: "rectangle.grid.2x2")
            }
          }
        }
      }
      .navigationTitle("Moonshots")
      .background(.darkBackground)
      .preferredColorScheme(.dark)
    }
  }
}

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

2

@ygeras

Jul '23

Try to use ZStack instead of geo reader, I don't think you will need hight frame for the image. It should be placed fine in there.

2

@VulcanCCIT HWS+

Jul '23

That worked great, I do not understand why it didnt work with GeometryReader. I still needed the frame as it then messed with the rendering of the list and in some fashion, the rendering of the grid... but this code works with Paul's @AppState

//
//  ContentView.swift
//  MoonShot
//
//  Created by Chuck Condron on 6/23/23.
//

import SwiftUI

struct ContentView: View {
  let astronauts: [String: Astronaut] = Bundle.main.decode("astronauts.json")
  let missions: [Mission] = Bundle.main.decode("missions.json")

  @AppStorage("showingGrid") private var showingGrid = true

  var body: some View {
    NavigationView {
      ZStack {
      Image("stars")
          .resizable()
          .aspectRatio(contentMode: .fill)
          .ignoresSafeArea()
          .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        Group {
          if showingGrid {
            GridLayoutView(astronauts: astronauts, missions: missions)
          } else {
            ListLayoutView(astronauts: astronauts, missions: missions)
              .scrollContentBackground(.hidden)
          }
        }
        .padding(8)
        .toolbar {
          Button {
            showingGrid.toggle()
          } label: {
            if showingGrid {
              Label("Show as table", systemImage: "list.star")
            } else {
              Label("Show as grid", systemImage: "rectangle.grid.2x2")
            }
          }
        }
      }//geo
      .navigationTitle("Moonshots")
      .background(.darkBackground)
      .preferredColorScheme(.dark)
    }
  }
}

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

Thank you so much! such a small change!

2

Reply to this topic…