I'm using a ForEach within a horizontal ScrollView to display a list of movies from my movies array. I want to make an interaction like Netflix where the background updates with the an image, movie description, etc. based on the item currently in focus.

This is the best solution I've managed to come up with so far but its very far off.

My MainMenuView:

struct MainMenuView: View {

    @ObservedObject var vm = MainMenuViewModel()

    var body: some View {
        VStack {
            Text("Movies")
                .font(.title3.weight(.semibold))
                .frame(maxWidth: .infinity, alignment: .leading)

            ScrollView(.horizontal) {
                LazyHStack {
                    ForEach(vm.selections) { selection in
                        Button {
                            print("Hello, World!")
                        } label: {
                            ZStack {
                                SelectionPreview(selection: selection)
                                    .frame(maxWidth: UIScreen.main.bounds.width, maxHeight: UIScreen.main.bounds.height, alignment: .bottom)
                                Image(selection.thumbnail)
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: 500, height: 281)
                            }
                        }
                        .cornerRadius(32)
                        .buttonStyle(.plain)
                    }
                }
            }
        }
    }
}

My SelectionPreview:

struct SelectionPreview: View {

    @State var selection: Movie
    @Environment(\.isFocused) var isFocused: Bool

    var body: some View {
        Image(isFocused ? selection.backdrop : "")
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}

The above code does manage to update a background based on the current item in focus but all the other items in the list get pushed to the side since the View is now the size of the background image.

I also tried to set a background on the entire VStack instead but this didn't work. I think because the Vstack on its own is not focusable:

Something like this:

struct MainMenuView: View {
    var body: some View {
        VStack {
            ScrollView(.horizontal) {
                [...]
            }
        }
        .background(
            SelectionPreview()
        )
    }
}

Any help would be appreciated!