Выравнивание по правому краю элемента панели инструментов .bottomBar в SwiftUI для iOS 14

#xcode #swiftui #ios14

#xcode #swiftui #ios14

Вопрос:

Я хотел бы добавить кнопку «создать» на .bottomBar из .toolbar в моем NavigationView .

Spacer() Просто почти по центру элемент выравнивается:

 struct HomeView: View {
    var body: some View {
        NavigationView {
            Text("Hello, World!")
                .navigationTitle("Hello, World!")
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        HStack {
                            Spacer()
                            Button(action: { print("Pressed") }) {
                                Image(systemName: "plus.circle.fill")
                                    .imageScale(.large)
                                    .font(.title)
                            }
                        }
                    }
                }
        }
    }
}
  

Это приводит к следующему:

Элемент панели инструментов, выровненный по центру

Не то, что я ожидал. Что еще более странно, так это то, что он выровнен не совсем по центру, он отклонен на несколько пикселей.

Итак, как мне:

  1. Выравнивание по правому краю?

  2. Выравнивание по центру?

Спасибо

Ответ №1:

У меня была такая же проблема, вот что я нашел (Xcode 12.0 Beta 6)

Выровнено по правому краю

Пример выравнивания по правому краю

Один из способов сделать это — использовать два .bottomBar элемента.

 .toolbar(content: {
    ToolbarItem(placement: .bottomBar) {
        Spacer()
    }
    ToolbarItem(placement: .bottomBar) {
        Button(action: {}) {
            Text("Add List")
        }
    }
})
  

Немного чище использовать ToolbarItemGroup с Spacer() .

 .toolbar(content: {
    ToolbarItemGroup(placement: .bottomBar) {
        Spacer()
        Button(action: {}) {
            Text("Add List")
        }
    }
})
  

По центру

Пример центрированного

Для центрирования элемента вы можете использовать .status в качестве места размещения.

 .toolbar(content: {
    ToolbarItem(placement: .status) {
        Button(action: {}) {
            Text("Add List")
        }
    }
})
  

Ответ №2:

Каждый элемент панели инструментов должен включать одно представление, поэтому просто переместите разделитель в отдельный элемент панели инструментов

Протестировано с Xcode 12b3

ДЕМОНСТРАЦИЯ

     .toolbar {
        ToolbarItem(placement: .bottomBar) {
            Spacer()
        }
        ToolbarItem(placement: .bottomBar) {
            Button(action: { print("Pressed") }) {
                Image(systemName: "plus.circle.fill")
                    .imageScale(.large)
                    .font(.title)
            }
        }
    }
  

Примечание: чтобы выровнять его по центру, удалите элемент панели инструментов с разделителем