web-dev-qa-db-fra.com

Comment afficher NavigationLink sous forme de bouton dans SwiftUI

J'ai beaucoup lu ici sur la navigation dans SwiftUI et j'ai essayé quelques choses, mais rien ne fonctionne comme souhaité.

Fondamentalement, j'ai une vue avec une liste d'entraînements et vous pouvez afficher un seul entraînement en cliquant sur une ligne. Cela fonctionne comme prévu en utilisant NavigationView avec NavigationLink.

Maintenant, je veux un bouton sur la vue de détail pour démarrer l'entraînement. Cela devrait ouvrir une vue avec une minuterie. La vue doit être présentée avec la même animation que la vue détaillée et afficher également le nom de l'entraînement dans la barre de navigation avec un bouton de retour.

Je pourrais implémenter cela avec une vue NavigationLink sur la page de détails, mais le lien apparaît toujours comme une ligne pleine largeur avec la flèche sur le côté droit. J'aimerais plutôt que ce soit un bouton, mais le NavigationLink semble être résistant au style.

struct WorkoutDetail: View {
    var workout: Workout

    var body: some View {
        VStack {
            NavigationLink(destination: TimerView()) {
                Text("Starten")
            }.navigationBarTitle(Text(workout.title))
        }
    }
}

struct WorkoutList: View {
    var workoutCollection: WorkoutCollection

    var body: some View {
        NavigationView {
            List(workoutCollection.workouts) { workout in
                NavigationLink(destination: WorkoutDetail(workout: workout)) {
                    WorkoutRow(workout: workout)
                }
            }.navigationBarTitle(Text("Workouts"))
        }
    }
}

Mise à jour: voici une capture d'écran pour illustrer ce que je veux dire:

enter image description here

navigationswiftui
17
G. Marc

À partir de la version bêta 6, vous n'avez pas besoin d'envelopper votre vue dans NavigationLink pour qu'elle déclenche la navigation lorsqu'elle est enfoncée.

Nous pouvons simplement lier une propriété avec notre NavigationLink et chaque fois que nous modifions cette propriété, notre navigation se déclenchera quelle que soit l'action effectuée. Par exemple-

struct SwiftUI: View {
    @State private var action: Int? = 0

    var body: some View {

        NavigationView {
                    VStack {
                        NavigationLink(destination: Text("Destination"), tag: 1, selection: $action) {
                            EmptyView()
                        }


                        Text("Your Custom View")
                            .onTapGesture {
                 //perform some tasks if needed before opening Destination view
                                self.action = 1
                        }
                    }
                }
        }
}

C'est si simple. Chaque fois que vous modifiez la valeur de votre propriété Bindable (c'est-à-dire l'action) NavigationLink comparera la valeur prédéfinie de son tag avec la propriété liée action, si les deux sont égaux, la navigation a lieu.

Par conséquent, vous pouvez créer vos vues comme vous le souhaitez et déclencher la navigation à partir de n'importe quelle vue, quelle que soit l'action, il vous suffit de jouer avec la propriété liée à NavigationLink.

Merci, j'espère que ça aide.

16
mohit kejriwal

Je joue avec ça depuis quelques jours moi-même. Je pense que c'est ce que vous recherchez.

struct WorkoutDetail: View {
var workout: Workout

var body: some View {
    NavigationView {
       VStack {
           NavigationLink(destination: TimerView()) {
               ButtonView()
           }.navigationBarTitle(Text(workout.title))
        }
    }
}

Et créez une vue que vous souhaitez afficher dans NavigationLink

struct ButtonView: View {
var body: some View {
    Text("Starten")
        .frame(width: 200, height: 100, alignment: .center)
        .background(Color.yellow)
        .foregroundColor(Color.red)
}

Remarque: Tout ce qui se trouve au-dessus de NavigationView semble apparaître sur toutes les pages de la navigation, ce qui réduit la taille de NavigationView dans les liens.

8
ShadowDES

Je pense que la façon précise de le faire est d'utiliser buttonStyle, par exemple

NavigationLink(destination: WorkoutDetail(workout: workout)) {
  WorkoutRow(workout: workout)
}
.buttonStyle(ButtonStyle3D(background: Color.yellow))
1
user5117217