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

【问题标题】：How do I minimize the space between a SearchBar in a NavigationView and the Text views above it?如何最小化 NavigationView 中的 SearchBar 与其上方的 Text 视图之间的空间？
【发布时间】：2021-12-26 09:39:36
【问题描述】：

我试图在 NavigationView 中的 SearchBar 上方放置两个 Text 视图。有没有办法最小化 SearchBar 和它上面的 Text 视图之间的空间？ 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)
  }
}

【问题讨论】：

标签： swiftui uinavigationbar searchbar

【解决方案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 视图变得简单。您应该在生产应用程序中为其添加更多功能。

【讨论】：