Bottom padding in reverted List SwiftUI

user_2141756 0
Viewed 3172

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. Spacing screenshot

swiftui swift iphone ios
1 Answers

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.

user_56230350
Related