SwiftUI 在列表下方添加视图

Question

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

在列表下方，我希望必须单击按钮才能加载更多项目。（由于加载所有项目需要一些用户操作，例如输入 TAN，因此当用户滚动到列表末尾时不应自动完成此操作，但前提是他愿意这样做。）

我想要的是这样的视图：

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

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