Custom Splitter contents lag behind animation

[eduo]

Hi.

I have a custom splitter where in the middle there's a drag icon (three lines) and on the right a button to collapse down or return back.

I must be doing something wrong, since while everything works, the splitter itself lags. behind the icon for the button that triggers the resize animation.

Can be tested by pasting this in a new swift view file (preview with iPhone). The preview has vertical coloured spacers for top and bottom):

` import Foundation import SwiftUI import SplitView

struct listListsSplitter: SplitDivider { @ObservedObject var layout: LayoutHolder @ObservedObject var hide: SideHolder @ObservedObject var styling: SplitStyling @State private var hideButton: Bool = false

var body: some View {
        ZStack{
        Image(systemName: "line.3.horizontal")
            .foregroundColor(.white)
            if !hideButton {
                Button(
                    action: { withAnimation { hide.toggle() } },
                    label: {
                        hide.side == nil ?
                        Image(systemName: "platter.filled.bottom.and.arrow.down.iphone")
                        :
                        Image(systemName: "platter.filled.top.and.arrow.up.iphone")

                    }
                )
                .buttonStyle(.borderless)
                .accentColor(.white)
                .font(.title)
                .frame(maxWidth: .infinity, alignment: .trailing)
            }
    }
    .frame(maxWidth: .infinity)
    .background(.gray)
    }

}

Preview {

    let layout = LayoutHolder()
    let hide = SideHolder()

    var thisSplit =
        VSplit(
            top: {
                VStack {
                    Spacer().background {Color.teal.frame(minWidth: 10, minHeight: 10)}
                }
            },
            bottom: {
            VStack {
                Spacer().background {Color.yellow.frame(minWidth: 10, minHeight: 10)}
            }
        }
        )
        .hide(hide)
        .constraints(minPFraction: 0.15, minSFraction: 0.1)
        .splitter { listListsSplitter(layout: layout, hide: hide, styling: SplitStyling(visibleThickness: 20)) }
return thisSplit

} `

This screenshot shows the splitter catching up with the label:

And this one shows the final state:

[stevengharris]

Just to double-check, it's the noticeable lag between the button and the splitter it's contained-by that shows up on toggling hide/show? I think I need to do a matchedGeometryEffect, but let me take a look.

[eduo]

Just to double-check, it's the noticeable lag between the button and the splitter it's contained-by that shows up on toggling hide/show? I think I need to do a matchedGeometryEffect, but let me take a look.

Yes. The button contained is switched (to reflect the direction of the click in the next position) but it's drawn directly at the destination. Doesn't seem to "travel" with the animation and the splitter. The splitter then catches up to it.

[stevengharris]

If you're on iOS 17, adding in geometryGroup() to the ZStack fixes the issue, I believe. To be clear, in your example:

    var body: some View {
        ZStack{
            Image(systemName: "line.3.horizontal")
                .foregroundColor(.white)
            if !hideButton {
                Button(
                    action: { withAnimation { hide.toggle() } },
                    label: {
                        hide.side == nil ?
                        Image(systemName: "platter.filled.bottom.and.arrow.down.iphone")
                        :
                        Image(systemName: "platter.filled.top.and.arrow.up.iphone")

                    }
                )
                .buttonStyle(.borderless)
                .accentColor(.white)
                .font(.title)
                .frame(maxWidth: .infinity, alignment: .trailing)
            }
        }
        .frame(maxWidth: .infinity)
        .background(.gray)
        .geometryGroup()
    }

Not sure what the easy pre-iOS17 fix would be, frankly.

[eduo]

Thanks! This worked well. iOS17 as a requirement is OK.