routern's questions

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.

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?

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

Há uma lista com duas seções: opções escolhidas , que são reordenáveis ​​e deletáveis, e opções sugeridas , que podem ser adicionadas às escolhidas. Como fazer novos itens serem arrastáveis ​​e removíveis instantaneamente? A captura de tela mostra como fica, eu quero que "cinco" e "seis" sejam editáveis ​​instantaneamente quando adicionados.

É muito estranho para mim que quando eu uso ForEach(suggested, id: \.self)em vez de ForEach(filteredSuggestions(), id: \.self), a seção escolhida parece como esperado , mas a sugerida obviamente não.

struct EditorView: View {
    @State var chosen = ["one", "two", "three", "four"]
    let suggested = ["five", "six", "seven", "eight"]

    var body: some View {
        List {
            Section {
                ForEach(chosen, id: \.self) { item in Text(item) }
                    .onDelete{ _ in }
                    .onMove{ _, _ in }
            } header: { Text("chosen") }
            Section {
                ForEach(filteredSuggestions(), id: \.self) { item in
                    HStack(spacing: 14) {
                        Button { chosen.append(item) }
                        label: {
                            Image(systemName: "plus.circle.fill")
                                .imageScale(.large)
                                .foregroundStyle(.green)
                        }
                        Text(item)
                    }
                }
            } header: { Text("suggested") }
        }
        .environment(\.editMode, .constant(.active))
    }
    
    private func filteredSuggestions() -> [String] {
        return suggested.filter { item in
            !chosen.contains(item)
        }
    }
}

Estou tentando criar uma lista de elementos não retangulares, cada um dos quais tem um menu de contexto. No entanto, estou encontrando um problema com os cantos ao executar um pressionamento longo.

Qual é a maneira correta de usar tal combinação? Não quero usar List por causa do estilo padrão. O problema ocorre apenas enquanto a animação está em andamento.

processo de animação pressionado longamente

Aqui está um exemplo de código simplificado que pode ser copiado, colado e executado em um arquivo. O vídeo foi gravado no dispositivo com iOS 18.2

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene { WindowGroup { TestView() } }
}

struct TestView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    var body: some View {
        VStack {
            ForEach(items, id: \.self) { item in
                HStack {
                    Text(item)
                    Spacer()
                    Image(systemName: "star")
                }
                .padding()
                .background(.yellow)
                // tried all these in different combinations, none works
                .contentShape(RoundedRectangle(cornerRadius: 10))
                .clipShape(RoundedRectangle(cornerRadius: 10))
                .containerShape(RoundedRectangle(cornerRadius: 10))
                .contextMenu {
                    Button { print("Edit \(item)") }
                    label: { Text("Edit"); Image(systemName: "pencil") }
                }
            }
        }
        .padding()
    }
}

#Preview { TestView() }