如何在SwiftUI中将NavigationLink显示为按钮 [英] How to show NavigationLink as a button in SwiftUI

问题描述

我在这里已经阅读了很多有关SwiftUI中导航的信息，并尝试了几件事，但是没有任何效果可以满足要求.

I've read a lot here about navigation in SwiftUI and tried a couple of things, but nothing is working as desired.

基本上，我有一个包含锻炼列表的视图，您可以通过单击一行来显示一个锻炼.可以将NavigationView和NavigationLink一起使用.

Basically, I have a view with a list of workouts and you can show a single workout by clicking on a row. This works as expected using NavigationView together with NavigationLink.

现在，我希望详细视图上的按钮开始锻炼.这应该打开一个带有计时器的视图.该视图应显示与详细视图相同的动画，并在导航栏中使用后退按钮显示锻炼的名称.

Now, I want a button on the detail view to start the workout. This should open a view with a timer. The view should be presented with the same animation as the detail view did and also show the name of the workout in the navigation bar with a back button.

我可以在详细信息页面上的NavigationLink视图中实现此功能，但该链接始终显示为全宽行，并在右侧显示箭头.我希望这是一个按钮，但是NavigationLink似乎可以抵抗样式.

I could implement this with a NavigationLink view on the details page, but the link always appears as a full width row with the arrow on the right side. I'd like this to be a button instead, but the NavigationLink seems to be resistant against styling.

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

已更新:以下屏幕截图说明了我的意思:

Updated: Here's ascreenshot to illustrate what I mean:

推荐答案

您无需将视图包装在NavigationLink内即可使它在按下时触发导航.

You don't need to wrap your view inside the NavigationLink to make it trigger the navigation when pressed.

我们可以将属性与NavigationLink绑定在一起，无论何时更改该属性，无论执行什么操作，导航都会触发. 例如-

We can just bind a property with our NavigationLink and whenever we change that property our navigation will trigger irrespective of what action is performed. For example-

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

就这么简单.每当更改Bindable属性的值(即操作)时，NavigationLink都会将其tag的预定义值与绑定的属性action进行比较，如果两者相等，则会进行导航.

Its that simple. Whenever you change the value of your Bindable property (i.e. action) NavigationLink will compare the pre-defined value of its tag with the binded property action, if both are equal navigation takes place.

因此，您可以根据需要以任何方式创建视图，并且无论采取任何操作，都可以从任何视图触发导航，只需使用绑定了NavigationLink的属性即可.

Hence you can create your views any way you want and can trigger navigation from any view regardless of any action, just play with the property binded with NavigationLink.

谢谢，希望对您有所帮助.

Thanks, hope it helps.

这篇关于如何在SwiftUI中将NavigationLink显示为按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！