SwiftUI：将分段控件（选择器）放在搜索栏下方的导航栏中？答案

【问题标题】：SwiftUI: Put Segment Control (Picker) in navigation bar below Searchbar?SwiftUI：将分段控件（选择器）放在搜索栏下方的导航栏中？
【发布时间】：2021-10-13 13:53:00
【问题描述】：

我正在尝试编写一个列表邀请导航视图，该视图也使用searchable：

.searchable(text: $query, placement: .toolbar, prompt: "Search")

我将 Picker 放入的视图如下所示：

struct FolderView: View {
    let title: String
    let mails: [Mail]
    @Binding var selectedMail: Mail?
    @State private var selectedColorIndex = 0
    

    var body: some View {
        List {
            Picker("Favorite Color", selection: $selectedColorIndex, content: {
                           Text("Red").tag(0)
                           Text("Green").tag(1)
                           Text("Blue").tag(2)
                       })
                       .pickerStyle(SegmentedPickerStyle())
            
            
            ForEach(mails) { mail in
                NavigationLink(
                    destination: MailView(mail: mail),
                    tag: mail,
                    selection: $selectedMail
                ) {
                    VStack(alignment: .leading) {
                        Text(mail.subject)
                        Text(mail.date, style: .date)
                    }
                }
            }
        }.navigationTitle(title)
    }
}

屏幕是这样的：

我试图弄清楚如何将分段控件放在搜索栏下方的导航栏中，使其看起来组合在一起而不是列表的一部分...

这将允许我搜索和过滤。取决于选择的片段。

如何将选择器视图放在导航栏内？

按照提供的答案状态，将 Picker 放在 .toolbar 修饰符中，如下所示：

 .toolbar {
                Picker("Favorite Color", selection: $selectedColorIndex, content: {
                               Text("Red").tag(0)
                               Text("Green").tag(1)
                               Text("Blue").tag(2)
                           })
                           .pickerStyle(SegmentedPickerStyle())
            }

让它看起来像这样：

我在问题中提到的另一件事是我试图将 Picker 放在搜索栏下方。有没有办法做到这一点？我是否必须编写自定义搜索视图实现，其中有一个搜索栏和我想要的任何其他视图，才能将选择器放在搜索栏下方？

编辑：

添加显示我如何按要求添加搜索栏的代码：

var body: some View {
        
        NavigationView {
            Sidebar(
                store: store,
                selectedFolder: $selectedLabel,
                selectedMail: $selectedMail
            )
            
            Text("Select label...")
            Text("Select mail...")
        }
        .searchable(text: $query, placement: .toolbar, prompt: "Search")
    }

【问题讨论】：

向我们展示您添加搜索视图的位置和方式的代码。然后我们就可以在它下面添加工具栏了。

标签： swift swiftui navigationview

【解决方案1】：

要将您的 Picker 放在导航栏内，您可以试试这个，注意您必须根据需要调整位置。

struct FolderView: View {
   let title: String
   let mails: [Mail]
   @Binding var selectedMail: Mail?
   @State private var selectedColorIndex = 0

    var body: some View {
        List {
            ForEach(mails, id: \.id) { mail in
                NavigationLink(
                    destination: MailView(mail: mail),
                    tag: mail,
                    selection: $selectedMail
                ) {
                    VStack(alignment: .leading) {
                        Text(mail.subject)
                        Text(mail.date, style: .date)
                    }
                }
            }
        }
        .navigationTitle(title)
        .toolbar {
            ToolbarItem(placement: .automatic) {
                    Picker("Favorite Color", selection: $selectedColorIndex, content: {
                        Text("Red").tag(0)
                        Text("Green").tag(1)
                        Text("Blue").tag(2)
                    }).pickerStyle(SegmentedPickerStyle())
            }
        }
    }
}

【讨论】：

看来你打败了我！
我第一次打败任何人。干杯。

【解决方案2】：

我无法让您的代码按原样工作，但我创建了一个示例项目，其中包含一些代码。

如果我对问题的理解正确，您希望将“红、绿、蓝”选择器放入导航栏中。

为此，您需要在导航视图上使用.toolbar 修饰符。这样做将允许您向工具栏添加其他项目。

此外，您可以修改ToolbarItem(placement: .navigationBarLeading) 以更改选择器的位置。如果不需要，您可以完全删除此行。

   struct ContentView: View {
    let title: String
    @State private var selectedColorIndex = 0
    
    var body: some View {
        NavigationView {
            Text("placeholder")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Picker("Favorite Color", selection: $selectedColorIndex, content: {
                            Text("Red").tag(0)
                            Text("Green").tag(1)
                            Text("Blue").tag(2)
                        })
                            .pickerStyle(SegmentedPickerStyle())
                }
            }.navigationBarTitle("Inbox")
        }
    }
}

【讨论】：