Нижняя обивка в перевернутом списке SwiftUI

Question

Как продолжить исследование reverted List в SwiftUI Как сделать List обращенным в SwiftUI .

Получение странного интервала в обращенном списке, который выглядит как дополнительный заголовок / колонтитул UITableView.

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

Выглядит не критично, но в моем более сложном коде он показывает больше пробелов.

Answer 1

Хорошо, оказывается, это еще одна ошибка SwiftUI.

Чтобы обойти это, вы должны добавить .offset(x: 0, y: -1) к List.

Рабочий пример:

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

Обратите внимание, что я немного изменил ваш код, чтобы сделать его более заметным и иметь меньше кода.