列表背景颜色不变

Question

我试图让行的宽度填满整个屏幕，或者将背景设为白色，因为我的列表周围有灰色填充或边框。我试过这个stack overflow question 这来自github 但似乎没有任何效果，列表周围显示灰色边框，我不知道为什么。 View

这是我的代码

  var body: some View {
    ZStack{
    NavigationView{
        ZStack{
            VStack(spacing:15){
                HStack{
                    //component CardView
                    CardSubjects(type: Text("Acreditadas"),count: Text("\(subjectVM.matters_approved)"), color: Color("LightGreen")).padding(.horizontal,1)
                    CardSubjects(type: Text("En curso"),count: Text("\(subjectVM.matters_studying)"), color: Color("DarkBlue")).padding(.horizontal,1)
                    CardSubjects(type: Text("Atrasadas"),count: Text("\(subjectVM.matters_pending)"), color: Color("DarkYellow")).padding(.horizontal,1)
                    CardSubjects(type: Text("Reprobadas"),count: Text("\(subjectVM.matters_failed)"), color: Color("DarkRed")).padding(.horizontal,1)
                }
                VStack{
                        List{
                            ForEach(subjectVM.classData){ data in
                            VStack(alignment: .leading,spacing: 10){
                                HStack {
                                    Text("\(String(format: "%.1f", data.rating)) \(data.key)")
                                        .font(.body)
                                        .font(.system(size: 12))
                                        .foregroundColor(Color("DarkPink"))
                                }
                                HStack {
                                    Text(data.name)
                                        .font(.body)
                                        .font(.system(size: 18))
                                        .foregroundColor(Color.black)
                                }
                                HStack{
                                    Image(systemName: "minus").resizable()
                                        .foregroundColor(self.subjectVM.setColorList(type: data))
                                        .frame(width:70,height: 5)
                                }
                            }
                            }.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                            
                        }
                        
                    
                }.padding(.top,40)
                .overlay(DropDownSubject{ value in
                self.subjectVM.SetSelect(index: value)
            }.padding(.top,-15),alignment: .topLeading)
                    .padding(.trailing,0)
                    
               Spacer()
            }.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
            .background(Color.green)
            .overlay(VStack{
                if subjectVM.subjectFlag{
                    ActivityIndicator(shouldAnimate: self.$stateLoad).frame(width:100,height:100)
                }
            })
            
          //  FloatMenu(router: self.Router)
            
        }.background(Color.darkYellow)
        .alert(isPresented: $subjectVM.alertState, content: { self.alert })
        .navigationBarTitle(self.textTitle)
        .navigationBarItems(
          leading:
              HStack {
                  Button(action: {
                      self.Router.currentPage = "main"
                      
                      }, label: {
                          Image(systemName: "arrow.left").font(.system(size: 25)).foregroundColor(Color("DarkPink"))
                  })
                  
              },
          trailing:
              HStack{
                  Button(action: {
                      print("Help menu")
                  }, label: {
                      Image(systemName: "questionmark.circle").font(.system(size: 25)).foregroundColor(Color("DarkPink"))
                      
                  })
              })
        }
        
        FloatMenu(router: self.Router)
        
    }
    
   }

Answer 1

嵌入在 NavigationView 中的列表的默认样式是 DefaultListStyle/InsetGroupedListStyle，其中包括灰色边框。要删除样式，只需将 PlainListStyle() 附加到您的列表中。

List {
    ...
}
.listStyle(PlainListStyle())

结果：