Hi,
I'm trying to create a custom bottom toolbar for my app and want to use same fade-blur effect as iOS uses under navigation and tab bars. Having trouble doing that.
Here is what I tried:
Screenshot 1: putting my custom view in a toolbar/ToolBarItem(placement: .bottomBar). This works only in NavigationStack, and it adds a glass pane that I do not want (I want to put a custom component there that already has correct glass pane)
Screenshot 2: using safeAreaBar or safeAreaInset in any combination with NavigationStack and/or .scrollEdgeEffectStyle(.soft, for: .bottom). Shows my component correctly, but does not use fade-blur.
Can you please help me to find out the correct way of doing that? Thanks!
^ Screenshot 1
^ Screenshot 2
Test code:
struct ContentView2: View {
var body: some View {
NavigationStack {
ScrollView(.vertical) {
VStack {
Color.red.frame(height: 500)
Color.green.frame(height: 500)
}
}
.ignoresSafeArea()
.toolbar() {
ToolbarItem(placement: .bottomBar) {
HStack {
Text("bottom")
Spacer()
Text("text content")
}
.bold().padding()
.glassEffect().padding(.horizontal)
}
}
}
}
}
2
1
392