Как настроить панель инструментов SwiftUI для отображения в центре представления
Я экспериментирую с SwiftUI ToolbarItem в различных положениях, на мой взгляд, например, в bottomBar и навигации. Мне интересно, можно ли центрировать ToolBarItem по вертикали в представлении, а не сверху или снизу. При настройке размещения для ToolBarItem я не вижу свойства размещения для центрирования. Есть идеи, как этот ToolBarItem можно центрировать в представлении?
Вот мой код для ToolBarItem, для которого в настоящее время установлено значение .bottomBar:
struct ContentView: View {
@State private var cityName = ""
var body: some View {
NavigationView {
VStack() {
//some content
}.navigationTitle("Weather")
.toolbar {
ToolbarItem(placement: .bottomBar) {
HStack {
TextField("Enter City Name", text: $cityName)
.frame(minWidth: 100, idealWidth: 150, maxWidth: 240, minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .leading)
Spacer()
Button(action: {
// some action
}) {
HStack {
Image(systemName: "plus")
.font(.title)
}
.padding(15)
.foregroundColor(.white)
.background(Color.green)
.cornerRadius(40)
}
}
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
1 ответ
Попробуйте этот подход для размещения элементов панели инструментов в середине
ContentView
.
Он должен выглядеть точно так же, как
.toolbar {...}
у вас есть, и он работает именно так, как вы ожидаете. Основное отличие этого подхода в том, что вы можете разместить панель инструментов в любом месте. Вы также можете использовать
GeometryReader
для очень точного размещения в вашем представлении.
struct ContentView: View {
@State private var cityName = ""
var toolbar: some View {
HStack {
Spacer()
TextField("Enter City Name", text: $cityName)
.frame(minWidth: 100, idealWidth: 110, maxWidth: 140, minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .leading)
Spacer()
Button(action: {}) {
Image(systemName: "plus").font(.title)
.padding(15)
.foregroundColor(.white)
.background(Color.green)
.cornerRadius(40)
}
Spacer()
}
}
var body: some View {
NavigationView {
VStack {
Spacer()
toolbar
Spacer()
}.navigationTitle("Weather")
}
}
}