还原列表 SwiftUI 中的底部填充

Question

随着继续研究 SwiftUI 中的reverted 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)
            }
        }
    }
}

请注意，我稍微更改了您的代码以使其更易于观察并且代码更少。