SwiftUI Remove List padding fand Row spacing?

Question

i am trying to remove the spacing & padding to List row's , its not working after spending hours trying many solutions .

List View :

import SwiftUI

struct Item {
    let uuid = UUID()
    let value: String
}

struct w_tasks: View {
    
    @State private var items = [Item]()
      
   
      var body: some View {
          ZStack(alignment: .leading){
                    List(self.items, id: \.uuid) {item in
                        cl_task().listRowInsets(EdgeInsets())
                    }
                    .listStyle(SidebarListStyle())
                    .frame(width: UIScreen.main.bounds.width )
                    .onAppear {
                      
                        DispatchQueue.main.async {
                            self.items.append(Item(value: "Item"))
                            self.items.append(Item(value: "Item"))
                            self.items.append(Item(value: "Item"))
                            self.items.append(Item(value: "Item"))
                            self.items.append(Item(value: "Item"))
                            self.items.append(Item(value: "Item"))
                            self.items.append(Item(value: "Item"))
                            self.items.append(Item(value: "Item"))
                            self.items.append(Item(value: "Item"))
                            self.items.append(Item(value: "Item"))
                            self.items.append(Item(value: "Item"))
                            self.items.append(Item(value: "Item"))
                        }
               
                    }
              VStack {
                  Spacer()

                  HStack {
                      Spacer()

                      Button(action: {
                          self.items.append(Item(value: "Item"))
                      }, label: {
                          Text("+")
                          .font(.system(size: 30))
                          .frame(width: 50, height: 50)
                          .foregroundColor(Color.white)
                          .padding(.bottom, 5)
                      })
                      .background(Color(hex : "#216D94"))
                      .frame(width: 50, height: 50)
                      .cornerRadius(25)
                      .padding()
                      .shadow(color: Color.black.opacity(0.3),
                              radius: 3,
                              x: 3,
                              y: 3)
                  }
              }
          }.background(Color.black)
      }
}

struct w_tasks_Previews: PreviewProvider {

    static var previews: some View {
        w_tasks()
    }
}

Row Bite :

import SwiftUI

struct cl_task: View {
    @State private var offset: CGSize = .zero
  
    var body: some View {
        //Swipe to custom options ,by "Jack" this option not yet available in SwiftUI
        let drag = DragGesture(minimumDistance: 25, coordinateSpace: .local)
       
                   .onChanged {
                    
                    if (self.offset.width > 0 ){  return }
                    self.offset.width = $0.translation.width
                
                   }.onEnded {
                   if $0.translation.width < -100 {
                       self.offset = .init(width: -100, height: 0)
                   } else {
                      self.offset = .zero
                   }
               }
        ZStack{
            Rectangle().foregroundColor(.blue).offset(x: offset.width, y: offset.height)
                .gesture(drag)
                .animation(.easeIn, value: offset)
            Text("test").foregroundColor(.white)
        }.frame(minWidth: 0,
                maxWidth: .infinity,
                minHeight: 120,
                maxHeight: .infinity,
                alignment: .topLeading
        )
    }
}

struct cl_task_Previews: PreviewProvider {
    static var previews: some View {
        cl_task().previewLayout(.sizeThatFits)
    }
}

And when i add The List inside NavigationView the divider is showing again and i can't remove it any idea why!

swiftPunk · Accepted Answer

For testing and showing that there is no problem with massive data, I pre loaded 10_000 row. is that enough?

your issues:

1.you should make your Item type Identifiable, then you can put out uuid from your list or ForEach.

2.you should not gave frame size to your row, they can take max space automatically.

3.you can put your button over your View, and save some more coding, like I did.

4.you should not use CGSize for offset, because you are just working on one dimension, and CGFloat is enough.

5.you should and must use LazyVStack if your data is massive as you said 400 is to many, then use LazyVStack for sure.

struct Item: Identifiable {

  let id: UUID = UUID()
  let value: String

}

struct ContentView: View {
    
    @State private var items: [Item] = [Item]()
    
    var body: some View {
        
        ZStack {
            
            Color.black.ignoresSafeArea()
            
            ScrollView {
                LazyVStack(spacing: 0) {
                    
                    ForEach(items) {item in
                        
                        RowView(stringOfText: item.value)
                            .frame(height: 120)
                    }
                    
                }
                
            }
            .background(Color.black)
            .onAppear() { for _ in 0...10_000 { addNewData() } }
            
            
            
        }
        .overlay(addButton, alignment: .bottomTrailing)
        .animation(.easeInOut)
        
    }
    
    var addButton: some View {
        
        Button(action: { addNewData() }, label: {
            Image(systemName: "plus.circle").foregroundColor(Color.white).font(Font.largeTitle.weight(Font.Weight.bold)).padding()
        })
        
        
    }
    
    func addNewData() { items.append(Item(value: "item " + items.count.description)) }
}

struct RowView: View {
    
    let stringOfText: String
    
    @State private var offset: CGFloat = CGFloat()
    
    var body: some View {
        
        ZStack {
            
            Color.blue
            
            Text(stringOfText)
                .foregroundColor(Color.white)
                .padding()
        }
        .offset(x: offset)
        .gesture(dragGesture)
        
    }
    
    var dragGesture: some Gesture {
        
        DragGesture(minimumDistance: 25, coordinateSpace: .local)
            
            .onChanged {
                if (offset > 0 ){  return }
                offset = $0.translation.width
                
            }.onEnded {
                if $0.translation.width < -100 {
                    offset = -100
                } else {
                    offset = 0
                }
            }
        
    }
  
}

SwiftUI Remove List padding fand Row spacing?

Answers (2)

Related Questions