ios - How to Customize SwiftUI Menu to Display Items with Custom Layout (Image, Text, Spacer, Color Circle)? - Stack Overflow

admin管理员组

文章数量:1130349

I'm using SwiftUI's Menu with a custom layout for the menu items. Each menu item is generated using a ForEach loop over an array of objects. The goal is to display the items in the following order:

1. Image
2. Text
3. Spacer
4. A Colored Circle

However, what is being displayed doesn't match this order. Instead, the layout ends up being:

1. Text
2. Spacer
3. Image

Here's a simplified version of my code:

Menu {
    ForEach(items) { item in
        Button(action: {
            // Action for button
        }) {
            HStack {
                Image(systemName: item.iconName)
                Text(item.title)
                Spacer()
                Circle()
                    .fill(item.color)
                    .frame(width: 20, height: 20)
            }
        }
    }
} label: {
    Label("Options", systemImage: "ellipsis")
}

What I've Tried:

1. Rearranging the elements inside the HStack, but the order doesn't change.
2. Wrapping elements in a VStack or nesting additional HStacks, but the issue persists.
3. Specifying .layoutPriority() for elements, which didn't seem to have any effect in this context.

Desired Outcome: I want the menu items to appear in the exact order as I defined in the HStack: Image, Text, Spacer, Color Circle.

How can I achieve this behavior and ensure the layout matches my desired order? Is there a limitation in how Menu renders items, or am I missing something in my approach?

I'm using SwiftUI's Menu with a custom layout for the menu items. Each menu item is generated using a ForEach loop over an array of objects. The goal is to display the items in the following order:

1. Image
2. Text
3. Spacer
4. A Colored Circle

However, what is being displayed doesn't match this order. Instead, the layout ends up being:

1. Text
2. Spacer
3. Image

Here's a simplified version of my code:

Menu {
    ForEach(items) { item in
        Button(action: {
            // Action for button
        }) {
            HStack {
                Image(systemName: item.iconName)
                Text(item.title)
                Spacer()
                Circle()
                    .fill(item.color)
                    .frame(width: 20, height: 20)
            }
        }
    }
} label: {
    Label("Options", systemImage: "ellipsis")
}

What I've Tried:

1. Rearranging the elements inside the HStack, but the order doesn't change.
2. Wrapping elements in a VStack or nesting additional HStacks, but the issue persists.
3. Specifying .layoutPriority() for elements, which didn't seem to have any effect in this context.

Desired Outcome: I want the menu items to appear in the exact order as I defined in the HStack: Image, Text, Spacer, Color Circle.

How can I achieve this behavior and ensure the layout matches my desired order? Is there a limitation in how Menu renders items, or am I missing something in my approach?

本文标签：