Bottom padding in reverted List SwiftUI

Question

As continue research of reverted List in SwiftUI How to make List reversed in SwiftUI.

Getting strange spacing in reverted list, which looks like extra UITableView header/footer.

struct ContentView: View {
    @State private var ids = ["header", "test2"]
    @State private var text = "text"

    init() {
        UITableView.appearance().tableFooterView = UIView()
        UITableView.appearance().separatorStyle = .none
    }

    var body: some View {
        ZStack (alignment: .bottomTrailing) {
            VStack {
                List {
                    ForEach(ids, id: \.self) { id in
                        Group {
                        if (id == "header") {
                            VStack {
                                Text("Test")
                                    .font(.largeTitle)
                                    .fontWeight(.heavy)
                                Text("header")
                                    .foregroundColor(.gray)
                            }
                            .scaleEffect(x: 1, y: -1, anchor: .center)
                        } else {
                            Text(id).scaleEffect(x: 1, y: -1, anchor: .center)
                        }
                        }
                    }
                }
                .scaleEffect(x:
                    1, y: -1, anchor: .center)
                    .padding(.bottom, -8)

                Divider()
                VStack(alignment: .leading) {
                    HStack {
                        Button(action: {}) {
                            Image(systemName: "photo")
                                .frame(width: 60, height: 40)
                        }

                        TextField("Message...", text: $text)
                            .frame(minHeight: 40)

                        Button(action: {
                            self.ids.insert(self.text, at:0 )
                        }) {
                            Image(systemName: "paperplane.fill")
                                .frame(width: 60, height: 40)
                        }
                    }
                    .frame(minHeight: 50)
                    .padding(.top, -13)
                    .padding(.bottom, 50)
                }
                .foregroundColor(.secondary)
            }
        }
    }
}

Looks not critical but in my more complicated code it shows more spacing.

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

Ok, turns out it is another SwiftUI bug.

To get around it, you should add .offset(x: 0, y: -1) to the List.

Working example:

struct ContentView: View {
    @State private var ids = ["header", "test2"]
    @State private var text = ""
    
    init() {
        UITableView.appearance().tableFooterView = UIView()
        UITableView.appearance().separatorStyle = .none
        UITableView.appearance().backgroundColor = .clear
    }
    
    var body: some View {
        ZStack (alignment: .bottomTrailing) {
            VStack {
                List(ids, id: \.self) { id in
                    Group {
                        if (id == "header") {
                            VStack(alignment: .leading) {
                                Text("Test")
                                    .font(.largeTitle)
                                    .fontWeight(.heavy)
                                Text("header").foregroundColor(.gray)
                            }
                        } else {
                            Text(id)
                        }
                    }.scaleEffect(x: 1, y: -1, anchor: .center)
                }
                .offset(x: 0, y: -1)
                    
                .scaleEffect(x: 1, y: -1, anchor: .center)
                .background(Color.red)
                
                Divider()
                VStack(alignment: .leading) {
                    HStack {
                        Button(action: {}) {
                            Image(systemName: "photo").frame(width: 60, height: 40)
                        }
                        
                        TextField("Message...", text: $text)
                        
                        Button(action: {
                            self.ids.append(self.text)
                        }) {
                            Image(systemName: "paperplane.fill").frame(width: 60, height: 40)
                        }
                    }
                }
                .foregroundColor(.secondary)
            }
        }
    }
}

Note that I changed your code a bit to make it more observable and have less code.

Problem still exists when I apply `offset(y: -100)` to root `ZStack` (need to show keyboard) https://cdn.lonje.com/resource/images/6664572c-4985-397d-8724-a25966f9820d.png — Roman Vasilyev, Oct 23 '19 at 13:17
maybe you need [this method](https://stackoverflow.com/a/58330623/5623035) for handling keyboard. — Mojtaba Hosseini, Oct 23 '19 at 13:41
this is exactly what I'm doing, and it gives this "artifact" for active `.offset(y: kGuardian.slide)` — Roman Vasilyev, Oct 23 '19 at 15:33

Bottom padding in reverted List SwiftUI

1 Answers1

Working example:

Linked