无法在 SwiftUI 中通过 HStack 显示下拉菜单

Question

我有一个列表项需要一个下拉菜单，该菜单显示在 HStack 中其他视图的顶部。

这是我目前拥有的：

struct ListRow: View {
    @Binding var item: Item
    @State var showDropdown: Bool = false
    var body: some View {
        ZStack {
            HStack {
                VStack {
                    Text(item.name)
                        .fixedSize(horizontal: false, vertical: true)
                        .frame(maxWidth: .infinity, alignment: .topLeading)
                    ProgressView(value: item.percentDone)
                }.padding(.all, 10)
                Button(action: {
                    self.showDropdown.toggle()
                }, label: {
                    Image(systemName: "ellipsis.circle")
                }).buttonStyle(BorderlessButtonStyle())
                    .overlay (
                        VStack {
                            if self.showDropdown {
                                Spacer(minLength: 40)
                                Text("TEST")
                                    .onTapGesture {
                                        print("Delete")
                                    }
                            }
                        }.zIndex(10)
                    )
            }
        }
    }
}

但是当我运行它并单击按钮时，这就是我看到的

看起来 Text 没有显示，因为视图 overflow/overlap 与 HStack 的其余部分，但我认为添加 .zIndex 会将下拉列表放在顶部ZStack

中的其余观点

Answer 1

我想出了一个更好的解决方案。

struct ListRow: View {
    @Binding var item: Item
    var body: some View {
        HStack {
            VStack {
                Text(item.name)
                    .fixedSize(horizontal: false, vertical: true)
                    .frame(maxWidth: .infinity, alignment: .topLeading)
                ProgressView(value: item.percentDone)
            }.padding(.all, 10)
            Menu {
                Button("Delete", action: {
                    print("Delete")
                })
            } label: {
                
            }
            .menuStyle(BorderlessButtonMenuStyle())
            .frame(width: 10, height: 10, alignment: .center)
        }
    }
}

Answer 2

只需为您的 overlay view 设置 frame 使其超过其主视图的大小

.overlay (
    VStack {
        if self.showDropdown {
            Spacer(minLength: 40)
            Text("TEST")
                .onTapGesture {
                    print("Delete")
                }
        }
    }.frame(width: 100)
)

或者您可以尝试其他方法，例如 ZStack 或 Menu（您提到了更好的解决方案）

无法在 SwiftUI 中通过 HStack 显示下拉菜单

Can't show dropdown menu over HStack in SwiftUI

macos

swift

swiftui