SwiftUI - 调整 ScrollView 滚动指示器插图

Posted 2023-02-24

【中文标题】SwiftUI - 调整 ScrollView 滚动指示器插图

【英文标题】：SwiftUI - Adjust ScrollView scroll indicator insets

【发布时间】：2021-01-21 17:01:18

【问题描述】：

我正在创建一个聊天应用程序，我希望 ScrollView 的内容位于输入字段下方（向上滚动时）。我已经将 ScrollView 和输入字段放在 ZStack 中。 ScrollView 的底部填充将内容向上，但我也希望滚动指示器随着内容向上移动。

有没有办法改变滚动指示器的插入以匹配填充，或任何其他解决方法来实现我正在寻找的东西？

这是当前代码：

          ZStack(alignment: .bottom) 
            ScrollView 
                ScrollViewReader  value in
                    VStack(spacing: 5) 
                        ForEach(MOCK_MESSAGES) 
                            mMessage in
                            MessageView(mMessage: mMessage)
                        
                        .onAppear 
                            value.scrollTo(MOCK_MESSAGES.count - 1)
                        
                    
                    .padding(.top, 10)
                    .padding(.bottom, 40)
                
            
            MessageInputView(messageText: $messageText)
        

总结：这个想法是让 ScrollView 在输入视图上方，但在向上滚动时将内容移动到输入视图下方。

【问题讨论】：

请上传您目前尝试过的代码

@LucaSfragara，已上传。

您找到解决方案了吗？

@sheldor 我回答了几个解决方案

【参考方案1】：

iOS 15 / Swift 3

您可以使用 .safeAreaInset 而不是填充来执行此操作，然后它也会为您处理滚动指示器插入。

ScrollView 
    ScrollViewReader  value in
        VStack(spacing: 5) 
            // stuff
        
    

.safeAreaInset(edge: .bottom) 
    MessageInputView(messageText: $messageText)

注意：从 Xcode 13.1 开始，.safeAreaInsets 似乎不适用于 List。

iOS 14 / Swift 2 或带有列表

就像 SwiftUI 中的许多事情一样，如果不修改底层 UIKit 组件，似乎就没有办法做到这一点。不过，有一个简单的解决方案，使用 Introspect 库：

ZStack(alignment: .bottom) 
    ScrollView 
        ScrollViewReader  value in
            VStack(spacing: 5) 
                // stuff
            
            .padding(.top, 10)
            .padding(.bottom, 40)
        
    
    .introspectScrollView  sv in
        sv.verticalScrollIndicatorInsets.top = 10
        sv.verticalScrollIndicatorInsets.bottom = 40
    
    MessageInputView(messageText: $messageText)

您也可以使用List 和introspectTableView 来实现。