SwiftUI：過渡不會滑動

Question

我可以控制堆棧中的編輯和列表。 我希望列表從上到下下拉，像精美的菜單一樣制作動畫。 但是我有幾個問題。 如果我只是嘗試使用移動過渡，則什么也不會發生。 如果我使用縮放轉換，它總是從中心縮放從上到下。 這只是試圖讓過渡覆蓋滑動。 除了褪色什么都沒有。

我的控件看起來像這樣

struct Search: Identifiable {
    let id: UUID
    let text: String
}

struct SearchBox: View {
    @State var searchParam: String = ""
    @State var stuff = [Search]()

    init() {
        // To remove only extra separators below the list:
        UITableView.appearance().tableFooterView = UIView()

        // To remove all separators including the actual ones:
        UITableView.appearance().separatorStyle = .none
    }

    var body: some View {
        var binding = Binding<String>(
        get: {
            self.searchParam
        },
        set: {
            self.stuff.append(
                Search(id: UUID(), text: $0))
                self.searchParam = $0
        })

        return VStack(spacing: 0.0) {
            TextField("Search", text: binding )
                .font(.title)
                .padding()
                .background(Color.white)

            Color(.darkGray)
                .frame(height: 1.0)

            if stuff.count > 0 {
                List(stuff, id: \.id) {
                    Text($0.text)
                }
                .transition(.slide)
            }
        }
    }

    struct SearchBox_Preview: PreviewProvider {
        static var previews: some View{
            SearchBox()
        }
    }
}

內容視圖很簡單..

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
        ZStack(alignment: .topLeading) {
            Color.blue
              SearchBox()
                    .frame(width: geometry.size.width * 0.40, alignment: .topLeading)
                    .frame(minHeight: 0, maxHeight: geometry.size.height * 0.40,
                           alignment: .topLeading)
            .padding()
            .clipped()
                .shadow(radius: 5.0)
        }
        .background(Color.clear)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

我必須錯過或沒有得到一些簡單的東西

Answer 1

回答了我自己的問題。 我們需要通過在狀態上使用 withAnimation 來強制動畫。 所以我改變了我的出價是這樣的：

struct Search: Identifiable {
    let id: UUID
    let text: String
}

struct SearchBox: View {
    @State var searchParam: String = ""
    @State var stuff = [Search]()
    @State var showList = false

    init() {
        // To remove only extra separators below the list:
        UITableView.appearance().tableFooterView = UIView()

        // To remove all separators including the actual ones:
        UITableView.appearance().separatorStyle = .none
    }

    var body: some View {
        var binding = Binding<String>(
        get: {
            self.searchParam
        },
        set: {
            self.stuff.append(
                Search(id: UUID(), text: $0)
            )
            self.searchParam = $0

            // change visibility state with in animation block.
            withAnimation { self.showList = stuff.count > 0 }
        })

        return VStack(spacing: 0.0) {
            TextField("Search", text: binding )
                .font(.title)
                .padding()
                .background(Color.white)

            Color(.darkGray)
                .frame(height: 1.0)

            if showList {
                List(stuff, id: \.id) {
                    Text($0.text)
                }
                .transition(.slide)
            }
        }
    }

    struct SearchBox_Preview: PreviewProvider {
        static var previews: some View{
            SearchBox()
        }
    }
}