SwiftUI Form Picker with text and Image

Question

I am trying to create a form picker that shows the currently selected image resource at the top level and when the user selects it to show the detail, I want it to show all of the image resources available.

Here is the relevant section of code:

                Picker("Background image:", selection: $task.background) {
                    ForEach(0 ..< backgroundImages.count) {
                        Image("Background\($0)").resizable().frame(width: 100, height: 35, alignment: .center)
                        Text("Background\($0)")
                    }
                }

The problem with this is that in the detail screen I get:

The image is blank and the image and text appear on 2 different rows.

I have tried wrapping the Image and Text lines in an HStack, but that gives a compile time error on some other line. Any suggestions would be helpful.

Answer 1

The following should compile & work well (tested with replaced system images, Xcode 11.2)

Picker("Background image:", selection: $task.background) {
    ForEach(0 ..< backgroundImages.count) { i in
        HStack {
            Image("Background\(i)").resizable().frame(width: 100, height: 35, alignment: .center)
            Text("Background\(i)")
        }
    }
}