Как создать панель навигации с заголовком, кнопкой «Готово» и сегментированным выбором в SwiftUI? ⇐ IOS

[Anonymous]

Я пытаюсь воспроизвести пользовательский интерфейс, аналогичный интерфейсу приложения Safari на iOS (как показано на прикрепленном изображении), с помощью SwiftUI. Панель навигации включает в себя:

• Динамический заголовок, основанный на выбранном параметре сегментированного выбора.
• Кнопка «Готово» находится в правой части панели навигации.
• Сегментированный выбор ( со значками закладок, списка чтения и истории) находится по центру панели навигации.
• Поле поиска интегрировано в панель навигации для фильтрации контента. (Я думаю, его нет на панели навигации)

Вот мой текущий код SwiftUI:

Код: Выделить всё

import SwiftUI

enum Tab: String, CaseIterable {
case bookmarks = "Bookmarks"
case readingList = "Reading List"
case history = "History"

var icon: String {
switch self {
case .bookmarks: return "book"
case .readingList: return "eyeglasses"
case .history: return "clock"
}
}
}

struct ContentView: View {
@State private var selectedTab: Tab = .bookmarks
@State private var searchQuery = ""

var body: some View {
NavigationView {
VStack {
ScrollView {
Text("Content for \(selectedTab.rawValue)")
.font(.title)
.padding()

Spacer()
}
}
.searchable(text: $searchQuery)
.navigationTitle(selectedTab.rawValue)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
// Centered Segmented Picker
ToolbarItem(placement: .principal) {
Picker("", selection: $selectedTab) {
ForEach(Tab.allCases, id: \.self) { tab in
Image(systemName: tab.icon)
.tag(tab)
}
}
.pickerStyle(SegmentedPickerStyle())
}

// "Done" Button
ToolbarItem(placement: .navigationBarTrailing) {
Button("Done") {
print("Done tapped")
}
}
}
}
}
}

#Preview {
ContentView()
}

Однако результат не соответствует желаемому пользовательскому интерфейсу:
Сегментированный элемент выбора не выровнен должным образом и не повторяет внешний вид приложения Safari.< /p>
Поле поиска не интегрировано в панель навигации, как в Safari.
Кнопка «Готово» перекрывается или не совпадает с сегментированным окном выбора.
п>

Подробнее здесь: https://stackoverflow.com/questions/793 ... ted-picker