SwiftUI TabView Embedded In Another View Problem - swift

Question

For a few time now, I have been playing with SwiftUI. I'd like to make it clear that I do have a Java and JS background, but no any Swift experience.
So the idea is:
I'd like to have a view (referred later on as main view) where the screen is divided into two parts (views). The top one will be used just like a header - picture with maybe a footer (the frosted footer in the screenshots).
Then the second part of the screen I want it to be another View that is actually a TabView. See attached screenshots of unscrolled view of the main view and
scrolled view of the main view
Currently, what I have now is:
struct CarDetailsView: View {
let car: Car
var body: some View {
ScrollView {
HeadingView(car: car)
CarDescriptionView(car: car)
.offset(y: -36)
}
.ignoresSafeArea()
}
}
Which works fine (as in the screenshots), where HeadingView is the picture with the footer, and then CarDescriptionView is the "second" view of the screen with the description. This is also the part that I'd like to make it TabView.
I thought, I can just wrap the CarDescription View inside a TabView, just like that:
struct CarDetailsView: View {
let car: Car
var body: some View {
ScrollView {
HeadingView(car: car)
TabView {
CarDescriptionView(car: car)
.offset(y: -36)
.tabItem {
Label("Description", systemImage: "car")
}
}
}
.ignoresSafeArea()
}
}
However, then I am getting this thing happening here
Note, the structure of my other View are:
struct HeadingView: View {
var car: Car
var body: some View {
VStack(spacing: 0) {
Text("25 300EUR")
.foregroundColor(.white)
.font(.title)
.bold()
.padding(.horizontal, 12)
.padding(.vertical, 4)
.background(Color.init(hexadecimal: "66B054"))
.clipShape(RoundedRectangle(cornerRadius: 8, style: .continuous))
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
.padding(16)
HStack {
Image(systemName: "car")//todo: make logo go here
.padding(.leading, 16)
.padding(.trailing, 16)
VStack(alignment: .leading, spacing: 4) {
Text("\(car.make) \(car.model)")
.font(.title2)
.bold()
HStack {
Text("\(String(car.odometer / 1000))k km |")
.font(.caption)
Text("\(String(car.year)) |")
.font(.caption)
Text("\(String(car.engine.horsepower))bhp |")
.font(.caption)
Text("20km away")
.font(.caption)
}
}
Spacer()
}
.foregroundColor(.white)
.frame(maxWidth: .infinity)
.padding(.top, 12)
.padding(.bottom, 38)
.background(
VisualEffectBlurView(blurStyle: .systemThinMaterialDark)
)
}
.frame(maxWidth: .infinity, minHeight: 500, maxHeight: 500)
.background(
Image(car.images[0])
.resizable()
.aspectRatio(contentMode: .fill)
)
.mask(
RoundedRectangle(cornerRadius: 0, style: .continuous)
)
}
}
and
struct CarDescriptionView: View {
let car: Car
var body: some View {
ScrollView {
Text("Description")
.font(.title)
.bold()
.padding(.top, 32)
.padding(.leading, 16)
.padding(.bottom, 16)
.frame(maxWidth: .infinity, alignment: .leading)
Text(car.description)
.font(.body)
.padding(.horizontal)
Text(car.description + "\n")
.font(.body)
.padding(.horizontal)
Text(car.description + "\n")
.font(.body)
.padding(.horizontal)
Text(car.description + "\n")
.font(.body)
.padding(.horizontal)
Text(car.description + "\n")
.font(.body)
.padding(.horizontal)
}
.background(.white)
.mask(
RoundedRectangle(cornerRadius: 30, style: .continuous)
)
}
}
Please note that I have also tried to place the TabView inside the CarDetailsView, but again with the same result.
Changing the ScrollView to VStack in the main component results in somewhat working view. However, then I do not get any scrolling of the header View (the car image), but only I am able to scroll within the tabbed view.
As I said at the beginning, I am really new to this, so I am not even sure if the concept is correct or not.