Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display a Picker in Swiftui completely in a ScrollView or VStack with other components?

As soon as I put a Picker in a ScrollView or VStack and there is some more code in it like a ForEach Loop, only the Picker-label is shown.

enter image description here

I wonder why, because outside of the Scrollview or alone it is displayed correctly.

Here is the code:

@State private var exercises = ["Unterarmstütz", "Dehnen", "Kopfstand", "Handstand"]
@State private var selectedExercise = "Plank"
@State private var selectedTimeIndex = 60

var body: some View {
    VStack {
       ScrollView {
            Picker(selection: $selectedTimeIndex, label: Text("select Time")) {
                Text("Option 1")
                Text("Option 2")
                Text("Option 3")
            }
            ForEach(exercises.identified(by: \.self)) { exercise in
                Button(action: {
                    self.selectedExercise = String("exercise")
                }) {
                    Text("exercise")
                }
            }
            
        }
    }
    
}
like image 373
Celina Avatar asked Jul 18 '19 09:07

Celina


1 Answers

The Problem is ScrollView, If you place any content inside of ScrollView then you have to set frame of it.

Here you can do that,

@State private var exercises = ["Unterarmstütz", "Dehnen", "Kopfstand", "Handstand"]
@State private var selectedExercise = "Plank"
@State private var selectedTimeIndex = 60

var body: some View {

       //use GeometryReader for height & weight//

        GeometryReader { geometry in       

            ScrollView() {

                VStack {

                    Picker(selection: self.$selectedTimeIndex, label: Text("select Time")) {
                        Text("Option 1")
                        Text("Option 2")
                        Text("Option 3")
                    }.frame(width: geometry.size.width, height: geometry.size.height, alignment: .center)

                    ForEach(self.exercises, id: \.self) { exercise in
                        Button(action: {
                            self.selectedExercise = String("exercise")
                        }) {
                            Text("exercise")
                        }
                    }
                }
            }
        }
    }

Note: I'm using Xcode 11 Beta 4

like image 90
Ketan Odedra Avatar answered Sep 30 '22 12:09

Ketan Odedra