Início / coding / Perguntas / 79349618
Accepted
willi hdz
Asked: 2025-01-12 17:04:06 +0800 CST

Link de navegação SwiftUI Seta/Chevron modificar posição

  • 772

Estou tentando recriar o aplicativo de mensagens da Apple. Percebi que o símbolo na seleção de bate-papo está na parte superior e não no centro, como o NavigationLink mostra por padrão.

Aqui está uma imagem do Apple Messages:

Imagem da Apple

Aqui está uma imagem da minha aplicação:

insira a descrição da imagem aqui

import SwiftUI

struct ContentView: View {
    
    private var imageSize: CGFloat = 50
    var body: some View {
        NavigationStack {
            List(NavigationScreens.allCases, id: \.self) { screen in
                NavigationLink(value: screen) {
                    Label(title: {
                        MessageChat(name: "SwiftUI")
                            .padding(.leading, 15)
                            //.border(.red)
                    }, icon: {
                        HStack {
                            Image(systemName: "circle.fill")
                                .resizable()
                                .frame(width: 10, height: 10)
                            Image("image_test")
                                .resizable()
                                .frame(width: imageSize, height: imageSize)
                                .clipShape(Circle())
                        }
                        .padding(10)
                    })
                }
            }
            .navigationTitle("Messages")
            .listStyle(.plain)
            .scrollContentBackground(.hidden)
            .navigationDestination(for: NavigationScreens.self) { screen in
                switch screen {
                case .Chat, .Profile, .Settings:
                    ChatSelection()
                }
            }
        }
    }
}

Não tenho certeza se essa é a maneira correta de fazer isso ou se um NavigationLink personalizado seria necessário.

Código de bate-papo da mensagem:

struct MessageChat: View {
@State var contact: Contact

var body: some View {
    HStack {
        VStack(alignment: .leading, spacing: 4) {
            HStack {
                // MARK: Name
                Text(contact.name)
                    .font(.headline)
                    .lineLimit(1)
                    .foregroundStyle(Color.primary)
                
                Spacer()
                
                // MARK: Message Date
                Text("12/12/12")
                    .font(.subheadline)
                    .foregroundStyle(Color.gray)
            }
            .padding(.trailing, 20)
            
            // MARK: Message Description
            Text("Some random text long enough to have the multiple lines effect, just in case its not long enough")
                .lineLimit(2)
                .font(.subheadline)
                .foregroundStyle(Color.secondary)
                .frame(maxHeight: 40, alignment: .topLeading)
        }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}

}

swiftui

1 respostas

  1. Best Answer

    Se você mover NavigationLinkpara a visualização MessageChat, poderá obter o estilo que deseja:

    struct MessageChat: View {
    let name: String
    let screen: NavigationScreens

    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 4) {
                NavigationLink(value: screen) {
                    HStack {
                        // ... name + message date, as before
                    }
                    .padding(.trailing, 20)
                }
                // ... description, as before
            }
        }
    }
}

    Então Listmuda para algo como:

    List(NavigationScreens.allCases, id: \.self) { screen in
    Label {
        MessageChat(name: "SwiftUI", screen: screen)
            .padding(.leading, 15)
    } icon: {
        HStack {
            // ... images, as before
        }
        .padding(10)
    }
}

    Captura de tela

    Surpreendentemente, isso transforma toda a linha em um link! É por isso que o ponto à esquerda está na cor do botão ativo (azul), em vez da cor padrão do primeiro plano.

    Aliás, você não deveria estar passando uma Statevariável como parâmetro. Então dentro de MessageChat, contactdeveria haver uma variável letor var, ou um Binding, mas não uma Statevariável.

    • 0

relate perguntas