标签: swiftui-scrollview

基于这个问题：SwiftUI - Drawing (curved) paths between view

我使用 绘制所需的视图和路径GeometryReader。问题是，现在屏幕变得太长而无法显示全部内容（有 15 个这样的视图，但您在这里只能看到 6 个）：

所以...我ScrollView在整个事情上添加了一个。之外，GeometryReader因为否则所有观点都是错误的。这是代码：

var body: some View {
        if (challengeViewModel.challengeAmount != 0) {
            ScrollView {
                GeometryReader { geometry in
                    let points = calculatePoints(geometry: geometry)
                    drawPaths(geometry: geometry, points: points)
                            .stroke(lineWidth: 3).foregroundColor(.yellow)
                    drawCircles(geometry: geometry, points: points)
                }
            }
                 .background(Color.black)
                 .navigationBarTitle("Journey")

        } else {
            Text("Loading...")
        }
    }

（内容基本上就是1.根据屏幕尺寸计算点，2.沿着点绘制路径，3.在点上放置圆圈）

问题：
现在我明白需要从父级和子级GeometryReader获取其高度，这成为一个“先有鸡还是先有蛋的问题”。ScrollView所以我想手动计算高度GeometryReader。

我的尝试

第一次尝试

最简单的方法是采用一些固定值并计算出一个非常粗略的值。我只是将其添加到GeometryReader：

GeometryReader { geometry in …

如何检测 ScrollView 何时被拖动？

在我的 ScrollView 中，我有一个@Binding scrollPositionOffset变量，我.onChange(of:)可以使用该变量进行观察，然后使用ScrollViewReader.scrollTo(). scrollPositionOffset这很好用，但当我直接滚动 ScrollView 时，我还需要更新。我正在努力做到这一点，因为这会触发.onChange(of:)关闭并进入循环。

我的解决方案是ScrollViewReader.scrollTo()仅当我将localScrolling变量设置为 false 时才进行有条件调用。我尝试使用DragGesture.onChanged和进行设置.onEnded，但这与导致滚动的拖动手势不同，因此.onEnded永远不会触发。

我认为我需要的是类似于 UIScrollView 的 ScrollView 的 @GestureRecognizerisDragging或isTracking（我知道我可以使用 UIScrollView，但我不知道如何使用，这似乎可能需要更多工作！！我会接受答案这也向我展示了如何将其放入 SwiftUIView 中）

上下文（如果有人对我的实际情况有更清晰的解决方案）：

我有一个 ScrollView，我正在以编程方式滚动它，以创建类似于 Xcode 中的 Minimap 视图的效果（即，我有一个与 ScrollView 相邻的缩小视图，拖动小地图会导致 ScrollView 滚动）。

当我使用小地图时，这非常有用，但我很难实现相反的情况：移动 ScrollView 的位置来更新小地图视图。

代码

@Binding var scrollPositionOffset: CGFloat
let zoomMultiplier:CGFloat = 1.5

 var body: some View{
        
        ScrollViewReader { scrollViewProxy in
            GeometryReader{ geometry in …

我使用多向滚动视图创建了一个类似 Excel 的视图。现在我想固定标题，不仅是列标题，还有行标题。看下面的gif：

我用来创建此视图的代码：

        ScrollView([.vertical, .horizontal]){
            VStack(spacing: 0){
                ForEach(0..<model.rows.count+1, id: \.self) {rowIndex in
                    
                    HStack(spacing: 0) {
                        ForEach(0..<model.columns.count+1) { columnIndex in
                            
                            if rowIndex == 0 && columnIndex == 0 {
                                Rectangle()
                                    .fill(Color(UIColor(Color.white).withAlphaComponent(0.0)))
                                    .frame(width: CGFloat(200).pixelsToPoints(), height: CGFloat(100).pixelsToPoints())
                                    .padding([.leading, .trailing])
                                    .border(width: 1, edges: [.bottom, .trailing], color: .blue)
                            } else if (rowIndex == 0 && columnIndex > 0) {
                                TitleText(
                                    label: model.columns[columnIndex - 1].label,
                                    columnWidth: CGFloat(columnWidth).pixelsToPoints(),
                                    borderEgdes: [.top, .trailing, .bottom]
                                )
                            } else if (rowIndex > 0 && columnIndex == 0) {
                                TitleText(
                                    label: …

我正在 SwifUI 中开发一个跨平台应用程序。在 iPhone / iPad 上，这段代码在 MacOS 上运行得非常好，相反，当我插入 NavigationLink 时，ForecastCardView 被完全切断。当我删除 NavigationLink 时，一切都会正确呈现。

带有导航链接

var FullSection: some View {
    LazyVGrid(columns: homeConfigurationUI.columns, alignment: .center, spacing: 20) {
            NavigationLink(destination: Text("test")) {
                  ForecastCardView(viewModel:  ForecastCardViewModel.initForTest())
            }.frame(width: 300, height: 300, alignment: .center)
        }
        .border(Color.yellow)
        .frame(minWidth: 300, idealWidth: 400, maxWidth: 600, minHeight: 0, idealHeight: 500, maxHeight: .infinity, alignment: .center)
}

带有导航链接的图像

没有导航链接

var FullSection: some View {
        LazyVGrid(columns: homeConfigurationUI.columns, alignment: .center, spacing: 20) {
                ForecastCardView(viewModel:  ForecastCardViewModel.initForTest())
            }
            .border(Color.yellow)
            .frame(minWidth: 300, idealWidth: 400, maxWidth: 600, minHeight: …

如何阻止向下滚动并只允许向上滚动以避免在滚动时看到顶部矩形上方的空白？

struct ContentView: View {
    
    var body: some View {
        GeometryReader { geo in
            ScrollView {
                Rectangle()
                .frame(width: geo.size.width, height: 400)
                .foregroundColor(.black)
                Spacer()
            }
        }
    }
}