zIndex for Grid Items

[gabrielleyva]

Issue

Scaling a view within the Grid causes incorrect overlay.

Description

I attempted to manipulate the zIndex by wrapping my Grid Item View in a ZStack and changing the zIndex whenever that particular view scaled.

However, it does not appear to have any effect.

Details

Here is a sample code snippet of my Grid implementation:

    var body: some View {
        Grid(tracks: layout.tracks) {
            ForEach(viewModel.items, id: \.self) { item in
                ZStack {
                    LayoutItem(item, action: { action in
                        viewModel.handle(action, for: item)
                    })
                }
                .zIndex(item.zIndex)
                .gridSpan(column: item.type.column,
                          row: item.type.row)
            }
        }
        .gesture(drag)
        .coordinateSpace(name: GridLayout.NAME_SPACE)
    }

Here is a code snippet of my toggle scale logic

    public func handle(drag location: CGPoint?) {
        for var item in items {
            var inBounds = false
            var scale: GridLayoutItemScale = .normal
            var zIndex: Double = 0
            if let location = location {
                inBounds = item.bounds.contains(location)
                scale = inBounds ? .large : .normal
                zIndex = inBounds ? 1 : 0
            }
            item.scale = scale
            item.zIndex = zIndex
            setItem(item)
        }
    }

Demo

Conclusion

I looked through the documentation and wasn't able to find anything specific to zIndex manipulation.

Is it possible to alter the zIndex for Grid Items within the Grid to avoid bottom overlay?

If not, it would be a great addition to this package! I've been using it a lot and it is FANTASTIC!

[Joenahm1937]

+1
Would be super helpful for this to be implemented

[Chris-BMA]

+1 This ^^^

[glennposadas]

Up!