Início / coding / Perguntas / 79302255
Accepted
CalebK
Asked: 2024-12-23 13:48:43 +0800 CST

Modificar o conteúdo em um popover resulta em uma animação estranha de recarga e rolagem em vez de uma suave

  • 772

Estou tentando fazer um popover cujo conteúdo se expande dinamicamente com base nas escolhas acima. Eu me contentaria com nenhuma animação ou, idealmente, o popover se expandindo gradualmente para seu novo conteúdo, mas, em vez disso, parece que coloquei uma visualização de rolagem no popover e você pode ver o menu recarregar.

Curiosamente, se você fizer a mesma coisa com um botão, apenas modificando uma propriedade de estado, essa animação não acontece.

Imagino que, de alguma forma, esteja confundindo o sistema de animação com IDs não estáveis, mas tentei colocar argumentos .id() em tudo e isso não resolveu o problema.

insira a descrição da imagem aqui

struct DropdownTestView: View {
    @State var presentPopover: Bool = false
    @State var choice: Int = 0

    var body: some View {
        VStack {
            Button {
                presentPopover = true
            } label: {
                Text("Press To Choose")
            }
            .popover(isPresented: $presentPopover) {
                popoverView
                    .padding()
            }
            Spacer()
        }
        .padding()
    }

    var popoverView: some View {
        VStack(alignment: .leading) {
            Divider()

            Menu {
                ForEach(0..<6) { num in
                    Button {
                        choice = num
                    } label: {
                        Text("\(num)")
                    }
                }
            } label: {
                Text("Make A Choice")
            }

            if choice != 0 {
                Divider()
                HStack {
                    Text("WRONG CHOICE")
                }
            }
        }
        .frame(width: 220)
    }
}

Eu tentei algo assim:

HStack {
    Text("WRONG CHOICE")
}
.opacity(choice != 0 ? 1.0 : 0)
.frame(choice != 0 ? 30, 0)

Mas isso também não funciona.

2 respostas

  1. Você precisa mudar o conteúdo do popover para uma Viewstruct em vez de uma var computada e ter uma ligação nela. Além disso, é uma boa ideia combinar vars relacionadas em sua própria struct. por exemplo

    struct PopoverConfig {
    var isPresented = false
    var choice = 0
}

struct DropdownTestView: View {
    @State var popover = PopoverConfig()

    var body: some View {
        VStack {
            Button {
                popover.isPresented = true
            } label: {
                Text("Press To Choose")
            }
            .popover(isPresented: $popover.isPresented) {
                PopoverView(choice: $popover.choice)
                    .padding()
            }
            Spacer()
        }
        .padding()
    }
}

struct PopoverView: View {
    @Binding var choice: Int

    var body: some View {
        VStack(alignment: .leading) {
            Divider()

            Menu {
                ForEach(0..<6) { num in
                    Button {
                        choice = num
                    } label: {
                        Text("\(num)")
                    }
                }
            } label: {
                Text("Make A Choice")
                Text("Currently \(choice, format: .number)")
            }

            if choice != 0 {
                Divider()
                HStack {
                    Text("WRONG CHOICE")
                }
            }
        }
        .frame(width: 220)
    }
}
    • 1
  2. Best Answer

    Parece que a mudança no tamanho do conteúdo entra em vigor imediatamente, mas a mudança no tamanho do popover é animada. Isso seria bom se a âncora para a revelação fosse .top, mas parece que pode ser algo como .centerem vez disso.

    Como solução alternativa, tente envolver o conteúdo do popover em um ScrollView. O ScrollViewfornece "buffering" para a mudança na altura:

    .popover(isPresented: $presentPopover) {
    ScrollView {
        popoverView
            .padding()
    }
}

    Animação

    Ps. Outra solução alternativa seria usar um popover personalizado. Você pode então estilizar o popover da maneira que quiser e também controlar a maneira como as animações funcionam. A resposta para iOS SwiftUI Need to Display Popover Without "Arrow" fornece um exemplo de implementação (foi minha resposta).

    • 1

relate perguntas