SwiftUI Remove List padding fand Row spacing? - list

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!

Answer 1

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
}
}
}
}

Answer 2

So this is what I have
The method you tried will work, but not on Lists, nest a ForEach inside of your list and then attach that modifier and you should be good. Also of course just tweak your modifiers to your liking of course.
Also, the way to get the spacing from between the list rows is setting a height limit on them. I just set 50 but again, modify as you see fit.
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)
List {
ForEach(self.items, id: \.uuid) { item in
cl_task().listRowInsets(EdgeInsets(.init(top: 20, leading: -20, bottom: 20, trailing: -20)))
.frame(height: 50)
}
}
.listStyle(InsetListStyle())
.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("#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()
}
}
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)
}
}