首页 > 解决方案 > 如何在 SwiftUI 中将 NavigationLink 显示为按钮

问题描述

我在这里阅读了很多关于 SwiftUI 导航的内容并尝试了几件事,但没有任何效果。

基本上,我有一个包含锻炼列表的视图,您可以通过单击一行来显示单个锻炼。使用 NavigationView 和 NavigationLink 可以按预期工作。

现在,我想要详细视图上的一个按钮来开始锻炼。这应该打开一个带有计时器的视图。该视图应显示与详细视图相同的动画,并在导航栏中使用返回按钮显示锻炼的名称。

我可以使用详细信息页面上的 NavigationLink 视图来实现这一点,但链接始终显示为全宽行,右侧有箭头。我希望这是一个按钮,但 NavigationLink 似乎对样式有抵抗力。

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

更新:这是一个截图来说明我的意思:

当前布局:带有默认向右箭头的“开始”。 所需布局:黄色背景的蓝色按钮。

标签: navigationswiftui

解决方案


您无需将视图包装在 中NavigationLink以使其在按下时触发导航。

我们可以将一个属性与我们的属性绑定,NavigationLink并且每当我们更改该属性时,无论执行什么操作,我们的导航都会触发。例如:

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,如果两者相等,则会发生导航。

因此,您可以以任何您想要的方式创建视图,并且可以从任何视图触发导航,而不管任何操作,只需使用绑定的属性NavigationLink

谢谢,希望对您有所帮助。


推荐阅读