Início / coding / Perguntas / 79588510
Accepted
routern
Asked: 2025-04-23 19:31:06 +0800 CST

Como ocultar o fundo de matchedTransitionSource?

  • 772

Como posso ocultar o fundo de um NavigationLink animado enquanto uso o gesto de deslizar para voltar? Aqui está o que eu tenho atualmente: e como eu quero que fique: semelhante ao app Fotos do iOS. Não tenho problema em cobrir o fundo com uma cor sólida ou um desfoque forte, mas não quero que ele fique visível durante a transição.
animação #1

animação #2 

struct ContentView: View {
    @Namespace private var transitionNamespace
    var body: some View {
        NavigationStack {
            VStack {
                Text("Should not be visible while swiping")

                let value = "details"
                NavigationLink(value: value) {
                    Text("Link")
                        .frame(width: 200, height: 50)
                        .background(Color.green.opacity(0.5))
                        .clipShape(RoundedRectangle(cornerRadius: 32))
                        .matchedTransitionSource(id: value, in: transitionNamespace)
                }
            }
            .navigationDestination(for: String.self) { value in
                ZStack {
                    Color.yellow.ignoresSafeArea(.all)
                    Text(value)
                }
                .navigationTransition(.zoom(sourceID: value, in: transitionNamespace))
                .navigationBarBackButtonHidden(true)
            }
        }
    }
}

Outro pequeno problema relacionado: por que essa borda branca aparece enquanto o gesto está em andamento? Como posso corrigir a cor? bordas brancas

struct ContentView: View {
    @Namespace private var transitionNamespace
    var body: some View {
        NavigationStack {
            ZStack {
                Color.purple.ignoresSafeArea(.all)
//                    .padding(-200) // this is a solution?
                VStack {
                    Text("Should not be visible while swiping")

                    let value = "details"
                    NavigationLink(value: value) {
                        Text("Link")
                            .frame(width: 200, height: 50)
                            .background(Color.green.opacity(0.5))
                            .clipShape(RoundedRectangle(cornerRadius: 32))
                            .matchedTransitionSource(id: value, in: transitionNamespace)
                    }
                }
            }
            .navigationDestination(for: String.self) { value in
                ZStack {
                    Color.yellow.ignoresSafeArea(.all)
                    Text(value)
                }
                .navigationTransition(.zoom(sourceID: value, in: transitionNamespace))
                .navigationBarBackButtonHidden(true)
            }
        }
    }
}

1 respostas

  1. Best Answer

    Você pode tentar usar uma variável de estado para registrar se deve aplicar um desfoque ou não.

    • Defina a variável como verdadeira no .onDisappearretorno de chamada do NavigationLink.
    • Uma maneira de redefini-lo como falso é fazê-lo no .onDisappearretorno de chamada da visualização de destino. No entanto, há um atraso antes que isso seja acionado.
    • Uma maneira melhor de redefini-lo é criar o NavigationStackcom um path. Assim que o caminho voltar a ficar vazio, o sinalizador poderá ser redefinido.

    O desfoque pode ser aplicado à página inteira (no VStackseu caso) ou apenas a uma parte dela, talvez excluindo o link em si. Excluir o link em si garante que ele esteja sempre desfocado durante a transição de volta.

    @State private var isBlurred = false
@State private var path = NavigationPath()

    NavigationStack(path: $path) { // 👈 modified
    VStack {
        Text("Should not be visible while swiping")
            .blur(radius: isBlurred ? 10 : 0) // 👈 added

        let value = "details"
        NavigationLink(value: value) {
            Text("Link")
                .frame(width: 200, height: 50)
                .background(Color.green.opacity(0.5))
                .clipShape(RoundedRectangle(cornerRadius: 32))
                .matchedTransitionSource(id: value, in: transitionNamespace)
        }
        .onDisappear { isBlurred = true } // 👈 added
    }
    .navigationDestination(for: String.self) { value in
        ZStack {
            Color.yellow.ignoresSafeArea(.all)
            Text(value)
        }
        .navigationTransition(.zoom(sourceID: value, in: transitionNamespace))
        .navigationBarBackButtonHidden(true)
    }
}
.task(id: path) { // 👈 added
    if isBlurred && path.isEmpty {
        isBlurred = false
    }
}

    Animação

    • 1

relate perguntas