Как настроить панель инструментов 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")
        }
    }
}
Другие вопросы по тегам