In my SwiftUI element view I’ve this code (a part of it)
import SwiftUI
import MapKit
import Kingfisher
import BottomSheet
struct VehiclePositionView: View {
@Surroundings(.isPresented) var isPresented
@Surroundings(.colorScheme) var colorScheme
@EnvironmentObject var themeProvider: ThemeProvider
@State var automobile: VehicleModel
@State non-public var bottomSheetPosition: BottomSheetPosition = .dynamicBottom
@State non-public var cameraPosition = MapCameraPosition.area(
MKCoordinateRegion(
middle: CLLocationCoordinate2D(latitude: 0, longitude: 0),
span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
)
)
let span: (CGFloat, CGFloat) = (0.005, 0.005)
let imgUrl = URL(string: "https://clientes.gesfrota.pt/Gesfrota_Images/1/Viaturas/viatura_14563.jpg")!
var physique: some View {
Map(place: $cameraPosition) {
Annotation(automobile.plate, coordinate: location) {
Picture(systemName: "automotive")
.foregroundColor(themeProvider.accentColor)
.background(
Circle()
.fill(Coloration.white)
.body(width: 30, top: 30)
.shadow(shade: getVehicleStatusColor(for: automobile), radius: 3)
)
}
}
.mapStyle(.normal(elevation: .lifelike, showsTraffic: true))
.onAppear {
NotificationCenter.notify(.toggleBottomBar)
cameraPosition = .area(
MKCoordinateRegion(
middle: CLLocationCoordinate2D(latitude: automobile.latitude, longitude: automobile.longitude),
span: MKCoordinateSpan(latitudeDelta: span.0, longitudeDelta: span.1)
)
)
}
.onChange(of: isPresented) {
if !isPresented {
NotificationCenter.notify(.toggleBottomBar)
}
}
.toolbar {
ToolbarItem(placement: .principal) {
VStack(spacing: 3) {
ZStack {
KFImage(imgUrl)
.fade(length: 0.25)
.resizable()
.aspectRatio(contentMode: .fill)
.body(width: 50, top: 50)
.clipShape(Circle())
.shadow(
shade: colorScheme == .darkish ? Coloration.white.opacity(0.7) : Coloration.black.opacity(0.3),
radius: 5
)
Circle()
.fill(getVehicleStatusColor(for: automobile))
.body(width: 12, top: 12)
.offset(x: 18, y: 20)
}
Textual content(automobile.plate)
Textual content("(automobile.model) (automobile.mannequin)")
.font(.footnote)
.foregroundStyle(themeProvider.secondary)
}
//.padding(.high, 50)
}
}
.toolbarBackground(.thinMaterial, for: .navigationBar)
.toolbarRole(.editor)
.toolbarVisibility(.seen, for: .navigationBar)
.bottomSheet(bottomSheetPosition: $bottomSheetPosition, switchablePositions: [.dynamicTop, .dynamicBottom]) {
VStack(alignment: .main, spacing: 8) {
Textual content(automobile.plate)
.font(.title2)
.daring()
.foregroundStyle(themeProvider.major)
Textual content("(automobile.model) (automobile.mannequin)")
.font(.callout)
.foregroundStyle(themeProvider.secondary)
}
.padding(.horizontal)
} mainContent: {
}
}
non-public var location: CLLocationCoordinate2D {
return CLLocationCoordinate2D(latitude: automobile.latitude, longitude: automobile.longitude)
}
}
I used to be anticipating to get the next output, and that is precisely what I get within the Xcode preview
However on an actual system/simulator I get this bizarre behaviour
As you may see, when the transition begins it does seem as anticipated however when the animation ends it clips the toolbar merchandise
On the mother or father view I am utilizing a NavigationStack, no particular configuration. On the element (this view) the configuration for the toolbar/navbar is supplied on this submit. I am focusing on iOS 18