如何在 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 a screenshot 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 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_1"), tag: 1, selection: $action) {
                    EmptyView()
                }
                NavigationLink(destination: Text("Destination_2"), tag: 2, selection: $action) {
                    EmptyView()
                }
                
                Text("Your Custom View 1")
                    .onTapGesture {
                        //perform some tasks if needed before opening Destination view
                        self.action = 1
                    }
                Text("Your Custom View 2")
                    .onTapGesture {
                        //perform some tasks if needed before opening Destination view
                        self.action = 2
                    }
            }
        }
    }
}

每当您更改 Bindable 属性(即操作)的值时，NavigationLink 都会将其 tag 的预定义值与绑定属性 action，如果两者相等，则导航发生.

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.

谢谢，希望有帮助.

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