0

我可以控制堆栈中的编辑和列表。我希望列表从上到下下拉以像精美菜单一样进行动画处理。但是我有一些问题。如果我只是尝试使用移动过渡，则不会发生任何事情。如果我使用比例转换，它总是从中心从上向下缩放。这只是试图让过渡覆盖滑动。除了褪色之外的任何东西。

我的控件看起来像这样

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

我必须错过或没有得到一些简单的东西

4

1 回答 1

2

回答了我自己的问题。我们需要通过在状态上使用 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()
        }
    }
}
于 2020-01-24T22:14:24.140 回答