SwiftUI: переход не будет скользить - PullRequest
0 голосов
/ 24 января 2020

У меня есть контроль с редактированием и списком в стеке. Я хочу, чтобы список выпадал сверху вниз, чтобы анимировать, как модное меню. Однако у меня есть несколько проблем. Если я просто пытаюсь использовать переход перемещения, то ничего не происходит. Если я использую масштабный переход, он всегда масштабирует центр формы сверху вниз. Это просто попытка переопределить переход, чтобы скользить. Все, кроме исчезновения.

Мой элемент управления выглядит так

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

Я должен отсутствовать или не получить, что-то простое

1 Ответ

0 голосов
/ 25 января 2020

ответил на мой вопрос. Нам нужно форсировать анимацию, используя 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()
        }
    }
}
...