我如何在 WatchOS 上使用 SwiftUI 创建类似 Whatsapp 存档按钮生成动画的动画？

Question

 List {
                //I Want This Button To Appear When User Over Scroll To Top
                Button(action:{}, label: {
                    Text("Archive")
                })
                ForEach(0..<5) { item in
                    ChatButton()
                }
                .listRowInsets(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0))
                .listRowPlatterColor(.clear)
                Rectangle()
                    .frame(width: Sizes.width - 8, height: Sizes.h2)
                    .foregroundColor(Color("Background"))
                    .listRowInsets(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0))
                    .listRowPlatterColor(.clear)
                CenteredTextButton(text: "Durumlar", textColor: Color("White"), isLink: true, destinationKey: "statuses", buttonAction: {})
                    .listRowInsets(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0))
                    .listRowPlatterColor(.clear)
              
              
               
            }

在上面的代码中，我希望当用户滚动到顶部时，当用户已经位于顶部时（例如：在负偏移 y 上），显示“存档”的按钮

Answer 1

我找到了这样的解决方案，但我不知道这是最好的方法。

struct ChatsView: View {
    @State private var showArchived = false
    @State private var navigationTitle = "Sohbet"
    @State private var scrollAmount: CGPoint = CGPoint(x: 0, y: 0)

       
  
      
    
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    if(showArchived) {
                        CenteredIconButton(icon: "ArchiveIcon", text: "Arşivlenmiş", textColor: Color("White"), backgroundColor: Color("Background"))
                        .transition(.move(edge: .top))
                        .animation(.easeIn)
                    }
                   
                    ForEach(0..<5) { item in
                        ChatButton()
                    }
                    .listRowInsets(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0))
                    .listRowPlatterColor(.clear)
                    Rectangle()
                        .frame(width: Sizes.width - 8, height: Sizes.h2)
                        .foregroundColor(Color("Background"))
                        .listRowInsets(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0))
                        .listRowPlatterColor(.clear)
                    NavigationLink(destination: StatusesView()) {
                        VStack(spacing: 0) {
                            Image("Statuses")
                                .resizable()
                                .frame(width: Sizes.h18, height: Sizes.h18)
                            Text("Durumlar")
                                .font(.system(size: Sizes.h16))
                                .foregroundColor(Color("White60"))
                        }
                        .frame(width: Sizes.width, height: Sizes.h42)
                        .background(Color("Background"))
                        .cornerRadius(Sizes.h10)                        
                    }
                    .buttonStyle(VerticalIconButtonStyle())
                }
                .background(GeometryReader { geometry in
                                   Color.clear
                                       .preference(key: ScrollOffsetPreferenceKey.self, value: geometry.frame(in: .named("scroll")).origin)
                               })
                               .onPreferenceChange(ScrollOffsetPreferenceKey.self) { value in
                                   scrollAmount = value
                                   if value.y > 50 {
                                       showArchived = true
                                   } else if value.y < 0 {
                                       showArchived = false
                                   }
                               }
              
              
               
            }
            .coordinateSpace(name: "scroll")
          
            
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {
                    CircularButton(icon: "SettingsIcon",destinationKey: "settings", isLink: true)
                }
                ToolbarItem(placement: .topBarTrailing) {
                    CircularButton(icon: "NewChatIcon", destinationKey: "contacts", isLink: true)
                }
            }
            .navigationTitle("Sohbet")
          
            
           
           
        }
        

                                        
            
    }
    
  
}