SwiftUI中List内.menuOrder(.priority)失效及菜单调整方案咨询

问题根源 #

List的单元格（对应UIKit的UITableViewCell）自带一套contextMenu渲染逻辑，会覆盖SwiftUI层面的.menuOrder(.priority)设置，这就是为什么该修饰符在List外生效、内部失效的原因。

方案1：用UIKit桥接完全控制菜单顺序 #

通过UIViewRepresentable包装SwiftUI视图，借助UIKit的UIContextMenuConfiguration构建菜单，完全自定义选项顺序：

import SwiftUI

struct ContextMenuWrapper<Content: View>: UIViewRepresentable {
    let content: Content
    let menuTitles: [String]
    let menuActions: [() -> Void]
    
    init(content: Content, menuTitles: [String], menuActions: [() -> Void]) {
        self.content = content
        self.menuTitles = menuTitles
        self.menuActions = menuActions
    }
    
    func makeUIView(context: Context) -> UIHostingController<Content> {
        let controller = UIHostingController(rootView: content)
        controller.view.isUserInteractionEnabled = true
        return controller
    }
    
    func updateUIView(_ uiView: UIHostingController<Content>, context: Context) {
        uiView.rootView = content
        uiView.view.addInteraction(UIContextMenuInteraction(delegate: context.coordinator))
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(titles: menuTitles, actions: menuActions)
    }
    
    class Coordinator: NSObject, UIContextMenuInteractionDelegate {
        let titles: [String]
        let actions: [() -> Void]
        
        init(titles: [String], actions: [() -> Void]) {
            self.titles = titles
            self.actions = actions
        }
        
        func contextMenuInteraction(_ interaction: UIContextMenuInteraction, configurationForMenuAtLocation location: CGPoint) -> UIContextMenuConfiguration? {
            return UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { [weak self] _ in
                guard let self = self else { return UIMenu() }
                let menuItems = zip(self.titles, self.actions).map { title, action in
                    UIAction(title: title, handler: { _ in action() })
                }
                // 这里的数组顺序就是菜单最终显示的顺序，可随意调整
                return UIMenu(title: "", children: menuItems)
            }
        }
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        List {
            Color.gray.frame(height: 400)
            ContextMenuWrapper(
                content: Text("Numbers").padding(),
                menuTitles: ["4", "3", "2", "1"], // 自定义倒序显示
                menuActions: [
                    { print("点击了4") },
                    { print("点击了3") },
                    { print("点击了2") },
                    { print("点击了1") }
                ]
            )
        }
    }
}

方案2：让菜单固定显示在底部 #

如果需要菜单强制显示在屏幕底部，可以放弃原生contextMenu，改用长按手势触发底部弹窗：

struct ContentView: View {
    @State private var showBottomMenu = false
    
    var body: some View {
        List {
            Color.gray.frame(height: 400)
            Text("Numbers")
                .padding()
                .onLongPressGesture {
                    showBottomMenu = true
                }
                .sheet(isPresented: $showBottomMenu) {
                    VStack(spacing: 0) {
                        Button("1") {
                            print("点击了1")
                            showBottomMenu = false
                        }
                        .frame(height: 50)
                        .border(.gray.opacity(0.2))
                        
                        Button("2") {
                            print("点击了2")
                            showBottomMenu = false
                        }
                        .frame(height: 50)
                        .border(.gray.opacity(0.2))
                        
                        Button("3") {
                            print("点击了3")
                            showBottomMenu = false
                        }
                        .frame(height: 50)
                        .border(.gray.opacity(0.2))
                        
                        Button("4") {
                            print("点击了4")
                            showBottomMenu = false
                        }
                        .frame(height: 50)
                        .border(.gray.opacity(0.2))
                        
                        Button("取消") {
                            showBottomMenu = false
                        }
                        .frame(height: 50)
                        .foregroundColor(.red)
                    }
                    .presentationDetents([.height(300)]) // 固定弹窗高度
                }
        }
    }
}

补充说明 #

• 方案1保留了原生contextMenu的长按弹出样式，只是通过UIKit绕过List的限制，能精准控制菜单顺序。
• 方案2是模拟底部菜单的交互，适合需要强制底部显示的场景，样式可完全自定义。

内容的提问来源于stack exchange，提问作者fer0n