List SwiftUI 中的置顶页脚

Posted 2023-02-24

【中文标题】List SwiftUI 中的置顶页脚

【英文标题】：Sticky footer in List SwiftUI

【发布时间】：2020-06-20 10:35:09

【问题描述】：

我正在尝试在 SwiftUI 的列表视图中实现粘性页脚

它似乎与每个说的标题不同。这是一个粘性标头实现的示例

     List 
      ForEach(0..<10)  index in
        Section(header: Text("Hello")) 
          ForEach(0..<2)  index2 in
            VStack 
              Rectangle().frame(height: 600).backgroundColor(Color.blue)
            
          
        .listRowInsets(EdgeInsets())
      
    

上面给出了一个粘性标题的情况。虽然，一旦我将Section(header: ... 更改为Section(footer:...，它似乎不再具有粘性，它只是位于行尾。

更明确的参考

 List 
  ForEach(0..<10)  index in
    Section(footer: Text("Hello")) 
      ForEach(0..<2)  index2 in
        VStack 
          Rectangle().frame(height: 600).backgroundColor(Color.blue)
        
      
    .listRowInsets(EdgeInsets())
  

有人对此有任何解决方案吗？

【问题讨论】：

更新问题以获得更明确的参考。

你有什么解决办法吗？

目前还没有解决方案，我确实找到了一个库github.com/zenangst/Blueprints，它有一个粘性页脚，但这是在 UI-Kit 而不是 SwiftUI 中。除此之外没有太大进展

好的..谢谢:)

@Zeona 与 ios 14 我们可以使用 Lazy... 来实现这一点。更多请看答案

【参考方案1】：

借助最新的 SwiftUI (2)，我们现在可以访问更多 API

对于初学者，我们可以使用LazyVStack 和ScrollView 来提供相当好的性能，然后我们可以使用pinnedViews API 在数组中指定我们想要固定或粘贴的补充视图。然后我们可以使用包装我们的内容的部分视图并指定页脚或页眉。

** 此代码自 Xcode beta 2 起有效 **

至于在List 中使用这个我不太确定，看看List 与Lazy... 的表现会很有趣

struct ContentView: View 
  var body: some View 
    ScrollView 
      LazyVStack(spacing: 10, pinnedViews: [.sectionFooters]) 
        ForEach(0..<20, id: \.self)  index in
          Section(footer: FooterView(index: index)) 
            ForEach(0..<6)  _ in
              Rectangle().fill(Color.red).frame(height: 100).id(UUID())
            
          
        
      
    
  


struct FooterView: View 
  
  let index: Int
  
  var body: some View 
    VStack 
      Text("Footer \(index)").padding(5)
    .background(RoundedRectangle(cornerRadius: 4.0).foregroundColor(.green))
  



struct ContentView_Previews: PreviewProvider 
  static var previews: some View 
    ContentView()
  

【参考方案2】：

您可以在List 上使用overlay：

struct ContentView: View 
    @State private var selectedTab = 0

    var body: some View 
        TabView(selection: $selectedTab) 
            VStack 
                List 
                    ForEach(0..<20, id: \.self)  _ in
                        Section 
                            Text("Item 1")
                            Text("Item 2")
                            Text("Item 3")
                        
                    
                
                .listStyle(InsetGroupedListStyle())
                .overlay(
                    VStack 
                        Spacer()
                        Text("Updated at: 5:26 AM")
                            .font(.footnote)
                            .foregroundColor(.secondary)
                            .frame(maxWidth: .infinity)
                    
                )
            
            .tabItem 
                Label("First", systemImage: "alarm")
            
            Text("Content 2")
                .tabItem 
                    Label("Second", systemImage: "calendar")
                
        
    

【讨论】：

注意：覆盖需要 iOS 15