I'm attempting to embed a Picker in a larger ScrollView that controls the content immediately below the Picker - essentially I'd like the picker to control a portion of the larger ScrollView.

The below test code mostly does that if ScrollView is commented out...obviously not ideal. Once I bring the ScrollView back to life, the TabView content vanishes. I did make it all work by encompassing the ScrollView in a geometry reader and then set the frame height to the content height, but that wasn't ideal as it seemed to add a lot of extra space unnecessarily.

I suspect there's a better way to implement this that I'm missing - maybe TabView isn't the solution? You could also use if/else statements that show views based on tabSelectedValue, with animations added to make it transition smoothly.

struct TestView: View {
    @State private var tabSelectedValue = 0

    var body: some View {
        //ScrollView {
            VStack {
                // Picker
                Picker("", selection: $tabSelectedValue) {
                    Text("First").tag(0)
                    Text("Second").tag(1)
                }
                .pickerStyle(SegmentedPickerStyle())
                .padding()

                // TabView
                TabView(selection: $tabSelectedValue) {
                    Text("Content for first tab")
                        .tag(0)
                    Text("Content for second tab")
                        .tag(1)
                }
                Spacer()
            }
        //}
    }
}