实战教程·什么年代了还在敲传统木鱼？（二）（2）

页面跳转：打开设置页面

接下来，我们再升级一下，尝试编辑“功德值”参数等相关内容。我们创建一个新的SwiftUI文件，命名为DetailView，如下图所示：

回到ContentView文件，我们先来实现页面跳转交互逻辑。从ContentView跳转到DetailView页面的交互，是通过导航视图右边的按钮进行跳转，按钮部分可以使用navigationBarItems导航栏元素修饰符创建，如下代码所示：

.navigationBarItems(trailing: Image(systemName: "slider.horizontal.3"))

如此我们创建了按钮的样式部分，但设置按钮不能进行交互，若是我们在创建按钮，并且实现按钮的交互动作，那么在navigationBarItems导航栏元素修饰符中的代码就太过于复杂，且不够清晰。

我们可以创建按钮元素视图，将再这个视图赋予navigationBarItems导航栏元素修饰符，以减少在修饰符中存在太多的不同性质的代码，如下代码所示：

func settingBtn() -> some View {
    Button(action: {
    }) {
        Image(systemName: "slider.horizontal.3")
            .foregroundColor(.white)
    }
}

页面跳转部分，需要提前声明一个Bool类型的参数来控制跳转动作，如下代码所示：

@State var showDetailView:Bool = false

页面跳转可以使用Sheet模态弹窗打开方式，在Library选择Modifiers修饰符栏目，找到sheet的修饰符，拖到VStack纵向布局容器中，并绑定声明好的触发条件及确定好需要打开的页面，如下代码所示：

.sheet(isPresented: $showDetailView) {
  DetailView()
}

创建好页面跳转方法后，将触发条件给予到点击按钮处，并在点击设置按钮时，切换showDetailView的状态，如下代码所示：

self.showDetailView.toggle()

在预览窗口点击顶部导航菜单的“设置”按钮，即可打开DetailView页面。