SwiftUI 在列表下方添加视图

Question

我有一个包含一些项目的清单。

在列表下方，我想点击按钮来加载更多项目。 （因为加载所有项目需要一些用户操作，例如输入 TAN，所以当用户滚动到列表末尾时，这不应该自动完成，但只有在他喜欢时才这样做。）

我想要的是这样的视图：

但是，如果我将 List 和 Button 放在 VStack 中，则 Button 将始终显示在屏幕底部，而不仅仅是当我滚动到 List 末尾时：

struct ContentView: View {
    
    private let items = Range(0...15).map { "Item " + String($0) }
    
    var body: some View {
        VStack {
            List(items, id: \.self) { item in
                Text(item)
            }
            
            HStack {
                Spacer()
                
                Button("Load more") { print("Load more items") }
                
                Spacer()
            }
        }
    }
}

如果我将按钮添加到列表中，按钮显然会显示为具有白色背景且列表中没有任何空间的列表项：

struct ContentView: View {
    
    private let items = Range(0...15).map { "Item " + String($0) }
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
            
            HStack {
                Spacer()
                
                Button("Load more") { print("Load more items") }
                
                Spacer()
            }
        }.listStyle(GroupedListStyle())
    }
}

有没有办法添加一个视图，当用户滚动到列表的末尾但它不是列表的一部分时变得可见？ （或者至少看起来像是在列表之下而不是列表的一部分？）

Answer 1

您应该使用第二个变体，但稍作调整，如下所示（根据您的需要修改颜色/空间

var body: some View {
    List {
        ForEach(items, id: \.self) { item in
            Text(item)
        }

        HStack {
            Button("Load more") { print("Load more items") }
        }
        .listRowInsets(EdgeInsets())
        .frame(maxWidth: .infinity, minHeight: 60)
        .background(Color(UIColor.systemGroupedBackground))

    }.listStyle(GroupedListStyle())
}