如何在 SwiftUI 中将视图（即列表）转换为从屏幕上的某个点出现？

Question

我有一个占据屏幕顶部 60% 的列表。我希望列表在转换过程中从 60% 的底部滑入，而不是从手机屏幕的底部滑入，从而实现动画效果。如果你看一下我的代码，你就会明白我在说什么......

struct ContentView: View {
    let controls = ["backward.fill", "play.fill", "forward.fill"]
    
    @State private var showingList = false
    
    var body: some View {
        GeometryReader { geo in
            VStack {
                Group {
                    if showingList {
                        List(0..<50) {
                            Text("\($0)")
                        }
                        .transition(.move(edge: .bottom))
                                                
                    } else {
                        Spacer()
                    }
                }
                .frame(maxWidth: geo.size.width, maxHeight: geo.size.height * 0.6)
//I want the list to slide in from the bottom of the top frame that takes 60% of the height.
                
                HStack {
                    ForEach(controls, id: \.self) {
                        Image(systemName: $0)
                            .foregroundColor(.white)
                    }
                }
                .frame(maxWidth: geo.size.width, maxHeight: geo.size.height * 0.4)
                .onTapGesture {
                    withAnimation {
                        showingList.toggle()
                    }
                }
            }
//I don't want the view to slide in from the bottom of the phone right here
            }
        }
    }

Answer 1

如果我理解正确的话，您希望列表在出现时隐藏在控件后面。您可以尝试在控件后面添加背景：

            HStack {
                ForEach(controls, id: \.self) {
                    Image(systemName: $0)
                        .foregroundColor(.white)
                }
            }
            .frame(maxWidth: geo.size.width, maxHeight: geo.size.height * 0.4)
            .background(Color(uiColor: .systemBackground)) // <- add a background here to hide the list during transition
            .onTapGesture {
                withAnimation(.linear(duration: 4)) {
                    showingList.toggle()
                }
            }
        }