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.

¿Cómo puedo minimizar el espacio entre una SearchBar en un NavigationView y los Text views que están arriba de ella?

Estoy tratando de colocar dos vistas de texto sobre un cuadro de búsqueda en un NavigationView. ¿Hay alguna forma de minimizar el espacio entre el cuadro de búsqueda y las vistas de texto que están sobre él? Ver captura de pantalla.

Además, ¿mi código es óptimo de esta manera o puedo implementar todos los elementos en uno solo?

A continuación se muestra un ejemplo de lo que he hecho hasta ahora.

import SwiftUI

struct HomeView: View {

@State private var searchText = ""

var body: some View {
    VStack(alignment: .leading) {

  Text("¡Hola!")
    .font(.largeTitle)
    .fontWeight(.heavy)
    .multilineTextAlignment(.leading)
    .foregroundColor(Color(red: 0.388, green: 0.231, blue: 1.0))
    .padding([.top, .leading])

  Text("¿Estás listo para hacer ejercicio?")
    .fontWeight(.heavy)
    .bold()
    .foregroundColor(.gray)
    .padding(.leading)

  NavigationView {

    Text("")
      .navigationTitle("Tus planes")
      .searchable(text: $searchText)
  }

}
}

struct SettingsView: View {
  var body: some View {
    Text("Tu perfil")
      .font(.largeTitle)
      .fontWeight(.heavy)
      .multilineTextAlignment(.leading)
      .foregroundColor(Color(red: 0.388, green: 0.231, blue: 1.0))
      .position(x: 125, y: 70)

}
}

struct ContentView: View {
  var body: some View {
    TabView{
      HomeView()
        .tabItem {
          Text("Entrenamiento")
            .foregroundColor(Color(red:0.388, green: 0.231, blue: 1.0))
        }

  SettingsView()
    .tabItem () {
      Image(systemName: "slider.vertical.3")

    }
    .foregroundColor(Color(red: 0.388, green: 0.231, blue: 1.0))
}
}
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
      .preferredColorScheme(.dark)
  }
}
Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para minimizar el espacio entre la barra de búsqueda (searchBar) y las vistas de texto (Text views) que se encuentran por encima de ella, puedes agregar un relleno negativo (negative padding) en la parte superior de NavigationView, de la siguiente manera:

    NavigationView {
        Text("")
            .navigationTitle("Tus planes")
            .searchable(text: $searchText)
    }
    .padding(.top, -10) // agrega el relleno negativo aquí para reducir el espacio
    

    Puedes ajustar el valor del relleno según tus preferencias.

    En cuanto a la implementación de todos los elementos en un solo lugar, depende de tu diseño y requisitos. Si deseas mantener la barra de búsqueda separada de las demás vistas, entonces la implementación actual está bien. Pero si deseas que todas ellas formen parte del mismo VStack, simplemente puedes mover el código de NavigationView dentro de ese VStack.

    Aquí tienes un ejemplo:

    VStack(alignment: .leading, spacing: 10) {
        Text("¡Hola!")
            .font(.largeTitle)
            .fontWeight(.heavy)
            .multilineTextAlignment(.leading)
            .foregroundColor(Color(red: 0.388, green: 0.231, blue: 1.0))
            .padding([.top, .leading])
    
        Text("¿Estás listo/a para hacer ejercicio?")
            .fontWeight(.heavy)
            .bold()
            .foregroundColor(.gray)
            .padding(.leading)
    
        NavigationView {
            Text("")
                .navigationTitle("Tus planes")
                .searchable(text: $searchText)
                .padding(.top, -10)
        }
    }
    

    Observa que también he agregado un espaciado de 10 entre las vistas de texto (Text views) utilizando el parámetro spacing del VStack.

Comments are closed.