UIView Top Point is Lower Then Expected

Question

I have a format problem. How I want is the 2nd picture but for some reason, my view starts a little bit lower. You can see the gap between the pictures. I want to solve this problem without offset. Might be because of .navigationBarHidden(true) but I do not want navigation bar.

I added NavigationView to my code because I have a button down-right to add a new task.

Plus for some reason, this button is not clickable. Would be good if you give a hand to that problem.

import SwiftUI

struct TaskListView: View {
@State private(set) var data = ""
@State var isSettings: Bool = false
@State var isSaved: Bool = false
var body: some View {
    NavigationView {
        ZStack {
            Color(#colorLiteral(red: 0.9333333333, green: 0.9450980392, blue: 0.9882352941, alpha: 1)).edgesIgnoringSafeArea(.all)
            VStack {
                TopBar()
                HStack {
                    CustomTextField(data: $data, tFtext: "Find task", tFImage: "magnifyingglass")
                    Button(action: {
                        self.isSettings.toggle()
                    }, label: {
                        ZStack {
                            RoundedRectangle(cornerRadius: 15)
                                .frame(width: 50, height: 50, alignment: .center)
                                .foregroundColor(Color(#colorLiteral(red: 0.4274509804, green: 0.2196078431, blue: 1, alpha: 1)))
                            Image("buttonImage")
                                .resizable()
                                .frame(width: 30, height: 30, alignment: .center)
                        }
                        .padding(.horizontal, 15)
                    })
                }
                CustomSegmentedView()
                ZStack {
                    TaskFrameView()
                    Button( action: {
                        self.isSaved.toggle()
                    }, label: {
                        ZStack {
                            RoundedRectangle(cornerRadius: 20)
                                .foregroundColor(Color(#colorLiteral(red: 1, green: 0.7137254902, blue: 0.2196078431, alpha: 1)))
                            Text("+")
                                .foregroundColor(.white)
                                .font(.title)
                                .fontWeight(.bold)
                        }
                        .frame(width: 40, height: 40)
                        .offset(x: 150, y: 220)
                    })
                    NavigationLink(
                        destination: NewTaskView(),
                        isActive: $isSaved,
                        label: {
                            Text("")
                        })
                }
            }
        }
        Spacer()
    }
      .navigationBarHidden(true)
    }
 }

struct TopBar: View {
  var body: some View {
      HStack {
         Image("avatar")
            .resizable()
            .frame(width: 100, height: 100)
        VStack(alignment: .leading){
            DateView()
                .font(Font.custom("SFCompactDisplay", size: 20))
                .foregroundColor(.gray)
                .padding(.vertical, 5)
            Text("Hi, Random")
                .font(Font.custom("SFCompactDisplay", size: 20))
        }
        Image(systemName: "ellipsis")
       }
   }
}

Answer 1

It is navigation view bar. The navigationBarHidden modifier should be inside NavigationView, like

    }
    .navigationBarHidden(true) // << here !!
    Spacer()
} // end of NavigationView