Menu view not coming from leading why? it always showing from trailing of screen in SwiftUi

Question

code: with this code menu always showing in trailing... i want that to be same alignment with selectedSMS button just little down thats it.. but it always coming opposite to selectedSMS button why??? how to fix. plz guide.

struct SmsReportAllView: View {

@StateObject private var viewModel = SMSReportStafflistViewModel()
@State private var selectedSMS: String = "All SMS"


var body: some View {
    ZStack {
        
        VStack() {
            
            VStack {
                HStack {
                    Button  {
                        dismiss()
                    } label: {
                        Image(systemName: "arrow.left")
                            .font(.system(size: 25))
                            .tint(.gray)
                            .padding(.trailing, 6)
                    }
                    
                    msgTypeListView()
                    
                }
                .padding(16)
            }
            .background(
                Color.hexF4F4FC
                    .ignoresSafeArea()
            )
            
            Spacer()
        }
    }
    
    .onAppear {
        viewModel.smsTypeList() { status in
        }
    }
}

@ViewBuilder func msgTypeListView() -> some View {
    VStack{
        Menu {
            ForEach(viewModel.smsType, id: \.self) { smsType in
                Button(action: {
                    selectedSMS = "\(smsType.subject ?? "N/A")"
                    print(selectedSMS)
                }) {
                    Text(smsType.subject ?? "Unknown")
                }
            }
        }
    label: {
        HStack {
            Text(selectedSMS)
                .font(.calibriRegular(with: 18))
                .foregroundStyle(.green)
            Image("icn_dropdown")
                .padding()
            Spacer()
        }
    }
    }
}
}

o/p: want menu just below the all sms button.

Answer 1

The menu is appearing on the right because the label of your Menu consists of an HStack which includes a Spacer. The spacer causes the label to fill all the space to the right-side of the screen. It seems the menu gets shown right-aligned to the trailing edge of the label.

Try these changes:

• Change the parent container for msgTypeListView from VStack to HStack.
• Take the Spacer out of the label and move it to the parent HStack.
• You can also remove the attribute @ViewBuilder, since the function only returns a single View.

// @ViewBuilder
func msgTypeListView() -> some View {
    HStack { // 👈 HStack instead of VStack
        Menu {
            // ...
        } label: {
            HStack {
                Text(selectedSMS)
                    .font(.calibriRegular(with: 18))
                    .foregroundStyle(.green)
                Image("icn_dropdown")
                    .padding()
            }
        }
        Spacer() // 👈 Move to here
    }
}