带固定视图的SwiftUI LazyVStack

Question

Context：在滚动时，我需要将ScrollView中的视图钉在屏幕的顶部，所以我使用带有pinnedViews的LazyVStack，将需要的视图设置为节。一切都很好。

scrolled ：当视图滚动到底部时，ScrollView其他视图可能会更改内容，当这种情况发生时，屏幕将移除所有视图，除非我滚动到顶部，否则不会显示它们。

问题：还有其他方法可以将视图引向顶部吗？(我试图使用List，但不完全是我所需要的)，还是可以使用固定视图创建自定义堆栈？

Answer 1

这是我对另一篇文章的回答，但你们两个似乎都有类似的问题。下载并导入TrackableScrollView，并试用以下代码。滚动时，屏幕顶部显示一个固定视图()。

链接包：https://github.com/maxnatchanon/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仍然能够滚动到下面。