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

SwiftUI中如何将Inspector按钮置于.searchable组件右侧?

可以实现,你需要先把视图包裹在NavigationStack中(让搜索栏和按钮处于标准导航栏区域),然后调整Toolbar按钮的位置参数,就能让按钮显示在搜索栏右侧。

修改后的代码如下:

struct ContentView: View {
    @State private var searchText = ""
    
    var body: some View {
        NavigationStack {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Hello, world!")
            }
            .padding()
            .navigationTitle("页面标题")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Inspector", systemImage: "sidebar.right") {
                        // 在这里添加切换Inspector的逻辑
                    }
                }
            }
            .searchable(text: $searchText)
        }
    }
}

关键说明:

  • 加入NavigationStack是为了让.searchable和.toolbar能正确整合到导航栏布局中,否则搜索栏会以嵌入方式显示在视图顶部,无法和按钮同排。
  • 使用.navigationBarTrailing作为按钮的位置参数,会将按钮固定在导航栏最右侧,和搜索栏处于同一行。

内容的提问来源于stack exchange,提问作者DeEskalator

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.06.14 06:57:20