恢复列表 SwiftUI 中的底部填充

Question

随着reverted List在 SwiftUI 中继续研究How to make List reversed in 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)
            }
        }
    }
}

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