SwiftUI中点击toolbar按钮跳转至OptionsView视图控制器的实现方法
实现方案
你的现有代码存在的问题是:直接在Button的action闭包里创建OptionsView实例不会触发任何页面跳转逻辑,SwiftUI的导航跳转需要依托导航容器的状态管理实现。
下面给两种常用的实现方式:
方案1:iOS 16+ 推荐使用NavigationStack实现Push跳转
这是苹果当前推荐的导航实现方式,代码如下:
// 首先定义控制跳转的状态变量 @State private var showOptionsView = false var body: some View { NavigationStack { VStack{ Text("Hello, World!") } .navigationTitle("Profile") .navigationBarTitleDisplayMode(.inline) .toolbar{ ToolbarItemGroup(placement: .navigationBarTrailing) { Button { // 修改状态触发跳转 showOptionsView = true } label: { Label("Settings", systemImage: "gear") } } } // 绑定跳转目标 .navigationDestination(isPresented: $showOptionsView) { OptionsView() } } }
方案2:兼容iOS 13+ 基于NavigationView实现
如果需要支持旧版本系统,可以直接把按钮替换为NavigationLink:
var body: some View { NavigationView { VStack{ Text("Hello, World!") } .navigationTitle("Profile") .navigationBarTitleDisplayMode(.inline) .toolbar{ ToolbarItemGroup(placement: .navigationBarTrailing) { // 直接用NavigationLink替代Button即可触发push跳转 NavigationLink { OptionsView() } label: { Label("Settings", systemImage: "gear") } } } } }
补充:如果需要模态弹出而非导航栈push跳转
不管哪个版本都可以用sheet修饰符实现弹窗效果:
@State private var showOptionsView = false var body: some View { NavigationView { VStack{ Text("Hello, World!") } .navigationTitle("Profile") .navigationBarTitleDisplayMode(.inline) .toolbar{ ToolbarItemGroup(placement: .navigationBarTrailing) { Button { showOptionsView = true } label: { Label("Settings", systemImage: "gear") } } } .sheet(isPresented: $showOptionsView) { OptionsView() } } }
内容的提问来源于stack exchange,提问作者sultan.h
相关产品推荐
相关产品推荐

