No, that's not the best way to do what you want.
The reason you got "Hello World!" with a red background is because of this:
Text("Hello, World!")
.background(RoundedRectangle(cornerRadius: 25.0).fill(Color.red))
You applied the .background modifier to the Text item, so just the text was given the red background.
What you want to do is use a ZStack. Just like HStack is a horizontal stack and VStack is a stack along the vertical axis, a ZStack is a stack along the z-axis.
Put a rectangle inside the ZStack and it will become the background, then you layer your content on top, i.e.:
struct DashboardView: View {
var body: some View {
HStack {
VStack {
VStack {
ZStack {
RoundedRectangle(cornerRadius: 25.0)
.fill(Color.red)
Text("Text 1")
}
}
VStack {
ZStack {
RoundedRectangle(cornerRadius: 25.0)
.fill(Color.green)
Text("Text 2")
}
}
}
VStack {
ZStack {
RoundedRectangle(cornerRadius: 25.0)
.fill(Color.blue)
VStack {
Spacer()
Text("Text 3")
Spacer()
Text("Text 4")
Spacer()
}
}
}
}
.foregroundStyle(.white)
.frame(height: 200)
.padding()
}
}
The ordering is important, for both content and modifiers. If you reverse the RoundedRectangle(...) and Text you won't see the text because the rectangle is in front of it, i.e.:
Text("Text 1")
RoundedRectangle(cornerRadius: 25.0)
.fill(Color.red)
By the way, .foregroundColor() is deprecated. While it works now, it will be removed in a later version of the OS, so you should move to the new foregroundStyle() modifier instead.
Also note that if all your text inside those rectangles is going to be the same colour, you can add that modifier to the top-level HStack, as I have done above.
