4

I am trying to display a custom view for my List Row, it is an HStack with an image, a title Text and another Text containing a short paragraph. I am having issues with the height of the NavigationLink item. I have tried setting the frame to a specific height but it does not display optimally on different devices (the small resolution difference between the iPhone XR and iPhone XS is enough to make me have to adjust the height manually).

Is there a way to have the frame height be set automatically? I have tried many things such as setting the frame height on my PlanetRow View, adding padding, setting the lineLimit to: 0, 3, 5, ... Whatever I do, if I don't set the height for the NavigationLink View, the PlanetRow extends past the NavigationLink View (visible beyond the List separators).

Here's the code for my views:

struct PlanetRow : View {
    var planet: Planet

    var body: some View {
        HStack {
            Image("Mars")
                .resizable()
                .frame(width: 50, height: 50)
            VStack(alignment: .leading) {
                Text(planet.name)
                    .font(.largeTitle)
                Text(planet.overview)
                    .font(.caption)
            }
            .lineLimit(nil)
        }
    }
}

struct PlanetList : View {
    var body: some View {
        NavigationView {
            List(planetData.identified(by: \.id)) { planet in
                NavigationLink(destination: PlanetDetail(planet: planet)) {
                    PlanetRow(planet: planet)
                }
                .frame(height: 150)
            }
            .navigationBarTitle(Text("Planets"))
        }
    }
}

NavigationLink with Frame Height NavigationLink without Frame Height

otolock
  • 662
  • 7
  • 23
  • There is a possibility that this is a bug with the beta release of SwiftUI and could possibly be fixed in a future update. – otolock Jul 24 '19 at 04:56
  • check this solution, https://stackoverflow.com/questions/57565516/any-way-to-avoid-swiftui-geometryreader-preventing-nested-view-to-grow-inside-li/61921647#61921647 – Nilay May 21 '20 at 03:04

0 Answers0