You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.23 15:54:03