22

I want to use NavigationView together with the ScrollView, but I am not seeing List items.

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView{
                VStack {
                    Text("Some stuff 1")
                    List{
                        Text("one").padding()
                        Text("two").padding()
                        Text("three").padding()
                    }
                    Text("Some stuff 2")
                }
            }
        }
    }
}

All I see is the text. If I remove ScrollView I see it all, but the text is being pushed to the very bottom. I simply want to be able to add List and Views in a nice scrollable page.

Winten
  • 574
  • 2
  • 8
  • 15

2 Answers2

48

The ScrollView expects dimension from content, but List expects dimension from container - as you see there is conflict, so size for list is undefined, and a result rendering engine just drop it to avoid disambiguty.

The solution is to define some size to List, depending of your needs, so ScrollView would now how to lay out it, so scroll view could scroll entire content and list could scroll internal content.

Eg.

demo

struct ContentView: View {
    @Environment(\.defaultMinListRowHeight) var minRowHeight

    var body: some View {
        NavigationView {
            ScrollView{
                VStack {
                    Text("Some stuff 1")
                    List {
                        Text("one").padding()
                        Text("two").padding()
                        Text("three").padding()
                    }.frame(minHeight: minRowHeight * 3).border(Color.red)
                    Text("Some stuff 2")
                }
            }
        }
    }
}
Asperi
  • 228,894
  • 20
  • 464
  • 690
  • 1
    Thanks!! It is working but I have dynamic height so can't fix minHeight. If I'll fix it will show an extra scroll or my content will be truncated. Any suggestions? – Hardik Shah Apr 20 '23 at 10:19
  • How very silly that they don't have a minimum size or something to let devs know that the List is in fact there, thanks for the info! – Stu P. Jun 29 '23 at 23:22
2

Just wanted to throw out an answer that fixed what I was seeing very similar to the original problem - I had put a Label() item ahead of my List{ ... } section, and when I deleted that Label() { } I was able to see my List content again. Possibly List is buggy with other items surrounding it (Xcode 13 Beta 5).

Kendall Helmstetter Gelner
  • 74,769
  • 26
  • 128
  • 150
  • 1
    I agree. I tried to put a List inside a ScrollView a couple of times but it never worked as expected. If you go with ScrollView implement your own list item. – christostsang Dec 08 '22 at 22:13