Overlay without drivingScrollview

[martindaum]

I've been stuck at another issue, I try to create a layout with 3 notches (0, 0.3 & 0.9 fractional height). I do not want a driving scrollview in the middle position, as the user should be able to interact with the other UI. The height of the ScrollView is wrong in that case and always has the height of the largest notch, so I am not able to scroll to the bottom. The behaviour seems to work only, when a contained ScrollView is used as a drivingScrollView. I tried to use the translation to update the overlay contents, but that results in very poor performance and a lot of glitches.

[gaetanzanella]

Hi @martindaum, 1.1.0 will integrate an adjustment content mode.

You can now force the content to have the same height as the overlay:

private var behavior: some DynamicOverlayBehavior {
    MagneticNotchOverlayBehavior<Notch> { notch in
        // ...
    }
    .contentAdjustmentMode(.stretch)
}

It should do the trick. Let me know ;)

[martindaum]

It does what it should in terms of fixing the scrollview issue, but there is a glitch when scrolling down. The overlay resizes immediately. We could live with that, but the other issue arises, is when using the stretch mode, the overlay always stays above the safe area even if it should be hidden.

[gaetanzanella]

could you share a sample code?

[hafnch05]

Hey. Answering for @martindaum. Based on your README example, following small sample shows the "Header" Text in the safe area when using .contentAdjustmentMode(.stretch), while without it "Header" gets hidden.

enum Notch: CaseIterable, Equatable {
    case hidden, min, max
}

struct ContentView: View {

    @State private var notch = Notch.min

    var body: some View {
        Button("Show/Hide") {
            withAnimation {
                notch = notch == .hidden ? .min : .hidden
            }
        }
        .dynamicOverlay(myOverlayContent)
        .dynamicOverlayBehavior(myOverlayBehavior)
        .ignoresSafeArea()
    }

    var myOverlayContent: some View {
        VStack {
            Text("Header")
                .draggable()
            
            List {
                Text("Row 1")
                Text("Row 2")
                Text("Row 3")
            }
        }
    }

    var myOverlayBehavior: some DynamicOverlayBehavior {
        MagneticNotchOverlayBehavior<Notch> { notch in
            switch notch {
            case .max:
                return .fractional(0.8)
            case .min:
                return .fractional(0.3)
            case .hidden:
                return .fractional(0.0)
            }
        }
        .disable(.hidden)
        .notchChange($notch)
        .contentAdjustmentMode(.stretch)
    }
}