代码之家  ›  专栏  ›  技术社区  ›  John Gerard

SwiftUI导航视图列表周围的页边距

  •  0
  • John Gerard  · 技术社区  · 4 年前

    我有一个带有导航视图的SwiftUI应用程序。导航视图中有一个列表。该列表包含导航链接。一切都很好,但我希望每个列表项都能延伸到视图的整个宽度,而不是一直有灰色的边距。

    如何使列表具有全宽并消除上边距?

    import SwiftUI
    
    struct ConsumerDashboardView: View {
    
    @StateObject var authVM = AuthorizationClass()
    
    var body: some View {
        NavigationView {
            VStack{
                Spacer()
                    .frame(height: 50)
                Button(action: {
                    print("Button Clicked")
                }){
                Text("\(Image(systemName: "plus")) Start a New Project")
                    .font(.headline)
                    .fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                    .foregroundColor(.white)
                    .padding()
                    .frame(width: 300, height: 60)
                    .background(Color("BrandOrange"))
                    .cornerRadius(5.0)
                }
                Spacer()
                    .frame(height: 100)
                VStack(spacing: -2){
                    HStack{
                        Text("  Active\nProjects")
                            .font(.headline)
                            .fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                            .frame(
                                width: 120,
                                height: 60,
                                alignment: .center
                            )
                            .background(Color("BrandLightBlue"))
                            .foregroundColor(.white)
                            .padding(.trailing, 50)
                        Text(" Closed\nProjects")
                            .font(.headline)
                            .fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                            .frame(
                                width: 120,
                                height: 60,
                                alignment: .center
                            )
                            .border(Color("BrandLightBlue"), width: 2)
                            .background(Color(.white))
                            .foregroundColor(Color("BrandLightBlue"))
                    }
                    Divider()
                        .frame(
                            width: 1000,
                            height: 3
                        )
                        .background(Color("BrandLightBlue"))
                    Spacer()
                        if !authVM.projectObjects.isEmpty {
                            ProjectsList(authVM: authVM)
                        } else {
                            ProjectsLoader(authVM: authVM)
                        }
                    }
                }
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        HStack {
                            Image("Icon")
                                .resizable()
                                .frame(
                                    width: 30,
                                    height: 30
                                )
                            Text("Icon").font(.headline)
                            Image(systemName: "line.3.horizontal.decrease.circle")
                                .imageScale(.large)
                        }
                    }
                }
        }.onAppear {
            authVM.fetchProjects()
        }
    }
    }
    
    struct ProjectsList: View {
    
    @StateObject var authVM = AuthorizationClass()
    
    var body: some View {
            List(authVM.projectObjects){ projectObject in
                NavigationLink(destination: ProjectDetailView(project: projectObject.project)){
                    ProjectRowView(project: projectObject.project)
                        .frame(
                            height: 150
                        )
                }
            }
    }
    }
    

    enter image description here

    0 回复  |  直到 4 年前