SwiftUI Picker selection trailing alignment

Question

I am fairly new to SwiftUI and trying to figure out how to achieve trailing alignment for the Picker view selection. Eg for UIKit, in a normal UITableView cell, you can have a Right Detail cell with a disclosure indicator.

I have tried a few other solutions here, here, here essentially HStack with Spacer, without hstack, without spacers, frame alignments, combination of fixedSize, etc., and haven't had any success. I am fairly certain that I am missing on something really stupid and simple.

Here's the code that I am using

class SwiftUITestData: ObservableObject {
    @Published var selection: String
    init(selection: String) {
        self.selection = selection
    }
}

struct SwiftUITestContainer: View {
    @ObservedObject var selectionData: SwiftUITestData
    var body: some View {
        SwiftUITest(selection: $selectionData.selection)
    }
}

struct SwiftUITest: View {
    @Binding var selection: String
    var dummyTextArray = ["Reference contains scanned text", "Blah blah blah blah blah", "blah2 blah2 blah2 blah2"]
    var body: some View {
        Form {
            Section() {
                HStack {
                    Text("Type").fixedSize()
                    Spacer()
                    Picker("", selection: $selection) {
                        ForEach(0..<dummyTextArray.count) { index in
                            Text(dummyTextArray[index])
                        }
                    }
                    .padding(.top, 5)
                    .padding(.bottom, 5)
                    .multilineTextAlignment(.trailing)
                }
                
            }
        }
    }
}

#Preview {
    SwiftUITestContainer(selectionData: SwiftUITestData(selection: "Reference contains scanned text"))
}

Following is what I am seeing with the above code.

Following is what I desire with the trailing alignment

Ignore the chevron, the above example is purely for alignment of the right detail. The drop-down selection is what I desire along with trailing alignment for selection.

Answer 1

Sounds like a problem picker style can solve for you. You can use .navigationLink if you want the chevron to the right and navigate the user to a new screen to make the selection. Here's an example on how you can do that:

 class SwiftUITestData: ObservableObject {
    @Published var selection: String
    init(selection: String) {
        self.selection = selection
    }
}

struct SwiftUITestContainer: View {
    @ObservedObject var selectionData: SwiftUITestData
    var body: some View {
        SwiftUITest(selection: $selectionData.selection)
    }
}

struct SwiftUITest: View {
    @Binding var selection: String
    var dummyTextArray = ["Reference contains scanned text", "Blah blah blah blah blah", "blah2 blah2 blah2 blah2"]
    var body: some View {
        NavigationStack {
            Form {
                Section {
                        Picker("Type", selection: $selection) {
                            ForEach(0..<dummyTextArray.count) { index in
                                Text(dummyTextArray[index])
                            }
                        }
                        .pickerStyle(.navigationLink)
                        .padding(.top, 5)
                        .padding(.bottom, 5)
                        .multilineTextAlignment(.trailing)
                    }
                }
        }
    }
}