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()
                }
            }
        }