I'm building a app but the layout is not perfect yet.
I have some problems with the navigationmenu and the scrollview.
First of all the scrollview begin about 20/40 px below the top (see the 2 pictures)
Also I see a grey top (see second picture), I think that is te top of the navigationview. Can I work around it?
The code is this:
import SwiftUI
struct Boxen: View {
// Showing Card Colors on Button Click....
@State var showColors: Bool = false
// Button Animation...
@State var animateButton: Bool = false
// MARK: Hover Effect MacOS
@State var hoverColor: Color = .clear
// MARK: Notes Data
@StateObject var boxenData: BoxenViewModel = BoxenViewModel()
var body: some View {
ScrollView((boxenData.myBoxen?.isEmpty ?? true) ? .init() : .vertical, showsIndicators: false) {
if (boxenData.myBoxen?.isEmpty ?? true){
HeaderView()
.padding(.top,isMacOS() ? 25 : 15)
BoxenView()
.environmentObject(boxenData)
.frame(maxWidth: .infinity,maxHeight: .infinity,alignment: .center)
}
else {
LazyVStack(spacing: isMacOS() ? 6 : 12, pinnedViews: [.sectionHeaders]) {
Section {
BoxenView()
.environmentObject(boxenData)
} header: {
HeaderView()
.padding(.top,isMacOS() ? 25 : 15)
.background(Color("BG"))
.background(Color("BG").frame(height: 100).ignoresSafeArea().offset(y: -80),alignment: .top)
}
}
}
}
.background(Color("BG").ignoresSafeArea())
.overlay(FAB())
.popupNavigationView(show: $boxenData.showAddBoxPopup) {
NewBox()
.environmentObject(boxenData)
}
}
@ViewBuilder
func HeaderView()->some View{
VStack(){
HStack(){
Text("Boxen")
.font(isMacOS() ? .system(size: 33, weight: .bold) : .largeTitle.bold())
.frame(maxWidth: .infinity,alignment: .leading)
.modifier(AlertModifier(showAlert: $boxenData.showAlert, alertMsg: $boxenData.alertMsg))
// Search Bar...
HStack(alignment: .top,spacing: 8){
Image(systemName: "magnifyingglass")
.font(.title3)
.foregroundColor(.gray)
VStack(spacing: 8){
TextField("Zoeken", text: $boxenData.searchText)
Divider()
}
}
.frame(width: 250,alignment: .leading)
.padding(.trailing,8)
}
.padding(.bottom,isMacOS() ? 0 : 10)
.padding(.leading,isMacOS() ? 25 : 15)
.padding(.trailing,15)
}
}
@ViewBuilder
func FAB()->some View{
VStack{
VStack(spacing: 15){
// Colors...
let units = ["9","13","15"]
let boxen = boxenData.myBoxen
let aantal = boxen?.count ?? 0
let id = String((aantal + 1))
ForEach(units,id: \.self){unit in
Text(unit)
.padding()
.background(
Circle()
.stroke(lineWidth: 1)
.padding(15)
.frame(width: isMacOS() ? 20 : 25, height: isMacOS() ? 20 : 25)
)
.onTapGesture {
withAnimation{
showColors = false
boxenData.boxSizeMeter = unit
boxenData.boxIndificatie = id
boxenData.boxRowNumber = "0"
boxenData.boxPlaceNumber = "0"
boxenData.boxLocationPlace = "Oss"
boxenData.boxHalLocation = "Onbekend"
boxenData.showAddBoxPopup = true
}
}
}
}
.padding(.top,20)
.frame(height: showColors ? nil : 0)
.opacity(showColors ? 1 : 0)
.zIndex(0)
AddButton()
.zIndex(1)
}
.frame(maxWidth: .infinity,maxHeight: .infinity,alignment: .bottomTrailing)
.padding()
}
@ViewBuilder
func AddButton()->some View{
Button {
if animateButton{return}
withAnimation(.interactiveSpring(response: 0.5, dampingFraction: 0.6, blendDuration: 0.6)){
showColors.toggle()
animateButton.toggle()
}
// Resetting the button...
DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
withAnimation(.spring()){
animateButton.toggle()
}
}
} label: {
Image(systemName: "plus")
.font(.title2)
.foregroundColor(.white)
.scaleEffect(animateButton ? 1.1 : 1)
.rotationEffect(.init(degrees: showColors ? 45 : 0))
.padding(isMacOS() ? 12 : 15)
.background(Color.black)
.clipShape(Circle())
}
.scaleEffect(animateButton ? 1.1 : 1)
.padding(.top,30)
}
}
struct Boxen_Previews: PreviewProvider {
static var previews: some View {
Boxen()
}
}
The only navigationview that I have is in the contentview.
import SwiftUI
import Firebase
struct ContentView: View {
@AppStorage("log_status") var log_status: Bool = false
var body: some View {
Group{
if log_status{
NavigationView {
List {
//Home view
NavigationLink(destination: Home(), label: {
Label("Home", systemImage: "house")
})
// NavigationLink(destination: Boxen(), label: {
// Label("Boxen Locatie", systemImage: "archivebox")
// })
NavigationLink(destination: Boxen(), label: {
Label("Boxen Info", systemImage: "shippingbox")
})
NavigationLink(destination: Notes(), label: {
Label("Mijn Notities", systemImage: "note.text")
})
Label("Settings", systemImage: "gear")
NavigationLink(destination: ContentView().onAppear(){
self.logout()
}) {
Label("Logout", systemImage: "chevron.left.2")
}
}
.listStyle(SidebarListStyle())
.navigationTitle("Sidebar")
}
.navigationViewStyle(.columns)
.buttonStyle(BorderlessButtonStyle())
.textFieldStyle(PlainTextFieldStyle())
}
else{
MainView()
}
}
}
func logout(){
do{
try Auth.auth().signOut()
log_status = false
}
catch{
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
I hope somebody can help me with this. Thanks a lot!
