Добавление выбора сегментированного стиля в NaviftView SwiftUI

Question

Вопрос такой же простой, как и в заголовке. Я пытаюсь поместить Picker, который имеет стиль от SegmentedPickerStyle до NavigationBar в SwiftUI. Это как страница истории родного приложения Phone. Изображение ниже

Я искал Google и Github для примеров проектов, библиотек или любых учебных пособий, но не повезло. Я думаю, что если у nativa apps и WhatsApp, например, есть, то это должно быть возможно. Любая помощь будет оценена.

Answer 1

Вы можете поместить Picker непосредственно в .navigationBarItems.

Единственная проблема, с которой я столкнулся, - это центрирование сборщика. (Просто чтобы показать, что сборщик действительно может быть в навигационной панели, я собрал своеобразное хакерское решение с рамкой и Geometry Reader. Вам нужно найти правильное решение для центрирования.)

struct ContentView: View {
    @State private var choices = ["All", "Missed"]
    @State private var choice = 0

    @State private var contacts = [("Anna Lisa Moreno", "9:40 AM"), ("Justin Shumaker", "9:35 AM")]

    var body: some View {
        GeometryReader { geometry in
            NavigationView {
                List {
                    ForEach(self.contacts, id: \.self.0) { (contact, time) in
                        ContactView(name: contact, time: time)
                    }
                    .onDelete(perform: self.deleteItems)
                }
                .navigationBarTitle("Recents")
                .navigationBarItems(
                    leading:
                    HStack {
                        Button("Clear") {
                            // do stuff
                        }
                        Picker(selection: self.$choice, label: Text("Pick One")) {
                            ForEach(0 ..< self.choices.count) {
                                Text(self.choices[$0])
                            }
                        }
                        .frame(width: 130)
                        .pickerStyle(SegmentedPickerStyle())
                            .padding(.leading, (geometry.size.width / 2.0) - 130)
                    },
                trailing: EditButton())
            }
        }
    }

    func deleteItems(at offsets: IndexSet) {
        contacts.remove(atOffsets: offsets)
    }

}

struct ContactView: View {
    var name: String
    var time: String

    var body: some View {
        HStack {
            VStack {
                Image(systemName: "phone.fill.arrow.up.right")
                .font(.headline)
                .foregroundColor(.secondary)
                Text("")
            }
            VStack(alignment: .leading) {
                Text(self.name)
                    .font(.headline)
                Text("iPhone")
                    .foregroundColor(.secondary)
            }
            Spacer()
            Text(self.time)
                .foregroundColor(.secondary)
        }
    }
}

Answer 2

Для тех, кто хочет сделать его мертвой точкой, просто поместите два HStack с каждой стороны и сделайте их ширину фиксированной и равной.

Добавьте этот метод к расширению View.

func navigationBarItems<L, C, T>(leading: L, center: C, trailing: T) -> some View where L: View, C: View, T: View {
        self.navigationBarItems(leading:
            HStack{
                HStack {
                    leading
                }
                .frame(width: 100, alignment: .leading)
                Spacer()
                HStack {
                    center
                }
                .frame(width: 130, alignment: .center)
                Spacer()
                HStack {
                    //Text("asdasd")
                    trailing
                }
                //.background(Color.blue)
                .frame(width: 100, alignment: .trailing)
            }
            //.background(Color.yellow)
            .frame(width: UIScreen.main.bounds.size.width-32)

        )

    }

Теперь у вас есть View modifier, который имеет такое же использование navigationBatItems(:_). Вы можете редактировать код в зависимости от ваших потребностей.