Incorrect scroll behavior when using a list in WatchOS

Question

Behavior #1: I'm trying to have text before I have a list of elements and have everything scroll cohesively. I've tried changing the code in many aspects and end up getting different incorrect behavior. Here is the code for behavior_1:

struct Thing: Hashable {
    var name: String
    var number: Int
}
struct SummaryView: View {
    var things = [Thing(name: "Paul", number: 42),Thing(name: "Jackie", number: 41),Thing(name: "James", number: 49),Thing(name: "Paola", number: 22)]
    var body: some View {
        VStack(alignment: .leading){
            Text("Text 1")
            Text("Text 2")
            Text("Text 3")
            Text("Text 4")
            List{
                ForEach(self.things, id: \.self){ thing in
                    VStack(alignment: .leading){
                        Text(thing.name)
                        Text("\(thing.number) Years")
                            .foregroundColor(Color.blue)
                    }
                    .padding()
                    .frame(minWidth: 0, maxWidth: .infinity, alignment: Alignment.leading)
                }
            }
            Spacer()
            NavigationLink(destination: Text("HI")){
                Text("Finished")
            }

        }.edgesIgnoringSafeArea(.bottom)
    }
}

This makes it so that there is a small section of the screen that is the list and is scrollable: meaning that I can only see about 1 list element at a time and I can only scroll that section of the view (the elements of the list).

Behavior #2: I've also tried putting the List inside a ScrollView, this leasd to behavior_2 in which there are two different scrollable areas,: The first is the area with the text ("Text 1" etc...) and the container/view of the list (meaning I cannot scroll through the individual elements), the second scroll area is the actual elements in the list but once I reach the top element the scroll section does not continue on to the text etc:

import SwiftUI

struct Thing: Hashable {
    var name: String
    var number: Int
}
struct SummaryView: View {
    var things = [Thing(name: "Paul", number: 42),Thing(name: "Jackie", number: 41),Thing(name: "James", number: 49),Thing(name: "Paola", number: 22)]
    var body: some View {
        ScrollView{
            VStack(alignment: .leading){
                    Text("Text 1")
                    Text("Text 2")
                    Text("Text 3")
                    Text("Text 4")
                    List{
                        ForEach(self.things, id: \.self){ thing in
                            VStack(alignment: .leading){
                                Text(thing.name)
                                Text("\(thing.number) Years")
                                    .foregroundColor(Color.blue)
                                }
                            .padding()
                            .frame(minWidth: 0, maxWidth: .infinity, alignment: Alignment.leading)
                        }
                    }.aspectRatio(contentMode: .fit)
                Spacer()
                NavigationLink(destination: Text("HI")){
                    Text("Finished")
                }

            }

        }.edgesIgnoringSafeArea(.bottom)
    }
}

I've also tried to switch the ScrollView with the VStack to have something like this:

VStack(alignment: .leading){
    ScrollView {
           .
           .
           .
    }
}

And that behaves like behavior_2:

Any suggestions about how I can get the desired behavior (When you scroll past the Texts you then scroll through the list elements (meaning that you will see less of the text the more you scroll) until you reach the bottom of the list etc) ?

Of course without me implementing a new 'List' view then using a for each loop to iterate through the elements

Answer 1

If you put the 4 Texts inside your List it will scroll with it. The Spacer is also unnecessary:

var body: some View {
    VStack(alignment: .leading) {
        List {
            VStack {
                Text("Text 1")
                Text("Text 2")
                Text("Text 3")
                Text("Text 4")
            }   .padding()
            ForEach(self.things, id: \.self){ thing in
                VStack(alignment: .leading){
                    Text(thing.name)
                    Text("\(thing.number) Years")
                        .foregroundColor(Color.blue)
                }   .padding()
            }
        }
        NavigationLink(destination: Text("HI")){
            Text("Finished")
        }

    }.edgesIgnoringSafeArea(.bottom)
}