Content inside Picker overlaps when the font size increases in SwiftUI

Question

struct ContentView: View {
   @State private var selectedNumber = 0
  // var numbersArray - This will be the array

   var body: some View {
      VStack {

        Picker("Number Picker", selection: $selectedNumber) {
            ForEach(0..<Int(numbersArray.count)) {
                Text("\($0 + 1)").font(.system(size: 60))
            }
        }
      }
   }
}

I am creating a Picker for selecting numbers in Watchkit. When I try to increase the font size the numbers are overlapping. How to make the Picker content resize automatically so that the contents does not overlap.

score 0 · Accepted Answer · answered Mar 09 '20 at 16:37

You could add something like Spacer():

struct TestSwiftUIView: View {
       @State private var selectedNumber = 0
       var numbersArray = [1,2,3,4,5,6]

       var body: some View {
          VStack {

            Picker("Number Picker", selection: $selectedNumber) {
                ForEach(0..<Int(numbersArray.count)) {
                    Spacer()
                    Text("\($0 + 1)").font(.system(size: 60))

                }
            }
          }
       }
    }

It's just my first Idea, probably not the best solution.

Content inside Picker overlaps when the font size increases in SwiftUI

1 Answers1