ios - 使用带有 NavigationView 的 ScrollView 我得到空白的灰色空间

Question

如何删除标签栏上方的灰色空间？如果我不使用 ScrollView ，它就会消失。我找不到任何方法来删除它。

此外，当我尝试转到目标 View 时，我发现我也发现了这个错误。

我需要这方面的帮助，而且我是 SwiftUI 的新手，所以如果您发现我应该更改的内容，请告诉我。

struct DashboardView: View {

    @State var activeLink:Int = 0

    var body: some View {


        NavigationView {
            VStack {
                        Top_Dashboard()
                        Spacer()
                        Mid_Dashboard().offset(y:-3)

            }
        }

    }
}

// MARK: Top:-
struct Top_Dashboard: View {
    @State var userName = "Siddharth"
    var body : some View{

        VStack(spacing:0){
            HStack(){
                Text("     Hello,\n" + userName).fontWeight(.medium)
                                                .opacity(0.8)
                                                   .font(.largeTitle)
                                                   .padding(.top,10)
                                                   .padding(.bottom,10)
                    .offset(x:UIScreen.main.bounds.width / 3 - 10)

                Spacer()

                Button(action: {}, label: { Image(systemName: "plus").resizable().frame(width: 32, height: 32,alignment: .topTrailing).foregroundColor(.white).offset(x:-20,y:-20).onTapGesture {
                                            //perform some tasks if needed before opening Destination view
                                        print("New Election Tapped")
                                    }})

            }.padding(.top,UIApplication.shared.windows.first?.safeAreaInsets.top)
                .background(ZStack {
                    LinearGradient(gradient: Gradient(colors: [Color("Color1"), Color("Color2")]), startPoint: .topLeading, endPoint: .bottomTrailing).clipShape(RoundedRectangle(cornerRadius: 30, style: .circular)).frame(width: UIScreen.main.bounds.width, height: 150)
                    Image("Mountains").offset(y:-10)
                })
        }.edgesIgnoringSafeArea(.top)

    }
}

// MARK: Mid:-
struct Mid_Dashboard: View{
    @State var inputSearch:String = ""
    var body: some View {
        VStack {
            SearchBar(text:$inputSearch).frame(width:UIScreen.main.bounds.width - 60,height:40)
            Rectangle().frame(width: 350, height: 5, alignment: .center).foregroundColor(Color(.gray)).opacity(0.7)
            ScrollView.init(.vertical, showsIndicators: false) {
                StaticCard(headerText: "Total Elections", numberElections: 6, myColor: "_Purple")
                StaticCard(headerText: "Upcoming Elections", numberElections: 4,myColor: "Blue")
                StaticCard(headerText: "Pending Elections", numberElections: 4,myColor: "Pink")
                StaticCard(headerText: "Finished Elections", numberElections: 4,myColor: "Red")
            }

        }

    }

}

struct StaticCard: View {
    @State var headerText:String = "Total Elections"
    @State var numberElections:Int = 5
    @State var myColor:String = "Blue"
    var body:some View{
        HStack {
            HStack{
                Text(headerText)
                                   .foregroundColor(.white)
                                   .fontWeight(.bold)
                    .font(.largeTitle)
                                   .padding(.top,10)
                                   .padding(.bottom,10)
                Spacer()

                Text("\(numberElections)")
                .foregroundColor(.white)
                .fontWeight(.bold)
                .font(.largeTitle)
                .padding(.top,10)
                .padding(.bottom,10)
                    .opacity(0.8)


            }.padding()
            .padding(.top, 15)
                //UIScreen.main.bounds.width / 2 - 20
                .frame(width:UIScreen.main.bounds.width - 20,height:120)
                .background(Color(myColor))
            .cornerRadius(10)
                .shadow(color: .gray, radius: 6, x: 0, y: 2)
                .animation(.spring())


        }.padding(.top,20)
    }
}


struct DashboardView_Previews: PreviewProvider {
    static var previews: some View {
         Group {
                DashboardView()
                   .previewDevice(PreviewDevice(rawValue: "iPhone 8"))
                   .previewDisplayName("iPhone 8")

                DashboardView()
                   .previewDevice(PreviewDevice(rawValue: "iPhone 11"))
                   .previewDisplayName("iPhone 11")
             }
    }
}

Answer 1

尝试去掉 Dashboard View 中 Top_Dashboard 和 Mid_Dashboard 之间的间隔。

struct DashboardView: View {

    @State var activeLink:Int = 0

    var body: some View {


        NavigationView {
            VStack {
                    Top_Dashboard()
                    Mid_Dashboard().offset(y:-3)

            }
        }

    }
}