SwiftUI Picker: The padding of content in Picker does not work

166 Views Asked by At

Is there anyway to "padding" content in the picker? Such as Text("...").padding().

Picker(selection: $picked) {
    ForEach(0...10, id: \.self) { num in
        Text("\(num)").tag("\(num)")
            .font(.system(size: 30))
            .foregroundColor(pickedMinute == "\(num)" ? .blue : .black)
            .padding(20) //  ***It does not work***
    }
} label: {
    Text("picker")
}
2

There are 2 best solutions below

3
Benzy Neez On BEST ANSWER

What does work is the .font modifier. And what also works is .scaleEffect. Used in combination, you can get a larger font with more spacing:

Picker(selection: $picked) {
    ForEach(0...10, id: \.self) { num in
        Text("\(num)").tag("\(num)")
            .font(.system(size: 15))
            .foregroundColor(pickedMinute == "\(num)" ? .blue : .black)
    }
} label: {
    Text("picker")
}
.pickerStyle(.wheel)
.scaleEffect(2)

Screenshot

1
Hezy Ziv On

Picker in SwiftUI does not support padding, you can create a custom Picker with padding like the following:

ScrollView(.horizontal, showsIndicators: false) {
    HStack {
        ForEach(numbers, id: \.self) { number in
            Text("\(number)")
                .font(.system(size: 30))
                .foregroundColor(self.pickedNumber == number ? .blue : .black)
                .padding(20)
                .onTapGesture {
                    self.pickedNumber = number
                }
        }
    }
}