如何在SwiftUI中将NavigationLink显示为按钮

Question

我在这里已经阅读了很多有关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"))
        }
    }
}

更新：这是一个截图，以说明我的意思：

Answer 1

我认为准确的方法是使用buttonStyle，例如

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

Answer 2

我自己已经玩了几天了。我想这就是你要找的。

struct WorkoutDetail: View {
var workout: Workout

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

并创建一个要在 NavigationLink 中显示的视图

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

注意： NavigationView 上方的任何内容似乎都会显示在 Navigation 的所有页面上，从而使 NavigationView 在链接中的大小变小。

Answer 3

使用按钮标签内的 NavigationLink。

Button(action: {
    print("Floating Button Click")
}, label: {
    NavigationLink(destination: AddItemView()) {
         Text("Open View")
     }
})

Answer 4

与Pankaj Bhalala的解决方案非常相似，但删除了 ZStack：

struct ContentView: View {
    @State var selectedTag: String?

    var body: some View {
        Button(action: {
            self.selectedTag = "xx"
        }, label: {
            Image(systemName: "plus")
        })
        .background(
            NavigationLink(
                destination: Text("XX"),
                tag: "xx",
                selection: $selectedTag,
                label: { EmptyView() }
            )
        )
    }
}

等待更简洁的没有状态的解决方案。你呢？

Answer 5

从Beta 6开始，您无需将视图包装在内NavigationLink即可使它在按下时触发导航。

我们可以将属性与我们绑定NavigationLink，只要我们更改该属性，无论执行什么操作，导航都会触发。例如-

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与binded属性进行比较action。

因此，您可以按照自己想要的方式创建视图，并且可以从任何视图触发导航，而无需考虑任何操作，只需将属性绑定为即可NavigationLink。

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

Answer 6

您可以将 NavigationLink 用作 ZStack 的按钮：

@State var tag:Int? = nil
ZStack {
  NavigationLink(destination: MyModal(), tag: 1, selection: $tag) {
    EmptyView()
  }

  Button(action: {
    self.tag = 1
  }, label: {
    Text("show view tag 1")
  })
}

希望它会有所帮助。

Answer 7

我不知道为什么所有这些答案让事情变得如此复杂。在 SwiftUI 2.0 中，您只需在导航链接内添加按钮即可！

NavigationLink(destination: TimerView()) {
    Text("Starten")
}

您可以将 SwiftUI 样式应用于该Text对象，就像对任何其他元素设置样式一样。