Question

如何在SwiftUI的NavigationView的列表视图上方获取固定的视图（不滚动）？

第一张照片显示了到目前为止我要达到的目标。但是第二张照片显示了如果我拉下会发生什么，标题会滑到固定内容上方。

使用列表和ZStack上的偏移量，我接近了，但是当下拉列表时，NavigationView标题始终在固定视图上方滚动。

尽管我认为这是一个更笼统的问题，但是为了不冒这个问题被关闭的风险，这是我的代码：

    NavigationView {
    
    ZStack{
        List {
            /* .. */
        }
        .listStyle(PlainListStyle())
        .offset(x: 0, y: showFilter ? 100 : 0)
        
        if showFilter {
            VStack {
                HStack {
                    Button(action: {
                        
                    }, label: {
                        Text("Button")
                    })
                    .padding(5)
                    .background(Color(red: 238/255, green: 238/255, blue: 239/255))
                    .cornerRadius(5)
                    .padding()
                    
                    Spacer()
                }
                Spacer()
            }
        }
    }
    .navigationBarItems(trailing:
        Button(action: {
            // initial
            self.showFilter.toggle()
            
            // completely different, odd behaviour (navigation title never fades away)
            // withAnimation{ self.showFilter.toggle() }
        }) {
            Image(systemName: "line.horizontal.3.decrease.circle")
        }
    )
    .navigationBarTitle("List")
}

Answer 1

不确定我是否理解您的问题，能否请您分享问题的gif /视频？

无论哪种方式，您都可以尝试将列表和固定视图放在同一个ZStack中，将列表放置在固定视图之前，然后为固定视图提供位置属性。

如果ZStack位于NavigationView内部，则不会影响固定视图。

大致来说，Sudo代码就是这样-

NavigationView {
   ZStack {
      List ...
 
      FixedView()
        .position(x: 100, y: 100)
   }
}

如果这还不够，您可以查看Paul Hudson关于绝对定位here的教程。

要获得更多帮助，请发布您的代码并给我们提供视频/ gif演示，以便我们可以了解您的问题并事先进行测试：）

Answer 2

这里的偏移量是一种较弱的方法，因为当显示过滤器时，用户将看不到列表中的最后一行，并且项目多于屏幕区域。

您可以考虑使用带有节的变量作为占位符（它是粘性的并且不与标题重叠）用于过滤器（也许具有一些按钮的自定义样式），因此基于代码快照的简单演示如下所示。

通过Xcode 12 / iOS 14测试

{{1}}

导航视图中列表视图上方的固定视图

2 个答案: