1

I have a RocketView View to view SpaceX rockets with the SpaceX API.

I have an issue with ZStack or VStack in the RocketCell View where the cell is not showing the whole image in the list. How can I make it so that the entire image is displayed?

enter image description here

    import SwiftUI
    
    struct RocketsView: View {
        @ObservedObject var viewModel:RocketsViewModel = RocketsViewModel()
        var body: some View {
            GeometryReader { geometryReader in
                NavigationView {
                    ZStack {
                        List(self.viewModel.presenters){ item in
                            RocketCell(presenter: item, geometryProxy: geometryReader)
                        }.onAppear(perform:{
                            self.viewModel.onAppear()
                        }).listStyle(PlainListStyle())
                    }.navigationBarTitle("Rocket",displayMode:.inline)
                }
            }
        }
    }
    
    struct RrocketView_Previews: PreviewProvider {
        static var previews: some View {
            RocketsView()
        }
    }

struct RocketCell:View {
    private var presenter :RocketPresenter!
    private var geometryProxy : GeometryProxy
    
    init(presenter:RocketPresenter,geometryProxy : GeometryProxy ){
        self.presenter = presenter
        self.geometryProxy = geometryProxy
    }
    var body: some View {
        GeometryReader { geometry in
            VStack(spacing:16){
                KFImage(URL(string:self.presenter.image!))
                    .cancelOnDisappear(true)
                    .resizable()
                    .frame( width: self.geometryProxy.size.width,height: 200)
                Text(self.presenter.name!)
              
            }
        }
    }
}
DischordDynne
  • 117
  • 15
NinjaDeveloper
  • 1,620
  • 3
  • 19
  • 51

1 Answers1

-2

Unfortunately, SwiftUI images do not have dimensions when using the .resizable() tag. To avoid this, I recommend using the:

.resizable()
.aspectRatio(contentMode: .fit)

combined with a static .frame(height: [INT]) (Though, this will cause items in the list to have different aspect ratios). To make it more dynamic across different devices, you can also use the UIScreen bounds to make it a fraction of the screen.

Gryzle
  • 1
  • 2