es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Agregando un UISearchBar a la barra de navegación en SwiftUI.

05 Jun, 2023 Programación

Soy relativamente nuevo en SwiftUI y estoy tratando de agregar un UISearchBar a mi barra de navegación, pero tengo dificultades para hacer que aparezca. Si lo agrego como un componente separado, aparece pero está demasiado abajo en la pantalla. Aquí está lo que tengo hasta ahora:

Componente UISearchBar:

struct SearchBar2: UIViewRepresentable {
@Binding var text: String
func makeUIView(context: Context) -> UISearchBar {
let searchbar = UISearchBar(frame: .zero)
return searchbar
}

func updateUIView(_ uiView: UISearchBar, context: Context) {
    uiView.text = text
}

}

UIView:

var body: some View{

    ZStack{

    NavigationView{
    VStack {
        NavigationLink()                                    
        {
            InitView()
        }.buttonStyle(PlainButtonStyle())
        ZStack {
            HStack {
                //algunos elementos aquí
            }
        }.toolbar{
            SearchBar2(text: $text)
        }
        DayView()
    }

}

    }

}

Y esto es lo que parece en el simulador: (imagen del enlace incluido)

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el UISearchBar no se está alineando correctamente con la barra de navegación en tu código. Una posible solución es utilizar un modificador personalizado que añada la barra de búsqueda a la vista del título de la barra de navegación. Aquí tienes un ejemplo de cómo puedes conseguirlo:

    struct SearchBarModifier: ViewModifier {
    @Binding var text: String

    func body(content: Content) -> some View {
        content.navigationBarTitleView {
            HStack {
                // Añade cualquier elemento que quieras mostrar a la izquierda
                Spacer()
                SearchBar(text: $text)
                    .frame(width: .none, height: 40)
                Spacer()
                // Añade cualquier elemento que quieras mostrar a la derecha
            }
        }
    }
}

struct ContentView: View {
    @State var searchText: String = ""

    var body: some View {
        NavigationView {
            VStack {
                NavigationLink("Ir a la siguiente vista") {
                    Text("Siguiente vista")
                }
                .buttonStyle(PlainButtonStyle())
                Text("Vista principal")
            }
            .modifier(SearchBarModifier(text: $searchText))
        }
    }
}

    En este ejemplo, el SearchBarModifier añade la SearchBar a la vista del título de la barra de navegación, y la alinea correctamente con los elementos de la barra de navegación. Puedes personalizar la HStack para añadir cualquier elemento que quieras mostrar a los lados de la barra de búsqueda.

    ¡Espero que esto te ayude! Hazme saber si tienes más preguntas.

Comments are closed.