使视图保持其位置并在扩展时使其重叠

Question

我正在尝试实现一个下拉按钮。该按钮具有自己的视图FilterButton，该视图在ScrollView内用于正确显示所有按钮。

如何使以下按钮固定在其位置，中断滚动视图（我认为这也是导致问题的原因），并在选中后重叠下面的图像。

here

struct ShelterList: View {
    @State var showContent = false
    @State private var selectedShelter: Shelter?

    @ObservedObject var session = FirebaseSession()

    var body: some View {
        VStack(alignment: .leading) {
            ListFilter()
            ForEach(self.session.shelters) { item in
                ShelterListItem(shelter: item)
                    .onTapGesture {
                        self.showContent.toggle()
                        self.selectedShelter = item
                }
                .sheet(item: self.$selectedShelter) { item in
                    ShelterDetailedView(shelter: item)
                }
            }
            .padding()
            .onAppear { UITableView.appearance().separatorStyle = .none }
        }
        .onAppear { self.session.getShelters() }
    }
}

struct ListFilter: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(alignment: .center) {
                FilterButton(title: "Gender")
                Spacer()
                FilterButton(title: "State")
                Spacer()
                FilterButton(title: "Distance")
                Spacer()
                FilterButton(title: "Availability")
            }
            .padding(.leading)
            .padding(.trailing)
        }
    }
}

...

struct FilterButton: View {

    @State var expand = false
    var title: String

    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Text(title)
                    .font(Font.custom("Helvetica Now Display Bold", size: 15))
                    .foregroundColor(Color.white)
                Image(systemName: expand ? "chevron.up" : "chevron.down")
                    .resizable()
                    .foregroundColor(Color.white)
                    .frame(width: 8, height: 5)
            }
            .onTapGesture {
                self.expand.toggle()
            }
            if expand {
                ...
            }
        }
        .padding(10)
        .background(LinearGradient(gradient: .init(colors: [Color("secondary"), Color("third")]), startPoint: .top, endPoint: .bottom))
        .cornerRadius(20)
        .animation(.spring() )
    }
}