如何将页脚视图添加到 SwiftUI 中的列表？答案

【问题标题】：How to add footer view to a List in SwiftUI?如何将页脚视图添加到 SwiftUI 中的列表？
【发布时间】：2021-02-11 15:19:36
【问题描述】：

我正在尝试在 List 的底部添加一个视图，同时保持在安全区域中。这就是我想要结束的，我指的是“更新时间：上午 5:26”：

我尝试使用带有分隔符的Section 页脚，但这不起作用：

struct ContentView: View {
    @State private var selectedTab = 0

    var body: some View {
        TabView(selection: $selectedTab) {
            List {
                Section {
                    Text("Item 1")
                    Text("Item 1")
                    Text("Item 1")
                }
                Section(
                    footer: VStack {
                        Spacer()
                        Text("Updated at: 5:26 AM")
                            .frame(maxWidth: .infinity)
                    }
                ) {
                    Text("Item 1")
                    Text("Item 1")
                    Text("Item 1")
                }
            }
            .listStyle(InsetGroupedListStyle())
            .tabItem {
                Label("First", systemImage: "alarm")
            }
            Text("Content 2")
                .tabItem {
                    Label("Second", systemImage: "calendar")
                }
        }
    }
}

然后我尝试了一个 VStack 作为它自己的一部分和一个 Spacer 但也没有运气：

struct ContentView: View {
    @State private var selectedTab = 0

    var body: some View {
        TabView(selection: $selectedTab) {
            List {
                Section {
                    Text("Item 1")
                    Text("Item 1")
                    Text("Item 1")
                }
                Section {
                    Text("Item 1")
                    Text("Item 1")
                    Text("Item 1")
                }
                VStack {
                    Spacer()
                    Text("Updated at: 5:26 AM")
                        .font(.footnote)
                        .foregroundColor(.secondary)
                        .frame(maxWidth: .infinity)
                }
                .listRowBackground(Color(.systemGroupedBackground))
            }
            .listStyle(InsetGroupedListStyle())
            .tabItem {
                Label("First", systemImage: "alarm")
            }
            Text("Content 2")
                .tabItem {
                    Label("Second", systemImage: "calendar")
                }
        }
    }
}

如何在考虑List 可能滚动的同时实现这一目标？我正在尝试将其添加到列表的末尾，而不是浮动。

【问题讨论】：

不清楚如果有几个这样的项目部分并且“更新”超出了可见区域，它应该是什么样子，然后我们滚动到底部......？
滚动到底部，它将位于标签栏上方。在自动布局中，我相信会固定到具有高优先级的底部安全区域和固定在最后一个部分下方的优先级较低的区域
我开始认为这不能在 SwiftUI 中完成。也许我应该将其设置为粘性页脚，除非列表大于屏幕高度。听起来很乱

标签： swiftui swiftui-list

【解决方案1】：

您可以将List 和Text 放在VStack 中，没有空格：

struct ContentView: View {
    @State private var selectedTab = 0

    var body: some View {
        TabView(selection: $selectedTab) {
            VStack(spacing: 0) {
                List {
                    Section {
                        Text("Item 1")
                        Text("Item 1")
                        Text("Item 1")
                    }
                    Section {
                        Text("Item 1")
                        Text("Item 1")
                        Text("Item 1")
                    }
                }
                .listStyle(InsetGroupedListStyle())
                Text("Updated at: 5:26 AM")
                    .font(.footnote)
                    .foregroundColor(.secondary)
                    .frame(maxWidth: .infinity)
                    .background(Color(.systemGroupedBackground))
            }
            .tabItem {
                Label("First", systemImage: "alarm")
            }
            Text("Content 2")
                .tabItem {
                    Label("Second", systemImage: "calendar")
                }
        }
    }
}

【讨论】：

我试过了，但Text 视图浮动，List 滚动只是屏幕的一部分
顺便说一句，如果我想浮动，.overlay 更适合这个。但是我试图在List 视图的底部制作这个视图，无论它有多短或多长（但在滚动时不要浮动它）
@TruMan1 我现在明白你需要什么了。但是如果你滚动列表会发生什么？页脚是否应该向下滑动并隐藏？
如果列表太长，“更新时间”将不在屏幕底部。用户在滚动到底部之前不会看到它
现在我想了想，如果列表太长，它的行为就像在最后一节添加Section 页脚一样。但如果它太短，那就是中间有一个垫片