I have put in a great deal of effort to find solutions to this before asking my question here in accordance with the rules. Unfortunately, all solutions previously answered have not worked for me. My seemingly simple task of having a VStack with elements that start at the top of the screen but under the toolbar is not happening as intended.
//
// ContentView.swift
// Led Controller
//
//
//
import SwiftUI
let R:CGFloat = 30
let screenRect = UIScreen.main.bounds
let screenWidth = screenRect.size.width
let screenHeight = screenRect.size.height
struct ContentView: View
{
var body: some View
{
NavigationStack
{
ZStack
{
Image("background")
.resizable()
.aspectRatio(contentMode: .fill)
MainUI()
}
.toolbarBackground(Color.black, for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)
.navigationBarTitleDisplayMode(.inline)
.toolbar
{
ToolbarItem(placement: .principal)
{
Text("LED Controller")
.font(.largeTitle)
.accessibilityAddTraits(.isHeader)
.foregroundStyle(LinearGradient(
colors: [.blue, .green, .brown, .pink],
startPoint: .leading,
endPoint: .trailing
))
}
}
}
}
}
struct MainUI: View
{
var body: some View
{
VStack(alignment: .leading)
{
Text("Placeholder")
.background(RoundedRectangle(cornerRadius: R)
.fill(Color.black)
.frame(width: screenWidth/2, height: 40))
}
}
}
#Preview {
ContentView()
}
I have tried adding Spacer() in many different locations (After placeholder, after the vstack, after mainUI, ext.) but it seems to just hide the Placeholder off screen rather than push it to the top of the view. I also removed the toolbar completely and tried but it still hides the placeholder off screen where only a few pixels of the bottom of the text are visible. I have also tried the .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading) approach but it has no effect. I would greatly appreciate and help.