swift - 修复了导航视图中列表视图上方的视图

问题描述

如何在 SwiftUI 的 NavigationView 中的 List 视图上方获得固定（非滚动）视图？

第一张照片显示了我到目前为止尝试实现/拥有的目标。但是，第二张图片显示了如果我下拉会发生什么，标题会滑到固定内容上方。

使用 List 上的偏移量和 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")
}

标签： swiftswiftui

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

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

使用 Xcode 12 / iOS 14 测试

NavigationView {
    List {
        Section(header: Group {
            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()
                }
            }
        }) {
            ForEach(0..<20) { i in
                Text("Item \(i)")
            }
        }}
        .listStyle(PlainListStyle())

swift - 修复了导航视图中列表视图上方的视图

问题描述

解决方案

推荐阅读