SwiftUI - 如何使 ScrollView 在内容小于边界时不反弹

问题描述 投票:0回答:3

我正在努力让我的

ScrollView

  • 内容小于屏幕时不弹跳
  • 内容溢出屏幕时弹跳

这是我的代码:

struct ContentView: View {
    init() {
        UIScrollView.appearance().alwaysBounceVertical = false
    }
    var body: some View {
        ScrollView {
            Rectangle()
                .fill(Color.blue)
                .frame(height: 300) /// is smaller than the screen
                .padding()
        }
    }
}

我尝试设置

UIScrollView.appearance().alwaysBounceVertical = false
,但滚动视图仍然弹跳:

Swiping vertically on ScrollView, but still bounces

如果我这样做

UIScrollView.appearance().bounces = false
,它会停止弹跳。但是,如果我使矩形比屏幕高,它也会停止弹跳(我不想要)。

不反弹(耶!) ...但是当内容溢出屏幕时不会弹跳

如何禁用弹跳,但只有当内容小于滚动视图的边界时才可以?

ios swift swiftui uiscrollview
3个回答
5
投票

对于 iOS 16.4+,请参阅@JuvinR 的回答


好吧,当使用

SwiftUI-Introspect
时,将
alwaysBounceVertical
设置为
false
实际上是有效的。我不确定为什么像你那样设置外观不起作用......

无论如何,这里有一些工作示例代码:

struct ContentView: View {
    
    @State private var count = 5
    
    var body: some View {
        VStack {
            Picker("Count", selection: $count) {
                Text("5").tag(5)
                Text("100").tag(100)
            }
            .pickerStyle(SegmentedPickerStyle())
            
            ScrollView {
                VStack {
                    ForEach(1 ... count, id: \.self) { i in
                        Text("Item: \(i)")
                    }
                }
                .frame(maxWidth: .infinity)
            }
            .introspectScrollView { scrollView in
                scrollView.alwaysBounceVertical = false
            }
        }
    }
}

结果(不幸的是你看不到我的鼠标试图拖动较短的列表):


2
投票

iOS 16.4开始,有一个名为

.scrollBounceBehavior
的新修饰符,可用于防止ScrollView在内容小于屏幕时弹跳。

例子:

struct ContentView: View {
    
    var body: some View {
        ScrollView {
            Rectangle()
                .fill(Color.blue)
                .frame(height: 300)
                .padding()
        }
        .scrollBounceBehavior(.basedOnSize)
    }
    
}

0
投票

根据 George 的回答使用

SwiftUI-Introspect
做了一个小的扩展:

extension View {
    func disableBouncingWhenNotScrollable() -> some View {
        introspectScrollView { scrollView in
            scrollView.alwaysBounceVertical = false
            scrollView.alwaysBounceHorizontal = false
        }
    }
}

用法:

ScrollView {
    // content
}
.disableBouncingWhenNotScrollable()
© www.soinside.com 2019 - 2024. All rights reserved.