Thursday, September 29, 2022
HomeiOS Developmentios - SwiftUI Picker in Form - Can't Dynamically Size the Form...

ios – SwiftUI Picker in Form – Can’t Dynamically Size the Form Space

[ad_1]

I’m struggling with a view where I want to have multiple pickers embedded in
other views. When I wrap the pickers in a Form, I get the desired behavior for the
picker but there is a lot of extra space around the pickers that I can’t seem to
automatically adjust.

This is an example – the space in the red outline seems to be determined by the other
view elements not the size of the picker.

enter image description here

I can, of course, hard-code a frame height for the Form but that is trial and error
and would only be specific to the device and orientation. I have tried multiple
versions of Stacks inside Stacks with padding, GeometryReader etc, but I have not come up with any
solution. As an aside, I DO want the picker labels, otherwise I could just remove
the Form.

I also tried setting UITableView.appearance().tableFooterView in an init() but that did not work either.

Here is a simplified version:

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

    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                HStack {
                    Spacer()
                    Text("Compare up to 3")
                        .font(.caption)
                    Spacer()
                }//h
            
                Form {//for pickers
                        Picker(selection: $selectedNumber1, label: Text("A")) {
                            ForEach(0..<10) {
                                Text("\($0)")
                            }
                        }//picker

                        Picker(selection: $selectedNumber2, label: Text("B")) {
                            ForEach(0..<10) {
                                Text("\($0)")
                            }
                        }//picker

                        Picker(selection: $selectedNumber3, label: Text("C")) {
                            ForEach(0..<10) {
                                Text("\($0)")
                            }
                        }//picker
                }//form for pickers
                .padding(.horizontal, 10)
                //.frame(height: 200) //don't want to hard code this
            
                VStack(alignment: .leading) {
                    HStack {
                        Text("A")
                            .frame(width: 100)
                        Text("B")
                            .frame(width: 100)
                        Text("C")
                            .frame(width: 100)
                    }
                    .padding(.horizontal, 10)
                
                    ScrollView(.vertical, showsIndicators: false) {
                        VStack(alignment: .leading){
                            Text("A title line")
                                .font(.headline)
                                .padding(.vertical, 5)
                            HStack {
                                Text("Number")
                                    .frame(width: 100)
                                Text("Number")
                                    .frame(width: 100)
                                Text("Number")
                                    .frame(width: 100)
                            }
                            Text("Another title line")
                                .font(.headline)
                                .padding(.vertical, 5)
                            HStack {
                                Text("Something")
                                    .frame(width: 100)
                                Text("Something")
                                    .frame(width: 100)
                                Text("Something")
                                    .frame(width: 100)
                            }
                            Text("A Third title line")
                                .font(.headline)
                                .padding(.vertical, 5)
                            HStack {
                                Text("More")
                                    .frame(width: 100)
                                Text("More")
                                    .frame(width: 100)
                                Text("More")
                                    .frame(width: 100)
                            }
                        }
                    }//scroll
                    .padding(.horizontal, 10)
                }
                .navigationBarTitle("Compare Three", displayMode: .inline)
            }
        }//nav
    }//body
}//struct

Interestingly, I am able to get a solution by removing the form and wrapping each
picker in a menu, like this:

Menu {
    Picker(selection: $selectedNumber2, label: EmptyView()) {
        ForEach(0..<10) {
            Text("\($0)")
        }
    }//picker
} label: {
    HStack {
    Text("B")
        Spacer()
        Image(systemName: "chevron.right")
            .resizable()
            .frame(width: 14, height: 14)
    }//h
}//menu label

However, I still like the look of the Form better if I could automatically configure
the space around the Form items.

Any guidance would be appreciated. Xcode 13.4, iOS 15.5

[ad_2]

Source link

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments