如何在 swiftUI 中将叠加视图置于前面？

Question

我正在尝试创建一个像这样的下拉列表预期的图像，大多数教程建议使用覆盖相同的内容，但是在实现时我得到了 UI输出图像 它位于下一个视图后面，而这又没有给出我想要的外观，如何将覆盖视图置于前面，这在 UIKit 中似乎很容易，但似乎不适用于 Swift UI，有什么建议吗？

使用 .zIndex(1) 会显示它，但是当它嵌入到列表中时它不起作用，有什么建议吗？示例代码

import SwiftUI

struct DropdownOption: Hashable {
    let key: String
    let value: String
    
    public static func == (lhs: DropdownOption, rhs: DropdownOption) -> Bool {
        return lhs.key == rhs.key
    }
}

struct DropdownRow: View {
    var option: DropdownOption
    var onOptionSelected: ((_ option: DropdownOption) -> Void)?
    
    var body: some View {
        Button(action: {
            if let onOptionSelected = self.onOptionSelected {
                onOptionSelected(self.option)
            }
        }) {
            HStack {
                Text(self.option.value)
                    .font(.system(size: 14))
                    .foregroundColor(Color.black)
                Spacer()
            }
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 5)
    }
}

struct Dropdown: View {
    var options: [DropdownOption]
    var onOptionSelected: ((_ option: DropdownOption) -> Void)?
    
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 0) {
                ForEach(self.options, id: \.self) { option in
                    DropdownRow(option: option, onOptionSelected: self.onOptionSelected)
                }
            }
        }
        .frame(minHeight: CGFloat(options.count) * 30, maxHeight: 250)
        .padding(.vertical, 5)
        .background(Color.white)
        .cornerRadius(5)
        .overlay(
            RoundedRectangle(cornerRadius: 5)
                .stroke(Color.gray, lineWidth: 1)
        )
    }
}

struct DropdownSelector: View {
    @State private var shouldShowDropdown = false
    @State private var selectedOption: DropdownOption? = nil
    var placeholder: String
    var options: [DropdownOption]
    var onOptionSelected: ((_ option: DropdownOption) -> Void)?
    private let buttonHeight: CGFloat = 45
    
    var body: some View {
        Button(action: {
            self.shouldShowDropdown.toggle()
        }) {
            HStack {
                Text(selectedOption == nil ? placeholder : selectedOption!.value)
                    .font(.system(size: 14))
                    .foregroundColor(selectedOption == nil ? Color.gray: Color.black)
                
                Spacer()
                
                Image(systemName: self.shouldShowDropdown ? "arrowtriangle.up.fill" : "arrowtriangle.down.fill")
                    .resizable()
                    .frame(width: 9, height: 5)
                    .font(Font.system(size: 9, weight: .medium))
                    .foregroundColor(Color.black)
            }
        }
        .padding(.horizontal)
        .cornerRadius(5)
        .frame(width: .infinity, height: self.buttonHeight)
        .overlay(
            RoundedRectangle(cornerRadius: 5)
                .stroke(Color.gray, lineWidth: 1)
        )
        .overlay(
            VStack {
                Image("top-image")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .scaledToFit()
                if self.shouldShowDropdown {
                    Spacer(minLength: buttonHeight + 10)
                    Dropdown(options: self.options, onOptionSelected: { option in
                        shouldShowDropdown = false
                        selectedOption = option
                        self.onOptionSelected?(option)
                    })
                }
            }, alignment: .topLeading
        )
        .background(
            RoundedRectangle(cornerRadius: 5).fill(Color.white)
        )
    }
}

struct DropdownSelector_Previews: PreviewProvider {
    @State private static var address: String = ""
    
    static var uniqueKey: String {
        UUID().uuidString
    }
    
    static let options: [DropdownOption] = [
        DropdownOption(key: uniqueKey, value: "Sunday"),
        DropdownOption(key: uniqueKey, value: "Monday"),
        DropdownOption(key: uniqueKey, value: "Tuesday"),
        DropdownOption(key: uniqueKey, value: "Wednesday"),
        DropdownOption(key: uniqueKey, value: "Thursday"),
        DropdownOption(key: uniqueKey, value: "Friday"),
        DropdownOption(key: uniqueKey, value: "Saturday")
    ]
    
        static var previews: some View {
    VStack(spacing: 20) {
        List {
            ForEach(1..<4) { index in
                HStack(){
                    DropdownSelector(
                        placeholder: "Day of the week",
                        options: options,
                        onOptionSelected: { option in
                            print(option)
                        })
                        .padding(.horizontal)
                        .zIndex(1)
                    
                    DropdownSelector(
                        placeholder: "Day of the week",
                        options: options,
                        onOptionSelected: { option in
                            print(option)
                        })
                        .padding(.horizontal)
                        
               }.zIndex(1)
                
           }

        }
        Group {
            TextField("Full Address", text: $address)
                .font(.system(size: 14))
                .padding(.horizontal)
        }
        .frame(width: .infinity, height: 45)
        .overlay(
            RoundedRectangle(cornerRadius: 5)
                .stroke(Color.gray, lineWidth: 1)
        )
        .padding(.horizontal)
    }
}
   

Answer 1

你需要应用你的.zIndex(1)修饰符来HStack包含你DropdownSelector这样的

HStack(){
    DropdownSelector(
        placeholder: "Day of the week",
        options: options,
        onOptionSelected: { option in
            print(option)
        })
    .padding(.horizontal)
    
    DropdownSelector(
        placeholder: "Day of the week",
        options: options,
        onOptionSelected: { option in
            print(option)
        })
    .padding(.horizontal)
}
.zIndex(1)