ios – Can a mother or father Secure Space Inset respect toolbars of youngsters?

In your screenshot, you’ve gotten a baby view (simply Coloration.grey) which has a toolbar. Within the toolbar, there’s a cancel button. If I perceive appropriately, you need the button to seem above the purple protected space inset that’s reserved by the NavigationStack.

If this interpretation is appropriate, you could possibly strive utilizing a VStack to mix the NavigationStack with the content material that you just wish to be under it. There isn’t any want to make use of .safeAreaInset so as to add the decrease content material:

VStack(spacing: 0) {
    NavigationStack {
        Coloration.grey
            .ignoresSafeArea()
            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    Button(function: .cancel) {
                        //
                    }
                }
            }
            .safeAreaInset(edge: .backside, spacing: 0) {
                Coloration.inexperienced.opacity(0.5)
                    .body(top: 50)
            }
    }
    Coloration.purple.opacity(0.5)
        .ignoresSafeArea()
        .body(top: 50)
}

For those who remark out the .toolbar modifier, the inexperienced zone touches the purple zone:

If as a substitute you at all times need the toolbar to be on the backside and the purple zone needs to be above it, then you could possibly strive transferring the modifier .safeAreaInset with the purple content material to the kid. You’ll be able to connect a couple of .safeAreaInset:

NavigationStack {
    Coloration.grey
        .ignoresSafeArea()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button(function: .cancel) {
                    //
                }
            }
        }
        .safeAreaInset(edge: .backside, spacing: 0) {
            Coloration.inexperienced.opacity(0.5)
                .body(top: 50)
        }
        .safeAreaInset(edge: .backside, spacing: 0) {
            Coloration.purple.opacity(0.5)
                .body(top: 50)
                .padding(.backside, 10) // Constants.spacingVertical
        }
}

Alternatively, if you wish to preserve the safeAreaInset with the purple content material connected to the NavigationStack then you could possibly strive including padding when a toolbar is exhibiting:

NavigationStack {
    Coloration.grey
        .ignoresSafeArea()
        .toolbar {
            ToolbarItem(placement: .bottomBar) {
                Button(function: .cancel) {
                    //
                }
            }
        }
        .safeAreaInset(edge: .backside, spacing: 0) {
            Coloration.inexperienced.opacity(0.5)
                .body(top: 50)
        }
        .safeAreaPadding(.backside, 50 + 10) // = top of outer protected space inset
}
.safeAreaInset(edge: .backside, spacing: 0) {
    Coloration.purple.opacity(0.5)
        .body(top: 50)
        .padding(.backside, 10) // Constants.spacingVertical
}
.safeAreaPadding(.backside, 44) // estimated top of toolbar

This method is much less exact, as a result of you want to guess the peak of the toolbar. You may additionally must make the padding depending on a state variable (a Bool will do). The state variable might be up to date within the mother or father view concurrently the navigation vacation spot adjustments, or it might be handed as a binding to the kid views. The kid views can then set the flag in response to whether or not they have a toolbar or not.