如何在watchOS的SwiftUI列表中实现类似WhatsApp归档按钮的超顶滚动显示动画

需求说明 #

给定watchOS平台的SwiftUI列表代码，需要实现：当列表处于顶部时，用户继续向上滚动（产生负Y轴偏移），显示列表中的「Archive」按钮，达到类似WhatsApp归档按钮的弹出动画效果。

实现方案 #

通过捕获列表的滚动偏移量，结合动画控制按钮的显示/隐藏状态，具体步骤如下：

1. 定义滚动偏移捕获的PreferenceKey
   用于监听列表的滚动位置：

struct ScrollOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

2. 修改列表结构，添加偏移监听与按钮动画
   在原列表中加入偏移捕获逻辑，并给Archive按钮添加动画效果：

struct ContentView: View {
    @State private var scrollOffset: CGFloat = 0
    // 超滚动超过20pt时显示按钮，可根据手感调整阈值
    private var isArchiveButtonVisible: Bool {
        scrollOffset < -20
    }
    
    var body: some View {
        List {
            // 隐藏的几何阅读器，用于捕获滚动偏移
            GeometryReader { proxy in
                Color.clear
                    .preference(key: ScrollOffsetKey.self, value: proxy.frame(in: .named("scrollView")).minY)
            }
            .frame(height: 0)
            
            // 归档按钮，带滑入/滑出动画
            Button(action: {
                // 此处添加归档操作逻辑
            }, label: {
                Text("Archive")
            })
            .opacity(isArchiveButtonVisible ? 1 : 0)
            .offset(y: isArchiveButtonVisible ? 0 : -40)
            .animation(.easeInOut(duration: 0.3), value: isArchiveButtonVisible)
            
            // 原有列表内容
            ForEach(0..<5) { item in
                ChatButton()
            }
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
            .listRowPlatterColor(.clear)
            
            Rectangle()
                .frame(width: Sizes.width - 8, height: Sizes.h2)
                .foregroundColor(Color("Background"))
                .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
                .listRowPlatterColor(.clear)
            
            CenteredTextButton(
                text: "Durumlar", textColor: Color("White"),
                isLink: true, destinationKey: "statuses", buttonAction: {}
            )
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
            .listRowPlatterColor(.clear)
        }
        .coordinateSpace(name: "scrollView")
        .onPreferenceChange(ScrollOffsetKey.self) { newValue in
            scrollOffset = newValue
        }
    }
}

3. 补充自定义视图示例（若未实现）
   如果你的ChatButton和CenteredTextButton尚未定义，可参考以下基础实现：

struct ChatButton: View {
    var body: some View {
        Text("聊天项")
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color.gray.opacity(0.2))
    }
}

struct CenteredTextButton: View {
    let text: String
    let textColor: Color
    let isLink: Bool
    let destinationKey: String
    let buttonAction: () -> Void
    
    var body: some View {
        Button(action: buttonAction) {
            Text(text)
                .foregroundColor(textColor)
                .padding()
        }
    }
}

struct Sizes {
    static let width = WKInterfaceDevice.current().screenBounds.width
    static let h2: CGFloat = 2
}

关键逻辑说明 #

• 通过GeometryReader和PreferenceKey捕获列表的滚动偏移量，判断用户是否触发了顶部超滚动。
• 利用opacity和offset结合动画，实现按钮从上方滑入的效果，贴合watchOS的交互手感。
• 可调整isArchiveButtonVisible中的阈值（如-20），适配不同的触发灵敏度。

内容的提问来源于stack exchange，提问作者kemalkaancetindag