ios – SwiftUI Picker in Kind – Cannot Dynamically Dimension the Kind Area

I am fighting a view the place I wish to have a number of pickers embedded in
different views. After I wrap the pickers in a Kind, I get the specified habits for the
picker however there’s a number of additional area across the pickers that I can not seem to
mechanically alter.

That is an instance – the area within the purple define appears to be decided by the opposite
view parts not the scale of the picker.

I can, after all, hard-code a body peak for the Kind however that’s trial and error
and would solely be particular to the system and orientation. I’ve tried a number of
variations of Stacks inside Stacks with padding, GeometryReader and so forth, however I’ve not give you any
resolution. As an apart, I DO need the picker labels, in any other case I might simply take away
the Kind.

I additionally tried setting UITableView.look().tableFooterView in an init() however that didn’t work both.

Here’s a simplified model:

struct ContentView4: View {
    @State var selectedNumber1: Int = 1
    @State var selectedNumber2: Int = 2
    @State var selectedNumber3: Int = 3

    var physique: some View {
        NavigationView {
            VStack(alignment: .main) {
                HStack {
                    Spacer()
                    Textual content("Examine as much as 3")
                        .font(.caption)
                    Spacer()
                }//h
            
                Kind {//for pickers
                        Picker(choice: $selectedNumber1, label: Textual content("A")) {
                            ForEach(0..<10) {
                                Textual content("($0)")
                            }
                        }//picker

                        Picker(choice: $selectedNumber2, label: Textual content("B")) {
                            ForEach(0..<10) {
                                Textual content("($0)")
                            }
                        }//picker

                        Picker(choice: $selectedNumber3, label: Textual content("C")) {
                            ForEach(0..<10) {
                                Textual content("($0)")
                            }
                        }//picker
                }//type for pickers
                .padding(.horizontal, 10)
                //.body(peak: 200) //do not wish to exhausting code this
            
                VStack(alignment: .main) {
                    HStack {
                        Textual content("A")
                            .body(width: 100)
                        Textual content("B")
                            .body(width: 100)
                        Textual content("C")
                            .body(width: 100)
                    }
                    .padding(.horizontal, 10)
                
                    ScrollView(.vertical, showsIndicators: false) {
                        VStack(alignment: .main){
                            Textual content("A title line")
                                .font(.headline)
                                .padding(.vertical, 5)
                            HStack {
                                Textual content("Quantity")
                                    .body(width: 100)
                                Textual content("Quantity")
                                    .body(width: 100)
                                Textual content("Quantity")
                                    .body(width: 100)
                            }
                            Textual content("One other title line")
                                .font(.headline)
                                .padding(.vertical, 5)
                            HStack {
                                Textual content("One thing")
                                    .body(width: 100)
                                Textual content("One thing")
                                    .body(width: 100)
                                Textual content("One thing")
                                    .body(width: 100)
                            }
                            Textual content("A Third title line")
                                .font(.headline)
                                .padding(.vertical, 5)
                            HStack {
                                Textual content("Extra")
                                    .body(width: 100)
                                Textual content("Extra")
                                    .body(width: 100)
                                Textual content("Extra")
                                    .body(width: 100)
                            }
                        }
                    }//scroll
                    .padding(.horizontal, 10)
                }
                .navigationBarTitle("Examine Three", displayMode: .inline)
            }
        }//nav
    }//physique
}//struct

Curiously, I’m able to get an answer by eradicating the shape and wrapping every
picker in a menu, like this:

Menu {
    Picker(choice: $selectedNumber2, label: EmptyView()) {
        ForEach(0..<10) {
            Textual content("($0)")
        }
    }//picker
} label: {
    HStack {
    Textual content("B")
        Spacer()
        Picture(systemName: "chevron.proper")
            .resizable()
            .body(width: 14, peak: 14)
    }//h
}//menu label

Nonetheless, I nonetheless just like the look of the Kind higher if I might mechanically configure
the area across the Kind gadgets.

Any steering could be appreciated. Xcode 13.4, iOS 15.5