How to add Picker for images in SwiftUI on WatchOS

Question

I'm trying to migrate from a storyboard to SwiftUI for my watch app. In the storyboard I have a WKInterfacePicker where I set the height to 100, and then added the images as WKImage objects inside a WKPickerItem.

When I try to do the same thing with SwiftUI I'm getting different results. I used this code:

Picker("", selection: $viewModel.temperature) {
    ForEach(1 ..< 5) { i in
        Image("temp-\(i)")
            .resizable()
            .aspectRatio(contentMode: .fill)
    }
}
.frame(height: 100)

Neither .fill nor .fit makes a single image take up the whole row of the picker like it looked with WKInterfacePicker. What am I doing wrong?

What is your desired result? Do you want the image to take up the whole row while maintaining the aspect size, but also getting cropped to the bounds of the row? — Tamás Sengel, Dec 06 '20 at 18:39
@TamásSengel that’s correct, just like the older control did automatically. — Gargoyle, Dec 06 '20 at 18:40

Tamás Sengel · Answer 1 · 2020-12-07T06:35:02.137

Using this center-crop answer from vacawama.

The image's height is a magic number because it won't change (maybe with a watchOS update in the future) and if there's a GeometryReader inside the picker, it will display weird UI behavior.

Picker("", selection: $temperature) {
    ForEach(1 ..< 5) { i in
        Image("temp-\(i)")
            .resizable()
            .scaledToFill()
            .frame(height: 30, alignment: .center)
            .clipped()

    }
}
.frame(height: 100)

How to add Picker for images in SwiftUI on WatchOS

1 Answers1