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?

Answer 1

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)