Большое нежелательное пространство в панели навигации subview

Question

В панели навигации моего подпредставления есть огромное пространство.

Я предполагал, что, добавив кнопки trailing, все будет хорошо выровнено по правому краю кнопки back.

Это мой основной вид:

Теперь это мое подпредставление:

Посмотрите на огромный разрыв сверху. Я хочу, чтобы кнопка plus находилась справа от кнопки back. Нужно ли просто создать собственную кнопку возврата для этого или чего?

Вот мой код для подпредставления:

var body: some View {
    NavigationView {
        List {
            Text("hello world")
            Text("hello world")
            Text("hello world")
        }
        .navigationBarTitle(todoList.title!)
        .navigationBarItems(trailing:
            HStack {
                Button(action: {
                    self.add = true
                }, label: {
                    Image(systemName: "plus")
                })
            }
        )
    }
}

Я также хочу удалить текст из backкнопка, так что это просто изображение.

Подводя итог:

• Я хочу кнопку plus в верхней части справа от кнопки back
• Я хочу удалить текст кнопки back, который в этом примере читается как ColorTodo

Есть ли в SwiftUI собственный способ сделать это или мне нужна пользовательская кнопка возврата и отключение по умолчанию? один

Answer 1

Причиной дополнительного пространства является то, что вы помещаете NavigationView внутрь NavigationView;удалите тот, что находится внутри вашего подпредставления, и кнопка «плюс» будет на нужной высоте.

Что касается удаления текста, да, вам нужно будет скрыть стандартную кнопку «Назад» и заменить ее своей. Subview может выглядеть примерно так:

struct SubView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    var body: some View {
            List {
                Text("hello world")
                Text("hello world")
                Text("hello world")
            }
            .navigationBarTitle(todoList.title!, displayMode: .inline) // 1
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(leading: backButton, trailing: addButton)
    }

    var backButton: some View {
        Button(action: {
            self.presentationMode.wrappedValue.dismiss()
        }, label: {
            HStack {
                Image(systemName: "chevron.left")
                Text("Back") // 2
            }
        })
    }

    var addButton: some View {
        Button(action: {
            self.add = true
        }, label: {
            ZStack(alignment: .trailing) {
                Rectangle() // 3
                    .fill(Color.red.opacity(0.0001)) // 4
                    .frame(width: 40, height: 40)
                Image(systemName: "plus")
            }
        })
    }
}

Примечания:

1. Хотя displayMode: .inline не требуется, стиль большого заголовка по умолчанию выглядит немного странно, оживляя и удаляя.
2. Вы можете удалить это, если хотите (но см. Ниже)
3. Этот прямоугольник здесь, чтобы увеличить размер цели крана, поскольку кнопкой по умолчанию будет только размер значка плюса, который, вероятно, слишком мал.
4. Прямоугольник не может быть полностью прозрачным или не будет регистрировать касания.