如何最小化 NavigationView 中的 SearchBar 与其上方的 Text 视图之间的 space？

Question

我正在尝试将两个文本视图放在 NavigationView 中的 SearchBar 上方。有没有办法最小化 SearchBar 和它上面的文本视图之间的 space？ See screenshot.

此外，我的代码是否以这种方式优化，或者我是否可以将所有元素集中实现？

在下面找到我目前所做的示例。

import SwiftUI

struct HomeView: View {
  
  @State private var searchText = ""
  
  var body: some View {
    VStack(alignment: .leading) {
      
      Text("Hi There!")
        .font(.largeTitle)
        .fontWeight(.heavy)
        .multilineTextAlignment(.leading)
        .foregroundColor(Color(red: 0.388, green: 0.231, blue: 1.0))
        .padding([.top, .leading])
      
      Text("Are you ready to work out?")
        .fontWeight(.heavy)
        .bold()
        .foregroundColor(.gray)
        .padding(.leading)
      
      NavigationView {
        
        Text("")
          .navigationTitle("Your Plans")
          .searchable(text: $searchText)
      }
      
    }
    
  }
}

struct SettingsView: View {
  var body: some View {
    Text("Your Profile")
      .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("Training")
            .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)
  }
}

Answer 1

除了使用 NavigationView，您还可以执行以下操作：

struct ContentView: View {
  @State private var searchText = ""
  
  var body: some View {
    VStack(alignment: .leading, spacing: 40) {
      VStack(alignment: .leading) {
        Text("Hi There!")
          .font(.largeTitle)
          .fontWeight(.heavy)
          .multilineTextAlignment(.leading)
          .foregroundColor(Color(red: 0.388, green: 0.231, blue: 1.0))
        Text("Are you ready to work out?")
          .fontWeight(.heavy)
          .bold()
          .foregroundColor(.gray)
      }
      VStack(alignment: .leading, spacing: 3) {
        Text("Your Plans")
          .font(.largeTitle)
          .fontWeight(.heavy)
        SearchBar(text: $searchText)
      }
      Spacer()
    }
    .padding()
  }
}

struct SearchBar: View {
  @Binding var text: String
  @State private var isEditing = true
  
  var body: some View {
    HStack(spacing: 4) {
      Image(systemName: "magnifyingglass")
        .foregroundColor(.secondary)
      TextField("Search", text: $text)
        .onTapGesture {
          self.isEditing = true
        }
    }
    .frame(height: 45)
    .padding(.horizontal, 8)
    .background(Color(.systemGray6))
    .cornerRadius(15)
  }
}

PS：为简洁起见，我特意使 SearchBar 视图变得简单。您应该在生产应用程序中向其添加更多功能。

如何最小化 NavigationView 中的 SearchBar 与其上方的 Text 视图之间的 space？

How do I minimize the space between a SearchBar in a NavigationView and the Text views above it?

swiftui

uinavigationbar

searchbar