带有固定视图的 SwiftUI LazyVStack

Question

上下文：滚动时我需要将 ScrollView 中的视图固定到屏幕顶部，因此我使用带有 pinnedViews 的 LazyVStack，将所需的视图设置为 Section。 都好。

问题： ScrollView 其他视图可能会在视图滚动到底部时更改内容，当发生这种情况时，屏幕会删除所有视图并且不会将它们显示回来，除非我滚动到顶部。

问题：还有其他方法可以将视图固定到顶部吗？ （我尝试使用列表，但不完全是我需要的）或者可以使用固定视图制作自定义堆栈？

Answer 1

这是我对另一篇文章的回答，但看起来你们俩都遇到了类似的问题。 下载并导入 TrackableScrollView，并尝试以下代码。 滚动时，屏幕顶部会显示一个固定的 View()。

链接包： https ://github.com/maxnachanon/trackable-scroll-view

代码：

import SwiftUI
import SwiftUITrackableScrollView //Added
import Combine

struct GameTabView: View {

@State private var scrollViewContentOffset = CGFloat(0) //Added
@State var selectedTab: Int = 0

init() {
UITableView.appearance().sectionHeaderTopPadding = 0
}

var body: some View {
listView
    .ignoresSafeArea()
}

var listView: some View {
ZStack { //Added
    TrackableScrollView(.vertical, showIndicators: true, contentOffset: $scrollViewContentOffset)  {
        VStack {
            Color.gray.frame(height: 400)
            sectionView
        }
    }
    if(scrollViewContentOffset > 400) {
        VStack {
            headerView
            Spacer()
        }
    }
}
}

var sectionView: some View {
Section {
    tabContentView
        .transition(.scale) // FIXED
        .background(Color.blue)
} header: {
    headerView
}
}

private var headerView: some View {
ScrollViewReader { proxy in
    ScrollView(.horizontal, showsIndicators: false) {
        HStack(spacing: 16) {
            Button {
                withAnimation {
                    selectedTab = 0
                }
            } label: {
                Text("AAAA")
                    .padding()
            }
            Button {
                withAnimation {
                    selectedTab = 1
                }
            } label: {
                Text("BBBB")
                    .padding()
            }
            Button {
                withAnimation {
                    selectedTab = 2
                }
            } label: {
                Text("BBBB")
                    .padding()
            }
        }
    }
}
.background(Color.green)
}

@ViewBuilder private var tabContentView: some View {
switch selectedTab {
case 0:
    DummyScreen(title: "FIRST", color: .red)
case 1:
    DummyScreen(title: "SECOND", color: .green)
case 2:
    DummyScreen(title: "THIRD", color: .blue)
default:
    EmptyView()
}
}
}

struct DummyScreen: View {
let title: String
let color: Color
var body: some View {
VStack {
    ForEach(0..<15, id: \.self) { index in
        HStack {
            Text("#\(index): title \(title)")
                .foregroundColor(Color.black)
                .font(.system(size: 30))
                .padding(.vertical, 20)
            Spacer()
        }
        .background(Color.yellow)
    }
}
.background(color)
}
}

Answer 2

根据个人经验，我使用 VStack 完成了此操作。

VStack{ 
    PinnedItems()
    LazyVStack {
        OtherItems()
    } 
}

然后固定的项目将不会滚动并永久附加到顶部。 而lazyVStack 仍然可以在下面滚动。