Сделать вид придерживаться своей позиции и перекрывать других при расширении

Question

Я пытаюсь реализовать выпадающую кнопку. Кнопка имеет собственный вид FilterButton, который используется внутри ScrollView для правильного отображения всех кнопок.

Как сделать так, чтобы следующие кнопки придерживались своей позиции, нарушали вид прокрутки (я думаю, это также вызывает проблемы) и перекрывали изображение ниже при выборе.

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() )
    }
}